一、css简介
css 层叠样式表：网页是一个多层的结构，css可以给每一层结构做样式，最终你看到的是最上面一层
二、css书写位置
第一种方式：内联样式/行内样式
书写位置：开始标签，style属性，将css样式写在style属性值里面
可以写多个样式，只要用分隔号；隔开即可
优缺点：
优点：有针对性
缺点：1、结构和表现耦合了
2、修改起来不方便
注意：不推荐使用
第二种方式：内部样式表
书写位置：head标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式，可以写多组样式，样式之间用；隔开,
优缺点：
缺点：复用率不高
注意：css比较多的时候，不推荐使用
第三种方式：外部样式表
书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中
对应的html结构，在花括号里面书写css样式, 然后在head标签内写一个link标签将对应的css文件引入到html文件内
<link rel="stylesheet" href="./02.css书写位置.css">注意：推荐使用
三、css语法
选择器 声明块
选择器：有多种选择器
声明块：具体的css样式，是写在花括号里面
样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开
四、css选择器
css常用选择器
1、元素选择器（标签选择器）
作用：选中对应标签的内容
语法：标签名{css样式····}
例子：h1{}，h3{},p{}
h1{
color: red;
}2、id选择器
作用：选中对应id属性值的内容
语法：#id属性值{}
例子：#p1{},#p2{}····
注意：id属性值不能重复使用
#p1{
color: green;
}
<p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>3、class选择器
class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用
作用：选中对应class属性值的内容
语法：.class属性值{}
注意：class属性值可以起多个，中间用空格隔开即开
例子：.s1{},.ss{},.pp{}
.s1{
color: orange;
}
<p class="s1">无边落木萧萧下，不尽长江滚滚来。</p>4、通配选择器
作用：选中所有的标签，进行设置
语法：*{}
*{
font-size: 24px;
}css符合选择器
1、交集选择器
作用：选中同时符合多个条件的内容
语法：选择器1选择器2选择器3····{}
注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面
例子：p#p1.pp{},div.ss{}
div.red {
font-size: 34px;
}2、并集选择器（群组选择器）
作用：同时选中对应的内容
语法：选择器1,选择器2,选择器3····{}
例子：.red,#red1,div,p{}
h1,h3{
color: orange;
}css关系选择器
1、子元素选择器
作用：通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
例子：#red>.green{}, .pp>em{}
div>h2{
color: red;
}2、后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
例子：.class .red{},#red p{}
#cs span{
font-size: 30px;
}3、下一个兄弟选择器
作用：通过指定的兄长找到紧挨着我的一个兄弟
语法：兄+弟{}
.p1+span{
background-color: pink;
}4、选择下面所有的兄弟(前面的不选)
作用：通过指定的兄长找到下面所有的兄弟
语法：兄～弟{}
例子：#red～.p1{}
.p1~span{
color: orange;
}css属性选择器
属性选择器
通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素