一、CSS介绍
层叠样式表，美化网页，做到结构（html）和表现（css）分离。
基本语法：
选择器{
属性：属性值；
}
二、CSS四种引用方式
1、行间样式(嵌入式样式)
<!-- 1、行间样式 --><div style="color:red;width:100px;">行间样式</div><div>行间样式</div>2、内部样式表
<head><meta charset="UTF-8"><title>css引用方式</title><!-- 2、 内部样式表--><style type="text/css">p{background-color: red;}</style></head>
<body><p>内部样式表</p>
</body>3、引入外部样式文件
新建一个style.css文件，用link标签引入此文件。
<!-- 3、导入外部样式 --><!-- link:css + tab --><link rel="stylesheet" href="style.css">4、导入外部样式
新建一个test.css文件，再用import导入此文件。
@import"css/test.css"区别：
行间样式只作用于当前标签
内部样式作用于当前文件
外部样式被多个html文件引用
外部样式分为link和import两种，区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；而@import只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link无兼容问题；@import低版本浏览器不支持。
- link支持使用javascript控制DOM去改变样式；@import不支持。
三、CSS选择器
1、*：
通配符，匹配html所有元素。
性能差，不建议使用。
2、标签选择器
匹配对应的标签。
3、类选择器
选择class命名的标签
class="类名"
.类名{
}
4、id选择器
选择用id命名的标签
id=”id名“
#id名{
}
5、派生选择器
根据上下文确定选择的标签
6、伪类选择器
伪类：专门用来表示元素的一种特殊状态。
常用伪类选择器：
1、a标签的伪类：
：link 未访问（可省略）
：visited 已访问
：hover 鼠标悬停
：active 用户激活
2、表单
：focus 获得焦点
3、：first-chlid
：last-chlid
：nth-chlid（number）
7、属性选择器
[属性名]：包含有指定属性名的元素。（常用）
[属性名=值]：属性名的值为指定值的元素。（常用）
8、关系选择器
- 后代选择器：空格
- > 只选择儿子
- + 兄弟选择器
9、CSS伪元素
CSS伪类与伪元素区别：
css引入伪类和伪元素是为了格式化文档树以外的信息。用来修饰不在文档树中的部分。
伪类：当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它只有处于dom树无法描述的状态下才能为元素添加样式，所以称为伪类。
伪元素：创建一些不在文档树中的元素，并为其添加样式。
伪类与伪元素特点：
- 伪元素和伪类都不会出现在源文档或者文档树中。
- 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面。
- 伪元素名和伪类名都是大小写不敏感。
- 有些伪类是互斥的，而其他的可以同时用在一个元素上。
:before :after :first-letter :first-line 前面可以是一个冒号也可以是双冒号
::selection ::placeholder ::backdrop 前面只能是双冒号
选择器的分组：
让多个元素具有相同的样式，设置公共样式。
选择器的样式继承：
子元素可以继承父元素的样式。
四、优先级与权重的计算
内联样式>内部样式>外部样式
权重的计算：
- ！important：加在样式属性值后面，权重值为10000；
- 内联样式：style=" ",权重值为1000；
- ID选择器：#id名，权重为100；
- 类、伪类：.类名或者：hover权重值为10；
- 标签选择器：权重值为1。
五、CSS字体
1、font-size:字号
属性值：像素px或者%
2、font-family：字体
3 font-style：文字样式
- normal：正常字体
- italic：斜体
- oblique：倾斜的字体
4 font-weight：文字加粗
- normal：正常字体
- bold：粗体
- bolder：比bold粗
- lighter：比normal细
- 100-900：定义由粗到细的字符。400等于normal；700等于bold。一般是整数、100的倍数。
5 line-height：行高
文字底端到上一行文字底端。
px/数字/em等
6 color：文字颜色
- 颜色单词
- rgb（ red，green，blue） ：0-255
- 16进制 （以#开头）
7 text-decoration：文字修饰
- none：无修饰
- underline：下划线
- overline：贯穿线
- line-through：上划线
8 text-align：文本对齐方式
- left
- right
- center
9 text-transform：字母大小写
- caplitalize：将每个单词的首字母转换成大写。
- uppercase：转换成大写
- lowercase：转换成小写
- none：默认值
10 text-indent：文本缩进
px/%/pt/em等
font复合属性：
font：font-style font-variant font-weight font-size/line-height font-family
注：
- 属性值位置顺序
- 除font-size和font-family外，其余属性值可省略。
- font-variant：normal/small-caps（让大写字母变小一些）
六、CSS背景
1 background-color：背景颜色
- transparent：默认值，透明背景色
- color：颜色
2 background-image：背景图
- none：默认值，无背景图
- url：使用绝对或相对url地址指定背景图像
3 background-repeat：背景图像铺排方式
- repeat：默认值，背景图像在纵向和横向平铺
- no-repeat：背景图像不平铺
- repeat-x：背景图像横向平铺
- repeat-y：背景图像纵向平铺
4 background-position：设置对象的背景图像位置
5 background-attachment：背景图像滚动位置
- scroll：默认值，背景图像会随着页面其余部分的滚动而滚动。
- fixed：当页面其余部分滚动时，背景图像不会移动。
6 background:设置背景复合写法