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}只有我生效。
浙公网安备 33010602011771号