一.CSS文本样式
定义：CSS文本样式用于控制网页中文字的外观，包括字体、颜色、间距等，主要有两大类：字体样式 、文本布局 ；
tip: 文本是无法直接通过CSS来更改样式的，必须要用适合的标签来包裹它们 ，本质是修改标签样式，里面的文字跟随样式变化。
代码：
HTML:
html
<p>
修饰的文字
</p>CSS：
CSS
p {
color: pink;
} 二.CSS文本样式--字体样式
字体---font :给文字设置颜色 、大小 、粗体 、装饰等效果；
| 字体样式 | 说明 |
|---|---|
| color | 设置字体颜色 |
| font-family | 字体族 |
| font-size | 字体大小 |
| font-style | 字体风格 |
| font-weight | 字体粗体 |
| text-docoration | 字体装饰 |
1.字体颜色------color
Ⅰ.关键词（学习用）
说明：通常用于学习，在生产环境中一般不会使用，例如：red、green、blue、pink等。 => p(color: red)
Ⅱ.十六进制（最常用）
说明：在开发中最常用，例如：红色 #FF0000或者 #F00 => p(color: #F00)
Ⅲ.rgb格式（特殊情况使用）
说明：rgb() 函数接受三个参数，分别表示颜色的红、绿和蓝，比如：红色 rgb(255,0,0)。
例如：p { color: rgb(255,0,0) }
另有：rgba(255,0,0, 0.3) 文字透明最后一个数值取值 0~10完全透明 1 完全不透明
tip:十六进制和rgb格式的颜色表达都是在设计稿中复制，无需记住。
代码：
css
.color1 {
color: red; /*关键词*/
}
.color2 {
color: #22ff00; /*十六进制*/
}
.color3 {
color: rgb(211, 120, 217); /*rgb格式*/
}
.color4 {
color: rgba(255, 98, 0, 0.5); /*rgba格式*/
background-color: #8888ea;
}效果：
2.字体族------font-family
定义：给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体
代码：
css
body {
font-family: Arial, Helvetica, sans-serif;
}tip:属性值用逗号隔开，浏览器会选择列表中第一个该计算机上有安装的字体
3.字体大小------font-size
定义：顾名思义，就是更改字体的大小
代码：
css
p {
font-size: 18px;
}像素px:CSS 像素是CSS中用于定于长度、尺寸的单位（简写为px）是绝对单位
tip: 不同浏览器的默认字体大小不一样，谷歌默认16px，建议给body标签统一指定大小，做到浏览器统一。
4.字体风格------font-style
定义：font-style是用来打开和关闭文本italic（斜体）
| 属性值 | 说明 |
|---|---|
| normal | 将文本设置为普通字体 (将存在的斜体关闭) |
| italic | 如果当前字体的斜体版本可用，那么文本设置为斜体版本 |
代码：
css
p{
font-style: italic; /*设置斜体样式*/
}
em {
font-style: normal： /*让em取消斜体 常用*/
}5.字体粗体------font-weight
定义：设置字体粗体大小，一般用于给标题标签取消加粗，也可以利用CSS给部分大批量文字进行加粗。
| 属性值 | 说明 | 数字属性值（常用） | 说明 |
|---|---|---|---|
| normal | 正常粗细 | 400 | 正常粗细 |
| bold | 加粗 | 700 | 加粗 |
tip:属性值在其他值受到属性影响时基本不用，数字属性值的取值范围为100-900，常用的时400和700。
6.字体装饰------text-decoration
定义：设置/取消字体上的文本装饰，一般用在链接下划线（用来取消下划线） 和添加删除线（特殊）
| 属性值 | 作用 |
|---|---|
| none | 取消文本装饰 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 穿过文本的线 |
代码：
css
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.overline {
text-decoration: overline;
}
.none {
text-decoration: none;
}效果：
font 简写
------在一个声明中设置多个字体属性
适用：给整个页面设置相关字体样式；
语法：font: font-style font-weight font-size/line-height font-family;
代码：
css
p {
font: italic bold 16px/10px Arial;
}tip:1.font-size和**font-family*必须写；
2.其他可以省略，默认显示；
3.书写顺序不能改变；
字体样式------总结
三.CSS文本样式--文本布局
定义：作用于文本的对齐、缩进、间距等布局功能的属性
| 字体样式 | 说明 |
|---|---|
| text-align | 文本对齐 |
| text-indent | 首行缩进 |
| letter-spacing | 文本字符间距 |
| line-height | 行高 |
1.文本对齐------text-align
说明：控制文本在它所在的块级盒子内如何水平对齐
适用：1.文本/图片在 盒子水平对齐；
2.文章文字两端对齐 ；
| 属性值 | 作用 |
|---|---|
| left | 文本左对齐（默认） |
| right | 文本右对齐 |
| center | 文本水平居中对齐 |
| justify | 自动改变字间距，两端对齐 |
代码：
css
p {
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
}
2.首行缩进------text-indent
说明：设置块级元素中文本行前面空格**（缩进）**的长度
适用：
- 段落首行缩进2个字的效果；
- logo隐藏文字效果；
| 属性值 | 单位 |
|---|---|
| 数字 | em（相对单位） |
代码：
css
p {
text-indent: 2em;
}3.字间距------letter-spacing
说明：设置文本字 符的间距
适用：调整字与字之间距离；
代码：
css
p {
letter-spacing: 2px;
}4.行高------line-height
说明：设置每行之间的高
适用：
-
设置多行文本之间的上下间距
-
让单行文本垂直居中
代码：
css
p {
line-height: 25px;
line-height: 1.5;
}tip:如果数字不带单位（px）则为当前字体大小的倍数
文本布局------总结
