1 回顾
1.1 CSS 基本语法
1. HTML 和 CSS 的关系
CSS 样式作用在 HTML 元素上的
2. HTML 元素之间的关系
父元素 祖先元素 子元素 后代元素 兄弟元素
3. CSS 的基本语法结构
选择器： 用于选择到元素
声明块： 有个{}，内部由多条声明组成
声明： 由 css 属性名和值组成，每条声明后面有 ；
4. HTML 中使用 css 的三种方式
行内式
内联式
外链式
5. 三种长度单位
px
em
百分比
6. 三种颜色设置方式
颜色名
rgb()
十六进制
1.2 选择器
标签名选择器
ID名选择器
类名选择器
全局选择器
ID > 类 > 标签名 > 全局
2 盒子模型
CSS 会把 所有的 HTML 元素都当做盒子模型，所有的样式都是基于这样的一个盒子模型。
2.1 盒子模型显示特性
① 块级（block）元素
具有块级显示特性的元素称之为块级元素。
块级元素的特性：
- 独占一行，不会与任何元素或内容共用一行。
- 默认宽度根据父元素计算，默认高度被内容撑开； 可以通过 css 设置宽高。
② 行内（inline）元素
具有行内显示特性的与元素称之为行内元素。
行内元素的特性：
- 行内元素可以与其他行内元素或文本内容共用一行。
- 默认宽度和高度都是被内容撑开； 无法通过 css 设置宽高。
③ 行内块（inline-block）元素
具有行内块显示特性元素称之为行内块元素。
行内块元素的特性：
- 行内块元素可以与其他行内元素或行内块元素以及文本内容共用一行。
- 默认宽度和高度都是被内容撑开，可以通过 CSS 设置宽高。
注意：
盒子模型显示模式最早只分为行内元素和块级元素，区分条件也只有一条"是否独占一行"； 如果按照这种分类方式，行内块元素算作行内元素
2.2 HTML 元素的默认显示模式
① 行内元素
文本标签、a 和 label
em、strong、sup、sub、del、ins、a、label
② 块级元素
主体结构、格式排版标签、列表标签、表格包裹标签和行以及标题、form和option。
html、body 、h1 ~ h6、hr、br、p、pre、div、ul、ol、li、dl、dt、dd、table、tbody、thead、tfoot、tr、caption、form、option
③ 行内块元素
图片、单元格、表单控件、iframe。
img、td、th、input、textarea、select、button、iframe
2.3 设置元素的显示模式
通过 css 属性 display 可以修改元素的显示模式， display 的值可以设置为 block（块级）、inline（行内）、inline-block（行内块）。
2 常用 CSS 属性
2.1 字体属性
| css属性名 | 功能 | 属性值 |
|---|---|---|
| font-family | 设置字体族科 | 指定具体的字体名 或者指定字体分类（serif 和 sans-serif） 可以同时指定多个字体。 font-family: "黑体",“Microsoft YaHei”,sans-serif |
| font-size | 设置字体大小 | 指定长度。 一般元素里面文字默认 字体大小是 16px 设置字体大小，最小 12px。 |
| font-style | 设置字体风格 是否斜体 | normal： 正常，默认值。 italic： 设置为斜体，利用字体自带的斜体（推荐） oblique： 设置为斜体，强制变为斜体 |
| font-weight | 设置字体粗细 | normal： 正常，默认值 lighter： 细体 bold： 粗体 整百的数字： 300以及 以下是细体，400、500是正常、600以及以上是粗体。 |
| font | 设置字体的复合属性 | 可以把所有紫属性的值设置给 font，多个值用空格隔开 最少指定两个值，字体大小和字体族科,且按照顺序。 字体粗细、字体风格写在字体大小的前面，粗细、风格不作顺序要求。 font:[weight, style] siie family |
2.2 文字颜色
| css 属性名 | 功能 | 属性值 |
|---|---|---|
| color | 设置文字的颜色 | 颜色 |
2.3 文本属性
| css 属性名 | 功能 | 属性值 |
|---|---|---|
| letter-spacing | 设置字母或汉字之间的间距 | 长度 |
| word-spacing | 设置单词之间的间距（对汉字无效） | 长度 |
| text-decoration | 文本修饰。 超链接默认自带下划线 可以使用 text-decoration: none 去掉下划线。 | none： 不修饰，默认值。 underline： 添加下划线。 overline： 添加上划线。 line-throuth： 添加删除线 |
| text-align | 设置文本水平对齐方式 在所在元素中 | left： 左对齐，默认值。 right： 右对齐。 **center：**居中对齐。 |
| line-height | 设置行高。 两行文字，中线之间的距离就是行高。 如果只有一行文字，设置行高与元素高度一致，可以让文字在元素中垂直居中。 文本内容设置了行高影响内容的高度。 | 长度 |
| vertical-align | 设置文字沿着 基线、中线、底线、顶线对齐。 行内元素、行内块元素可以与文字显示在一行，给行内或行内块元素设置 vertical-align 属性，控制该元素与文本的对齐方式。 | baseline：基于基线对齐，默认值 top: 基于顶线对齐 bottom: 基于底线对齐 middle: 基于中线对象 长度作为值 |
| text-indent | 设置首行缩进 | 长度 段落建议设置为 2em |
2.4 背景属性
| css 属性名 | 功能 | 属性值 |
|---|---|---|
| background-color | 设置背景颜色 | 颜色 元素的默认背景颜色是 transparent |
| background-image | 背景图片 | url(图片的地址) |
| background-repeat | 背景图片重复 | repeat：重复，铺满整个元素，默认值。 repeat-x：只在水平方向重复。 repeat-y：只在垂直方向重复。 no-repeat：不重复。 |
| background-position | 背景图片定位 | 通过关键字设置位置： 写两个值，用空格隔开 水平：left、center、right 垂直: top、center、bottom 如果只写一个值，另一个方向的值取 center 通过长度指定坐标位置： 以元素左上角作为坐标原点，设置图片左上角的坐标。 两个值，分别是 x 坐标和 y 坐标，指定长度。 如果只写一个值，会被当做 x 坐标，y 坐标取 center |
| background-attachment | 背景图片固定 | scroll：随元素滚动，默认值。 fixed：固定在视口上。 |
| background | 复合属性 | 没有数量和顺序要求 |
注意：
如果复合属性写在子属性的后面，会覆盖子属性值的设置！
