写在开篇
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;
}成果如下图：
写在最初
本次分享的到此结束，感激浏览。望多多关注咱们，点赞、珍藏、转发。
发表回复