一、@charset "字符编码形式"
作用：在 CSS 文件的最开始处使用这个指令可以告诉浏览器以 UTF-8 编码解释样式表。如果你使用这个指令，重要的是要确保你的 CSS 文件实际上是以 UTF-8 编码保存的
例如：
@charset "UTF-8";
@charset "iso-8859-15";
语法格式：
@charset "<charset>";
二、盒子模型
三、渐变背景设置
四、CSS应用方式
（1）内部样式
（2）行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
（3）外部样式
使用单独的
.CSS文件定义，然后在页面中使用link标签或@import指令引入
- 使用
link标签链接外部样式文件<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">提示：type属性可以省略
@import指令 导入外部样式文件<style> @import "CSS样式文件路径"; @import url(CSS样式文件路径); </style>
五、选择器
1.基础选择器
（1）标签选择器
（2）类选择器
使用自定义的名称，以
.号作为前缀，然后再通过HTML标签的class属性调用类选择器以标签的class属性作为样式应用的依据
注意事项：
- 调用时不能添加
.号- 同时调用多个类选择器时，以
空格分隔- 类选择器名称不能以
数字开头
（3）ID选择器
使用自定义名称，以
#作为前缀，然后通过HTML标签的id属性进行名称匹配以标签的id属性作为样式应用的依据，一对一的关系
2.复杂选择器
（1）复合选择器
- 标签选择器+类选择器
- 标签选择器+ID选择器
（2）组合选择器
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
（3）嵌套选择器
在某个选择器内部再设置选择器，通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注意：使用
空格时不区分父子还是后代，使用CSS3中新增的>时必须是父子关系才行
3.伪类选择器
根据不同的状态显示不同的样式，一般多用于标签
四种状态：
- ：link:未访问的链接
- ：visited：已访问的链接
- ：hover：鼠标悬浮在链接上，即移动在链接上
- ：active：选定的链接，被激活
注意：默认为：蓝色 下划线
4.伪元素选择器
- :first-letter 为第一个字符的样式
- :first-line 为第一行添加样式
- :before 在元素内容的最前面添加的内容，需要配合content属性使用
- :after 在元素内容的最后面添加的内容，需要配合content属性使用
5.选择器优先级
行内样式>ID选择器>类选择器>标签选择器
六、常见的CSS属性
1.字体属性
（1）font-size
取值：
- %百分比，相对父标签字体大小的百分比
- px像素
- em倍数，相对父标签字体大小的倍数
注意：HTML根元素默认字体大小为16px，也称为基础字体大小
（2） font-weight
取值：
- nomal普通（默认）
- bold粗体
- 自定义
（3）font-family
一般建议写3种字体：首选、其次、备用。以逗号隔开。
（4）font-style
取值：
- normal普通
- italic斜体
（5）font
简写属性：font:font-style|font-weight|font-size|font-family
2.文本属性
（1） color
取值：
- 颜色名称：使用英文名称
- 16进制的RGB值：#RRGGBB
- 注意：不区分大小写
- rgb函数：rgb(red,green,blue)
- 每种颜色的取值范围：[0,255]
- rgba函数：rgba(red,green,blue,alpha)
可以设置透明度；alpha取值范围：[0,1],0表示完全透明，1表示完全不透明
3.背景属性
（1）background-color
取值：transparent 透明
（2）background-image
- 必须使用url()方式指定图片的路径
- 如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件
（3）background-repeat
取值： repeat(默认)，repeat-x，repeat-y,no-repeat
（4）background-position
默认背景图显示在左上角
取值：
- 关键字：top、bottom、left、right、center
- 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向
（5）background-attachment
取值：scroll(默认)，fixed固定不动
（6）background
简写属性：
background:background-color|background-image|background-repeat|background-position
以空格隔开，书写顺序没有要求
4.列表属性
（1）list-style-type
取值：none、disc、circle、square、decimal
（2）list-style
简写属性：list-style:list-style-type|list-style-image|list-style-position
书写顺序没有要求
5.表格属性
border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
取值：separated（默认） collapse
七、盒子模型
盒子模型是网页布局的基础，将页面所有元素看作一个盒子，盒子都包含以下几个属性
- width 宽度
- height 高度
- border 边框
- padding 内边距
- margin 外边距