1. CSS CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.CSS语法 每个CSS样式由两个组成部分：选择器和样式。样式又包括属性和属性值。每个样式之后用分号结束。 选择器 {样式1;样式2} 或者 选择器 {属性1：值1 ; 属性2：值2} p { color:red ; font-size:18px } 3.CSS注释 /*这是注释*/ 4.CSS的3种引入方式 4.1 行内样式 <p style="color: red">Hello world.</p> 4.2 内部样式: 写在网页的<head></head>标签对的<style></style>标签对中 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{color: red} </style> </head> 4.3 外部样式 <link rel="stylesheet" href="mystyle.css" type="text/css"/> 5.CSS选择器：元素选择器、ID选择器、类选择器比较常用 5.1 基本选择器: 元素选择器、ID选择器、类选择器、通用选择器。 5.1.1 元素选择器 ：适用于 批量的统一默认的样式 html: <body> <p>迈腾2020</p> </body> css: p{color:red} 5.1.2 ID选择器: id与#对应，适用于 给特定标签设置特定样式 html: <body> <p id="i1">迈腾2020</p> </body> css: #i1{color:red} 5.1.3 类选择器： class与.对应 。可以多条语句都写c1。适用于 给某一些标签设置相同的样式 html: <body> <p class="c1">迈腾2020</p> <p class="c1">迈腾2019</p> <p class="c1">迈腾2018</p> </body> css: .c1{color:red} 或 p.c1{color:red} 5.1.4 通用选择器：所有标签都使用同样的样式。 css: *{color:red} 5.2 组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器。都是往下找，不会往上找。 5.2.1 后代选择器： html: <body> <div id="d1"> <p>p儿子</p> <span>span儿子</span> <div> <p>p孙子</p> <span>span孙子</span> </div> </div> </body> css: #d1 p{color:red} 所有id为d1的p标签都是相同的样式:p儿子和p孙子都是红色。注意#d1和p中间是空格。 5.2.2 儿子选择器： html: <body> <div id="d1"> <p>p儿子</p> <span>span儿子</span> <div> <p>p孙子</p> <span>span孙子</span> </div> </div> </body> css: #d1 > p{color:red} id为d1的p儿子是红色，而p孙子默认黑色。注意#d1和p中间是>。 5.2.3 毗邻选择器：div和p必须是同级。上面的p孙子和p儿子不同级。 html: <body> <div>111</div> <p>222</p> <p>333</p> </body> css: div + p {color:red}。222变红色，而111和333还是默认黑色。注意div和p中间是+。 5.2.4 弟弟选择器：div和下面的两个p必须是同级。div是两个p的哥哥。 html: <body> <div>111</div> <p>222</p> <p>333</p> </body> css: div ~ p {color:red}。222和333都变红色，而111还是默认黑色。注意div和p中间是~。 5.3 属性选择器：sdf为自定义属性，也可以是其他属性，[]中括号是属性的意思。 html: <body> <p sdf="good">poor</p> <p sdf="1">smart</p> <p sdf="2">desire</p> <p sdf="3">focus</p> </body> css: [sdf]{color:red} 属性为sdf的样式都是红色。 css: [sdf = "good"]{color:red} 仅仅属性为sdf = "good"的样式是红色。 不怎么常用的属性选择器： /*找到所有title属性以hello开头的元素*/ [title^="hello"] {color: red;} /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow;} /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] {color: red;} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] {color: green;} 5.4 分组选择器： html: <body> <div>迈腾</div> <p>psdf</p> </body> css: div,p{color:red} 把div和p分到一组，设置相同的样式。注意div和p中间是逗号，。 html: <body> <div id="d1">迈腾</div> <p>psdf</p> </body> css: #d1,p{color:red} 把id为d1的标签和p分到一组，设置相同的样式。 5.5 嵌套选择器： html: <body> <div class="c1"> <p>111</p> <p>222</p> <span>333</span> </div> </body> css: .c1 p{color:red} 类c1内部所有p标签都设置红色，这也是后代选择器。 html: <body> <div id="i1"> <p>111</p> <p>222</p> <span>333</span> </div> </body> css: #i1 p{color:red} id为i1的标签内部所有p标签都设置红色，这也是后代选择器。 6. 样式文件优先级：内联样式--id选择器--类选择器--元素选择器 1. 内联样式(直接在标签里面写style) 优先级最高 2.选择器都一样的情况下,谁靠近标签谁就生效 3. 选择器不同时, 计算权重来判断,权重计算永不进位，意思是100个id选择器都比不上一个内联选择器的优先级高。
3.1 内联样式 1000
3.2 id选择器 100
3.3 类选择器 10
3.4 元素选择器 1 除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。 万不得已可以使用!important css: p{color:red !important}只有我生效。