CSS:层叠样式表（casecading style sheet），作用就是修饰HTML
样式------用来修饰结构
语法：
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
特点：
1、由两部分组成，选择器和声明部分，声明部分由属性和属性值组成
2、属性和属性值之间用冒号连接
3、属性和属性之间用分号分隔
4、最后一个属性值后面可以不写分号，但是建议最好写上
什么是选择器？
查找到页面元素的一种方法（方式）
{ }什么意思？
用来填写样式
css的使用
1、外部样式表（常用）
A、在css文件夹下创建css文件通过link标签引入外部样式表
<link rel="stylesheet" href="css/外部样式表.css">
B、<style>@import url（）</style>
区别：①本质不同：link是标签 @import是css提供的方法
②加载顺序：使用link标签引入的外部样式，浏览器解析页面的时候，同时加载HTML和CSS；
使用@import导入的外部样式，浏览器解析页面的时候，先渲染HTML，再解析CSS，可能会使页面出现几秒错乱效果
③兼容性：link标签无兼容问题，@import低版本浏览器不支持
④JS操作dom样式差别：用link标签引入的外部样式，JS可以进行更改标签样式；
使用@import导入的外部样式，JS不能更改样式。
2、内联样式表/行内样式表
<标签 style=”属性:属性值;属性:属性值;”></标签>
eg <div style=”wight:300px;height:300px;bacground:red;”></div>
弊端：当页面元素过多时，使用行内样式导致页面过于沉重，看起来凌乱
3、内部样式表
<head>
<style>
选择器{
属性:属性值;
属性:属性值;
属性:属性值;
}
</style>
</head>
优点：能够做到结构和表现的分离（但是没有做到完全分离），使页面看起来更加简洁。
弊端：当页面标签与css内容过多时，需要使用拖动滚动条来查找css，使用起来不方便。
4、样式表的优先级：（通常将引入的样式放在title下）
样式表的优先级遵循就近原则
！Important>行内样式>内部样式>外部样式
选择器：
1、标签选择器：以标签的名字当选择器
特点：
匹配范围广，无论嵌套层级多深都能匹配到
2、类选择器（class选择器）
语法：
HTML：
<div class="box"></div>
CSS:
.box{属性:属性值;属性:属性值;属性:属性值;}
特点：
a、不同标签可以共用一个类名
b、一个标签可以有多个类名，类名之间用空格隔开
3、id选择器：
语法：
HTML：
<div id="box"></div>
CSS:
#box{属性:属性值;属性:属性值;属性:属性值;}
特点：id名在单一页面是唯一的，取值只能出现一次
4、群组选择器：
语法：
HTML:
<div></div>
<p></p>
<h1></h1>
CSS:
div,p,h1{属性:属性值;属性:属性值;属性:属性值; }
多个选择器共用一组样式，以逗号把选择符组合在一起
5、关系选择器（后代选择器）：
a、子代选择器（父子关系选择器）
符号：>
b、后代选择器（类似爷孙关系的查找）
符号：空格
c、匹配到当前元素后面的兄弟元素（只能匹配到后面一个兄弟元素）
符号：+
d、匹配到当前元素后面的所有兄弟（指定）元素
符号：~
6、伪类选择器
语法 ：
①动态伪类选择器
:link{属性：属性值;}初始状态;
:visited{属性：属性值;}被访问后的状态;
:hover{属性：属性值;}鼠标悬停，即鼠标划过时的状态;
:active{属性：属性值;}鼠标按下时的状态;
注意：当这4个伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
:link, : visited, :hover, :active,错误的顺序有时会使样式失效；
只能找到当前元素里面的元素，不能向外找
②、结构伪类选择器
:first-child-----------匹配到子元素中的第一个元素
:last-child------------匹配到子元素中的最后一个元素
:nth-child(数值)---------匹配到子元素中具体第(数值)个元素
:nth-child(2n)---------匹配到子元素中第（偶数倍）的元素
:nth-child(even)-------匹配到子元素中第（偶数倍）的元素
:nth-child(2n+1)-------匹配到子元素中第（奇数倍）的元素
:nth-child(odd)--------匹配到子元素中第（奇数倍）的元素
③、否定伪类选择器
:not(选择器)--------起到排除作用，排除指定某一个/某一类元素
④、根目录伪类选择器
:root------------一个页面只有一个根目录，就是HTML
⑤、目标伪类选择器（主要应用在锚点效果）
:target
⑥、空内容伪类选择器
:empty-----------匹配到内容为空的元素（空格不算空）
⑦、UI状态伪类选择器（主要应用在表单元素上）
:enabled------------匹配到可用状态的表单元素(输入框、按钮)
:disabled------------匹配到禁用状态的表单元素
:focus-------------匹配到获取光标的表单元素
:checked---------匹配到被选中的表单元素
::selection----------------匹配到被选中的中文高亮（鼠标左键框选）
7、通配符选择器
符号：*
*{ margin:0;---------清除外边距
padding:0;--------清除内边距}
权重：!import>行内样式（1000）>id选择器（100）>类选择器(class选择器)（10）>标签选择器（1）>通配符（0）
后代选择器权重为权重之和，权重是可以进行叠加的
思考：不同页面使用相同样式如何使用？
将公共样式提取到public.css文件中，当公共样式使用，使用时只需link标签引入即可
思考问题：相同类型选择器修饰同一标签，哪一个生效？
结果：后面的选择器样式生效
原因：相同权重的选择器，后面的会覆盖前面的
8、属性选择器
[属性]------------匹配到具有该属性的元素
[属性="属性值"]--------匹配到具有该属性且具有此属性值的元素
E[属性]----------匹配具有该属性的E元素
E[属性="属性值"]------匹配到具有该属性且具有此属性值的E元素（上下值保持一致）
拓展：
[attr^="val"]-----匹配具有属性且属性值是以val开头的元素
[attr$="val"]------匹配具有属性且属性值是以value结尾的元素
[attr*="value"]-----匹配具有属性且属性值是中包含val的元素
[attr|="value"]-----匹配具有属性且属性值是val或者以“val-”开始的元素（比如说val-chen）