文本
| 属性 | 描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本书写的方向 |
| letter-spacing | 字符间距 |
| word-spacing | 英文单词间距 |
| white-space | 空白文本、文本换行处理方式 |
| line-height | 文本行高 |
| vertical-align | a |
| text-align | 文本水平排版 |
| text-indent | 文本首行缩进 |
| text-decoration | 文本的修饰线条 |
| text-shadow | 文本阴影 |
| text-transform | 文本英文单词字母大小写 |
下面只解释一些不好理解的属性。
direction
用来设置文本的方向，取值如下：
ltr，默认值，从左往右rtl，从右往左
这个属性一般搭配 unicode-bidi: bidi-override; 一起使用：
* {
direction: rtl;
unicode-bidi: bidi-override;
}
当我们设置了上面的属性后，在块级元素内添加「文本节点」或者「内联元素」，都会从右往左排列。比如对于 input 输入框，它的光标会在右边闪动，我们输入文本时也会从右到左新增文本节点。
letter-spacing 与 word-spacing
letter 可以理解为字符，word 可以理解为英文单词：
letter-spacing用来设置文本中每一个字符之间的间距word-spacing用来设置文本中每一个英文单词的间距，这个不能设置中文汉字的间距
它们的取值相同：
normal，默认值，字符之间默认没有额外空间，单词之间具有标准间距length，长度值，一般取像素，可以是负数
white-space
用来处理文本节点的「空白文本」和「文本换行」，取值如下：
normal，默认值，元素中的多余空白文本会被忽略，并且文本内容超出父元素宽度时会自动换行nowrap，让文本不会自动换行pre，让元素内的文本处理方式类似<pre>标签，即空白字符会保留，不会自动换行pre-wrap，保留空白字符，且会自动换行pre-line，忽略多余「空格」类型的字符，保留换行符，可以自动换行
Tip：
这里的「空白字符」，主要区分为「空格」和「换行符」。
line-height
用于设置每一行文本的行高，取值如下：
normal，默认值，标准的文本行高number，行高 = 字体大小 * numberlength，设置固定行高%，行高 = 字体大小 * 百分数
让一行文本垂直居中于父元素，可以设置父元素的文本行高 line-height 等于其元素高度，或者元素高度为 auto。
vertical-align (困惑)
用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式，非继承属性。
text-align
指定元素内文本的对齐方式，取值如下：
- 默认值由
direction决定，如果是ltr则默认值为left，反之为right left，文本左对齐right，文本右对齐center，文本居中对齐justify，文本两端对齐
这里需要注意 justify 这个取值，文本两端对齐的意思是非空字符两端对齐，并且需要满足文本沾满一整行的条件，如果文本没有沾满一整行，那么 justify 对该行文本并不会起作用。如果对于单行没有沾满一整行的文本，我们想让它两端对齐，对于表单的 label 标签字段来说很常见的需求，我们可以这么做：
.text-align-justify {
text-align: justify;
overflow: hidden;
// 使用伪元素帮助文本占满其下方一整行，但是高度设置为0
&::after {
content: "";
display: inline-block;
width: 100%;
}
}
text-indent
设置文本首行缩进，取值如下：
length，设置固定缩进，可以是任何单位，默认值为 0- %，基于父元素宽度的百分比的缩进
text-decoration
text-decoration: none | [<line> <style>? <color>?];
规定添加到文本的修饰，下划线、上划线、删除线等，它是以下属性的缩写：
text-decoration-line，取值如下：none，默认值，文本没有线条修饰underline，文本下方出现一条线overline，文本上方出现一条线line-through，文本中间出现一条线
text-decoration-style，取值如下：solid，默认为实线double，双实线dotted，点状线dashed，虚线wavy，波浪线
text-decoration-color，设置修饰线的颜色
text-decoration: underline wavy red;
对于 a 标签来说就有一个默认的 text-decoration: underline solid blue。
text-shadow
用于设置文本阴影，如果具有修饰线，那么修饰线也会具有阴影，语法如下：
text-shadow: none | [<x-shadow> <y-shadow> <blur>? <color>?];
x-shadow，水平阴影偏移量，允许为负值
y-shadow，垂直阴影偏移量，允许为负值
blur，模糊距离，可以理解为阴影在 z 轴上离文本有多远，越远阴影越模糊
color，阴影的颜色
color: white;
text-shadow: 2px 2px 4px #000000;
text-transform
规定文本中每个单词的字母大小写规则：
none，默认值capitalize，所有单词首字母大写uppercase，所有单词所有字母都大写lowercase，所有单词字母小写