1. 字体属性
1.1 字体系列
CSS使用font-family属性定义文本的字体系列。
p {font-family: "微软雅黑";}
div {font-family: Arial,"Microsoft YaHei","微软雅黑";}
- 各种字体之间必须用英文逗号隔开。
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号（单双都可）。
- 尽量使用系统默认自带的字体，保证任何用户的浏览器都能正确的显示。
1.2 字体大小
CSS使用font-size属性定义字体大小。
p {font-size: 20px;}
- px（像素）大小是网页最常用的单位。
- 谷歌浏览器默认的文字大小是16px；
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
- 可以给body指定整个页面文字的大小。
1.3 字体粗细
CSS使用font-weight属性设置文本字体的粗细。
p {font-weight: bold;}
| 属性值 | 描述 |
|---|---|
normal | 默认值（不加粗的） |
bold | 定义粗体（加粗的） |
100-900 | 400等同于notmal，700等同于bold，注意数字后面不加单位 |
- 学会让加粗的标签（比如h和strong）不加粗。
- 实际开发中，更常用数字来表示加粗或变细。
1.4 文字样式
CSS使用font-style属性设置文本的风格。
p {
font-style: normal;
}
| 属性值 | 描述 |
|---|---|
normal | 默认值，浏览器显示标准的字体样式 |
italic | 浏览器会显示斜体的字体样式 |
平时我们很少给文字加倾斜，反而要给倾斜标签<em，i>改为不倾斜字体。
1.5 文字复合属性
将各种字体属性写在同一选择器下，节约代码。
body {
font：font-style font-weight font-size/line-height font-family;
}
- 使用font属性时，必须按上面的语法格式书写，不能更换顺序，并且各个属性用空格隔开。
- 不需要设置的属性可以省略（取默认值），但必须保留
font-size和font-family属性，否则font属性将不起作用。
1.6 字体属性总结
| 字体属性 | 表示 | 注意 |
|---|---|---|
| font-size | 字号 | 单位是 px |
| font-family | 字体 | 按照团队约定来写 |
| font-weight | 字体粗细 | 正常400=normal，加粗700=bold |
| font-style | 字体样式 | 倾斜是italic，正常的是normal，常用 normal |
| font | 属性连写 | 顺序不能变，字体和字号属性必须有 |
2. CSS文本属性
CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。
2.1 文本颜色
color 属性定义文本颜色。
div {
color: red;
}
| 表示颜色 | 属性值 |
|---|---|
| 预定义的颜色值 | red,green,pink |
| 十六进制 | #FF0000，#FF6600 |
| RGB 代码 | rgb(255,0,0) |
开发最常用十六进制。
2.2 对齐文本
text-align 属性用于设置元素文本内容的水平对齐方式。
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
2.3 装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
| 属性值 | 描述 |
|---|---|
| none | 默认，无装饰（最常用） |
| underline | 下划线，a 标签自带（常用） |
| overline | 上划线。（几乎不用） |
| line-through | 删除线。（不常用） |
2.4 文本缩进
text-indent定义段落首行缩进多少距离。
p {
text-indet: 20px;
}
em 是一个相对单位，就是当前元素（font-size）1个文字的大小，1em 就是一个字符所占大小。当 text-indent=2em，则恰好缩进两个文字。
2.5 行间距
line-height 设置行间的距离（行高），可以控制文本行与行之间的距离。行间距=上间距+文本高度+下间距
p {
text-height: 26px;
}
2.6 文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 通常十六进制缩写 |
| text-align | 文本对齐 | 设置对齐方式 |
| text-indent | 文本缩进 | 记住 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住下划线underline和取消下划线none |
| line-height | 行高 | 控制行与行之间的距离 |
3. CSS的引入方式
按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
3.1 内部样式表
将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。
<style>理论上可以放在 HTML 文档中任何一个地方，一般放在<head>标签中。- 方便控制整个页面中的元素样式，但没有实现结构与样式完全分离。
- 使用内部样式表设定CSS，也称嵌入式引入，这种练习方式是我们练习时常用。
3.2 行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。
<div style="color: red; font-size: 12px">行内样式表</div>
- style其实是标签的属性。
- 在双引号中间，写法符合CSS规范。
- 可以控制当前的标签设置样式。
- 书写繁琐，不推荐大量使用。
- 使用行内样式表设定CSS，也称行内式引入。
3.3 外部样式表
实际开发中都是外部样式表，适用于样式比较多的情况。
核心：样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中。
引入外部文件分两步：
- 新建后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
- 在HTML页面中，使用
<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径" />
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
- 使用外部样式表设定CSS，通常被称为外链式或链接式引入，这种是开发中常用的方式。
3.4 CSS引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便 ，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构与样式相分离 | 需要引入 | 最多，吐血推荐 | 控制多个页面 |
