1. CSS-----层叠样式表
设置样式的三种方式：
1. 直接在标签内写style属性设置该标签的样式（又叫内联标签）
2. 在head标签中写style标签设置body标签中子标签的样式；
3.把样式直接写在一个css文件中 直接在html文件的head标签的link子标签通过href属性关联css文件中写好的样式；
2. CSS注释 /**/
3. 选择器（其实就是对哪一个标签使用样式 这个标签就是选择器）
3.1 基本选择器
3.1.1 标签选择器（其实就是直接标签名 写样式即可一般用于该类标签的通用样式设置）
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p>我是一个p标签</p> <div>我是一个div标签</div> </body> </html>
p{ color:red;font-size:18px } div{ color:green; font-size:20px }
运行结果：
3.1.2 ID选择器（为特定的选择器设置特定的样式--因为每一个标签都有一个唯一标识的id属性）
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p id="p0">我这个p标签没有ID选择器所以使用标签选择器的样式</p> <p id="p1">我是一个p标签</p> <p id="p2">我也是一个p标签</p> </body> </html>
p{ color:red;font-size:18px } #p1{ color:green;font-size:18px } /*ID选择器 用标签的ID号*/ #p2{ color:black;font-size:20px }
运行结果：
3.1.3 类选择器（一个标签使用了哪些样式的类 可以使用多个类）
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p class="c1 c2">我是一个p标签 我使用了2个类选择器样式</p> <p>我只是一个普通的标签选择器</p> </body> </html>
p{ color:red;font-size:18px } .c1{ color:hotpink; } .c2{ font-size:40px
运行结果：
3.2 通用选择器(*{color:red})
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p class="c1 c2">我是一个p标签 我使用了2个类选择器样式</p> <p>我只是一个普通的标签选择器</p> <div>我是一个div标签</div> </body> </html>
.c1{ color:hotpink; } .c2{ font-size:40px } *{ color:blue; }
3.3 组合选择器
3.3.1 后代选择器
p{ color:blue; } #d1 p{ color:red; } /*中间空格 是后台选择器，div标签中的所有后代标签都设置为红色*/
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <div id="d1"> <p>我是嵌套在div标签中的p标签</p> <div id="d2"> <p>我是嵌套在div标签的div标签中的p标签</p> </div> </div> </body> </html>
运行结果：
3.3.2 儿子选择器
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <div id="d1"> <p>我是嵌套在div标签中的p标签</p> <div id="d2"> <p>我是嵌套在div标签的div标签中的p标签</p> </div> </div> </body> </html>
p{ color:blue; } #d1>p{ color:red; } /*中间>是儿子选择器，仅仅div标签中的儿子标签设置为红色*/
运行结果：
3.3.3 毗邻选择器
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <div id="d1"> <p>我是嵌套在div标签中的p标签</p> <div id="d2"> <p>我是嵌套在div标签的div标签中的p标签</p> </div> </div> <hr> <!--水平线--> <div id="d3"> 我是一个div标签 </div> <p>我是跟d3标签同级的p标签</p> </body> </html>
p{ color:blue; } #d3+p{ color:red; } /*中间+是毗邻选择器，div标签后面相邻的标签设置为红色*/
运行结果：
3.3.4 弟弟选择器
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p>我是在div标签上面的p标签，我不会使用弟弟选择器的样式</p> <div id="d1"> 我是一个div标签 </div> <p>我是跟d1标签同级的p标签</p> <p>我也是跟d1标签同级的p标签</p> </body> </html>
p{ color:blue; } #d1~p{ color:red; } /*中间~是弟弟选择器，div标签后面同级的所有标签设置为红色*/
运行结果：
3.4 属性选择器（就是某一类标签有可能都有某个属性 可以根据属性设置标签样式）
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p>我只是一个普通的p标签</p> <p class="cc1">我是一个p标签(我的属性是cc1)</p> <p class="cc2">我是一个p标签（我的属性是cc2）</p> <p class="cc2">我是一个p标签（我的属性是cc2)</p> </body> </html>
p{ color:red; } p[class="cc1"]{ color:green; } p[class="cc2"]{ color:blue; }
运行结果：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p xx="xuanxuan">我是一个p标签</p> <p xx="xixi">我也是一个p标签</p> <p cc="haha">我还是一个p标签</p> <p>我又是一个p标签</p> </body> </html>
p{ color:lightpink; } [xx^="x"]{ color:green; } /*标签内有xx属性的 且以x开头的颜色设置为green*/ [xx$="a"]{ color:red; }
运行结果：
3.5 分组和嵌套
分组就是多个标签可以使用同一组样式（而类选择器是一个标签可以使用多个类选择器的样式）；
嵌套其实就是上面的组合选择器（后代选择器，儿子选择器，毗邻选择器，弟弟选择器）
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <link rel="stylesheet" href="index.css"> <!--样式来自于index.css文件--> </head> <body> <p>我只是一个普通的p标签</p> <div>我是一个普通的div标签</div> </body> </html>
p,div{ color:red; } /*两个标签都是用这个样式*/
运行结果：
3.6 选择器的优先级
找到一个标签有很多很多选择器可以使用样式；
用标签选择器可以找到一个标签，给它包裹一种样式 使用ID选择器又可以为同一种标签包裹另一种样式 那浏览器在渲染页面时 应该用哪一种去呈现呢？这就涉及到选择器的优先级
1. 内联样式（直接在标签内借助style属性写的样式）优先级最高；
2. 选择器相同时（比如都是标签选择器，或者都是ID选择器）谁靠近标签 谁生效；
3.选择器不一致时按照下面的优先级顺序：
内联样式（1000）> ID选择器（100）>类选择器（10）>标签（元素）选择器（1）
权重计算永不进位（也就是只要出现ID选择器，优先级低的无论出现多少次 都是使用ID选择器的样式）