什么是css
层叠样式表
层叠性：给同一个元素添加相同的css属性，属性值会存在覆盖问题。
css语法
格式：
选择器{
css属性1: 属性值; // 声明1
css属性2: 属性值; // 声明2
}
css注释
/* 我是css中的注释 */
/* css注释不能嵌套 */
/* 快捷方式：ctrl+? */
css的三种使用方式
内部样式
<style>
div{
color: red;
}
</style>
行内样式
<div style="width:200px;height:400px;background-color:green;">宽200高400背景绿色</div>
外部样式
- 新建一个文件，后缀叫.css，在这个文件中直接写样式（不需要加上style标签）
- 页面引用的时候用加上：
<link rel="stylesheet" href="外联样式的路径">
| 样式类型 | 作用范围 |
|---|---|
| 行内样式 | 只能作用在某一标签（用的比较少）(优先级更高) |
| 内部样式 | 只能作用于当前页面（页面的特定的样式） |
| 外部样式 | 可以作用任意页面（公共的样式） |
选择器
通配符选择器(*)
标签选择器
将标签名字作为选择器
类选择器
将.类名作为选择器
- [class]：给元素添加类名（小名）。命名规则：英文开头，包含数字、下划线、-，不要起关键字
- 效果：会将所有拥有相同类名的那些标签都加上相同的样式属性。
id选择器
将#id名作为选择器
- [id]：给元素添加id名（身份证,独一无二）。命名规则：英文开头，包含数字、下划线、-，不要起关键字
- 效果：会将所有拥有这个id名的标签加上该样式。
优先级：行内样式>id选择器>类选择器>标签选择器>通配符
组合选择器
并集（群组）选择器
- 将选择器用逗号隔开
- 作用：同时获取多个选择器
交集选择器
- 两者间没有空格
- 作用：获取同时符合交集选择器所有要求的选择器
- 注意：交集选择器中如果含标签名，那么标签名必须写在最前面
后代（包含）选择器
通过祖先 后代，找到后代来设置样式
子代选择器
通过父级>子级，找到子级来设置样式
相邻兄弟选择器
通过选择器+下一个兄弟，找到下一个兄弟来设置样式
伪类选择器
相当于给元素添加了一个类，这个类在特定情况下被触发
- :link 锚链接未被访问前，出现的样式
- :visited 锚链接被访问后，出现的样式
- :hover 鼠标悬停在元素上，出现的样式
- :active 鼠标点击元素，出现的样式
在使用时遵守这样的顺序：a:link ,a:visited,a:hover,a:active[记忆：lv-ha]
层叠的规则
- !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
权重（优先级的算法）
- 作用：多个选择器组合以后的优先级。
- 算法：（0，0，0，0）==》第一个0对应的是important（行内）的个数，第二个0对应的是id选择器 的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。
- 比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。
