（1）CSS概述：
层叠样式表(Cascading Style Sheets)，是一种样式表语言，用来描述HTML文档的呈现（美化内容）。
（2）代码格式：
<style>
选择器{
CSS属性
}
</style>
（3）CSS引用方式：
- 内部样式表：CSS代码写在style标签里面。
- 外部样式表：CSS代码写在单独的CSS文件中(.css) ；在HTML使用link标签引入，格式如下。
<link rel = "stylesheet" href = "./my.css">- 内行样式：配合JavaScript使用；CSS写在标签的style属性值里。
<div style="color:red;font-size:20px;">这是div标签</div>（4）基本选择器（格式使用外部选择器）：
- 标签选择器
<style>
标签名 {
CSS属性
}
</style>
- 类选择器
<style>
/* 1.定义类选择器——>.类名 */
.red {
color: red;
}
</style>
<!-- 2.使用类选择器——>标签里添加class="类名" -->
<div class="red">这是div标签</div>
<!--注意：
1.类名自定义（见名知意），不要使用纯数字或中文，尽量使用英文命名；
2.定义类选择器可以供多个标签使用；
3.一个标签可以使用多个类名，类名之间要用空格隔开；
-->- id选择器
<style>
/* 1.定义id选择器——>#id名 */
#red {
color: red;
}
</style>
<!-- 2.使用id选择器——>标签里添加id="id名" -->
<div id="red">这是div标签</div>
<!-- 注意：同一个id选择器在一个页面只能使用一次 -->
- 通配符选择器
<!-- 通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式 -->
<style>
* {
color: #000;
}
</style>
（5）文字控制属性：
| 描述 | 属性 | 说明补充 |
| 字体大小(字号) | font-size | PC端常用单位px，谷歌浏览器默认字号16px |
| 字体粗细 | font-weight | 属性值——正常：400/normal 加粗：700/bold |
| 字体倾斜 | font-style | 属性值——正常(不倾斜)：normal 倾斜：italic |
| 行高 | line-height | 属性值——数字+px 数字(当前标签font-size属性值的倍数) 行高由上间距，文本高度和下间距组成。 |
| 字体族 | font-family | 属性值——字体名1,字体名2...，字体族名（可只写一个字体名） font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; |
| 字体复合属性 | font | 是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写，字号和字体值必须书写，否则font属性不生效） |
| 文本缩进 | text-index | 属性值——数字+px 数字+em(1em=1个字号大小) |
| 文本对齐 | text-align | 控制文本水平对齐，属性值——左对齐：left 居中对齐：center 右对齐：right |
| 修饰线 | text-decoration | 属性值——无：none 下划线：underline 删除线：line-through 上划线：overline |
- color 文字颜色
| 颜色表示方法 | 属性值 | 说明 |
| 颜色关键字 | 颜色英文单词 | red，green，blue... |
| rgb表示法 | rgb(r,g,b) | r,g,b表示红绿蓝三原色，取值0-255 |
| rgba表示法 | rgba(r,g,b,a) | a表示透明度，取值：0-1 |
| 十六进制表示法 | #RRGGBB | #000000，#ffcc00，简写：#333，#fc0 |
（6）复合选择器
- 后代选择器
1.选中某元素的后代元素
2.写法：（父子选择器用空格隔开）
父选择器 子选择器{CSS属性}，
- 子代选择器
1.选中某元素的子代元素（最近的子级）
2.写法：（父子选择器用>隔开）
父选择器 > 子选择器{CSS属性}
- 并集选择器
1.选中多组标签设置相同的样式
2.写法：（选择器之间用，隔开）
选择器1，选择器2，...，选择器N {CSS属性}
- 交集选择器
1.选中同时满足多个条件的元素
2.写法：（选择器之间连写，没有任何东西隔开）
选择器1选择器2{CSS属性}
3.注意：如果交集选择器中含有标签选择器，标签选择器必须写在最前面。
- 伪类选择器
1. 伪类表示元素状态，选中元素的某个状态设置样式。
2.鼠标悬停状态：选择器:hover{CSS属性}
超链接伪类：
- 如果要给超链接设置以下四种状态，需要按LVHA的顺序书写。
| 选择器 | 作用 |
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
（7）CSS特性：
- 继承性
- 子级默认继承父级的文字控制属性；
- 注意：如果标签有默认文字样式会继承失败，例如：a标签的颜色，标题的字体大小。
- 层叠性
- 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性；
- 不同的属性会叠加：不同的CSS属性都会生效；
- 注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断；
- 优先级
- 基础选择器：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important （选中标签的范围越大，优先级越低）。
- 复合选择器：叠加计算，计算公式:(行内样式，id选择器个数，类选择器个数，标签选择器个数)
- 规则
- 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
- !important 权重最高
- 继承权重最低
（8）背景属性
| 描述 | 属性 | 属性值 |
| 背景色(bgc) | background-color | |
| 背景图(bgi) | background-image | url(背景图路径)，背景图默认有平铺(复制)效果 |
| 背景图平铺方式(bgr) | background-repeat | no-repeat:不平铺 repeat:平铺(默认效果) repeat-x:水平反向平铺 repeat-y:垂直方向平铺 |
| 背景图位置(bgp) | background-position | 水平方向位置 垂直方向位置
|
| 背景图缩放(bgz) | background-size |
|
| 背景图固定(bga) | background-attachment | fixed 背景不会随着元素的内容滚动 |
| 背景复合类型 | background | 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序） |
（9）显示模式
- 块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
- 行内元素
- 一行可显示多个(不换行)
- 宽高尺寸由内容撑开
- 添加宽高属性不生效
- 行内块元素
- 一行可以显示多个
- 宽高尺寸可以由内容撑开
- 添加宽高属性生效
转换显示模式
属性值：
block——块级
inline-block——行内块
inline——行内