标签：注释 运维 color 语法 css font 选择器 CSS
写在开篇
html的内容，想要改变它的样式？比如颜色、字体、布局，等等，怎么破？CSS代码带你起飞！
css语法
css的语法非常简单，如下：
选择器 {属性: 值;属性:值}
例如：
h2 {color: cornflowerblue;font-size: 60px;}
上面的h2是元素选择器，属性color，它的值是cornflowerblue。属性font-size，它的值是60px。
使用css的3种方式
有3种css的使用方式：
- 外部 CSS
- 内部 CSS
- 行内 CSS
虽然有3种，但笔者只讲外部css，在实际开发中，内容必须和样式分离，大有好处，慢慢体会吧！
那么如何使用外部的css？需要在html的head中通过link来引入，如下：
<head>
<link rel="stylesheet" href="./test.css">
</head>
css代码中如何写注释
在写代码的过程中，注释很重要。但不要盲目的注释，对关键的、重要的逻辑做简单明了的注释即可，不然写的代码看起来跟一坨屎没什么区别。那么在css代码中，也是可以做注释的。当然了，该注释的时候就注释，不该注释的时候就别注释。那到底要不要加注释？算了，随你吧！不！我还是啰嗦一下，对简单明了、见名知意的代码就没必要注释了，要尽量让我们的代码看起来简洁、优雅。笔者曾经接手过一个项目，看了别人写的代码之后，就是一坨屎。我看个屁啊！直接重写，看都不想看了。
回到正题，解锁3种注释姿势。
姿势1：
/* 注释内容 */
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}
姿势2：
/* 注释内容，注释内容，
注释内容。
*/
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}
姿势3：
h2,h3,p{
text-align: center;
color: cornflowerblue; /* 注释内容 */
font-size: 60px;
}
css选择器
css的选择器很重要，所以笔者单独拿出来讲了。下面我们剖析一下5种选择
1. 元素选择器
元素选择器就是通过元素来进行选择，并设置css样式，看下面小栗子。
创建home.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p>面向运维编程</p>
<p>面向运维编程</p>
</body>
</html>
创建test.css文件
p {
text-align: center;
color: red;
}
2. id选择器
通过id选择器，来选择元素，前提条件是元素需要设置了id，看下面的小栗子。
创建home.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p id="a1">面向运维编程</p>
<p id="a2">面向运维编程</p>
</body>
</html>
创建test.css文件
#a1 {
text-align: center;
color: blue;
font-size: 100px;
}
id选择器的语法是，前面需要加#号，然后跟着是id的名字，这样就能选择到元素了，如这个例子只选择了#a1，#a2并没有设置任何样式，效果见下图。
效果图如下：
3. 类选择器
类选择器的语法是通过一个点（“.”）来进行选择，前提是要给元素设置一个类名字，请看下面案例。
创建home.html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p class="c1">彩虹运维技术栈社区</p>
<p class="c1">面向运维编程</p>
</body>
</html>
创建test.css文件
.c1 {
text-align: center;
color: red;
font-size: 60px;
}
上面的例子中，类名均为c1的，设置的css样式都会生效，那如果想针对性的设置属性怎么做？请继续往下看小栗子。
前端代码保持不变，修改一些css的代码，请细品：
h2.c1 {
text-align: center;
color: red;
font-size: 80px;
}
p.c1 {
color: green;
font-size: 60px;
}
效果图如下：
4. 通用选择器
通用选择器最大特点就是“一锅端”，不管你给元素设置了id也好还是class也好，都直接将所有元素都应用css的样式。它是用“*”符号来作为选择，请看下面例子。
html代码分别设置了有class和id，以及啥都没有设置的最后一个p元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2 class="cls_1">彩虹运维技术栈社区</h2>
<p id="id_1">持续分享运维领域技能</p>
<p>持续分享运维开发技能</p>
</body>
</html>
下面是css的代码
* {
text-align: center;
color: darkmagenta;
font-size: 60px;
}
来看看“一锅端”的效果：
5. 分组选择器
分组选择器的最大好处就是可以减少css代码量，如果部分元素需要设置一样的样式，那么可以将它进行分组，选择器用逗号分隔。
对html代码进行改造改造，如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全栈运维学习</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>彩虹运维技术栈社区</h2>
<h3>持续分享运维领域技能</h3>
<p>持续分享运维开发技能</p>
</body>
</html>
h2、h3、p为一组，均应用了同样的css样式，css代码如下：
h2,h3,p{
text-align: center;
color: cornflowerblue;
font-size: 60px;
}
效果如下图：
写在最后
本次分享的到此结束，感谢阅读。望多多关注我们，点赞、收藏、转发。
本文转载于（喜欢的盆友关注我们）：https://mp.weixin.qq.com/s/K0LjEs0F3KyY0wNuQ_MPzw
标签：注释,运维,color,语法,css,font,选择器,CSS 来源： https://www.cnblogs.com/ttropsstack/p/16548797.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。