【1】基础结介绍
（1）简介：层叠样式定义表
（2）作用：当浏览器读到一个样式表的时候 其会通过CSS样式表对网页进行格式化渲染
【2】CSS语法
（1）组成部分
（1）选择器
（2）声明
（1）属性
（2)属性值
/* P：选择器 括号:属性 以及属性值 */ p { color: antiquewhite; font-size: 14px; }
（2）CSS注释
/*单行注释*/ /*多行注释1 多行注释2*/
（1）外部样式引入
例如：
<!-- 引入外部CSS样式-->
<link rel="stylesheet" href="my_css.css">
PS：此种方式调用有点类似于调用第三方模块 此方式最为正规
（2）内部样式定义:
例如：
<head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部样式定义--> <style> p{color: blue} </style> </head>
（3）行内样式定义
例如：
<p style="color: aqua">迟迟钟鼓初长夜 耿耿星河欲曙天</p>
PS：此种方式最不推荐
【1】基本选择器:
（1）标签选择器:
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{color: blue} </style> </head> <body> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <div>上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> </body> </html>
PS：只有被选择的标签才会被相应的CSS渲染
（2）类选择器:
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 类的语法结构.加类名--> <style> .c1{color: blue} .p1{font-size: 20px} </style> </head> <body> <p class="p1">迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <!--一个标签中可以选择多个类--> <div class="c1 p1">上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> </body> </html>
（3）id选择器
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 类的语法结构.加类名--> <style> .c1{color: blue} .p1{font-size: 20px} /*id选择器*/ #d1{ font-size: medium; color: wheat} </style> </head> <body> <!--绑定上述选择器--> <p id="d1">迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <!--一个标签中可以选择多个类--> <div class="c1 p1">上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> </body> </html>
（4）通用选择器;
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 通用选择器--> <style> *{color: red} </style> </head> <body> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p> <div >上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> <div>上穷碧落下黄泉 两处茫茫皆不见</div> </body> </html>
PS：此种方式基本不会使用 因为其直接匹配整个网页代码 网页太过于单调
原文：https://www.cnblogs.com/SR-Program/p/11459424.html
