文本样式主要涉及多个字符的排版效果。
一、定义文本水平对齐
text-align 属性来定义文本的水平对齐方式。
语法：
text-align: left | right | center | justify
- left 表示默认值，左对齐；
- right 表示右对齐；
- center 表示居中对齐；
- justify 表示两端对齐；
Tips: CSS3 新增了 4 个属性：start | end | match-parent | justify-all ，由于浏览器支持不是很好，暂不介绍，可以去 W3C 官网上进行了解和学习。
二、定义文本垂直对齐
使用 vertical-align 属性设置或检索对象内容的垂直对其方式。
语法：
vertical-align: auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
- auto：根据 layout-flow 属性的值对齐对象内容；
- baseline：表示默认值，表示将支持 valign 特性的对象内容与基线对齐；
- sub：表示垂直对齐文本的下标；
- super：表示垂直对齐文本的上标；
- top：表示将支持 valign 特性的对象的内容对象顶端对齐；
- text-top：表示将支持 valign 特性的对象的文本与对象顶端对齐；
- middle：表示将支持 valign 特性的对象的内容对象中部对齐；
- bottom：表示将支持 valign 特性的对象的内容对象底端对齐；
- text-bottom：表示将支持 valign 特性的对象的文本与对象顶端对齐；
- length：表示由浮点数和单位标识符组成的长度值或者百分数，可为负数，定义由基线算起的偏移量；
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
1、图片、表单和文字对齐
可以通过 vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
2、去除图片底侧空白缝隙
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决方法 a:(推荐使用)
给 img vertical-align:middle | top 等等。 让图片不要和基线对齐。
解决方法 b:
给 img 添加 display：block; 转换为块级元素就不会存在问题了。
三、定义行高
行高也称为行距，是段落文本行与行之间的距离。使用 line-height 属性定义行高。
语法：
line-height: normal | length
- normal：表示默认值，一般为 1.2em；
- length：表示百分比数字，也可以为单位标识符组成的长度值；常用的属性值单位有三种，分别为像素 px，相对值 em 和百分比%，使用最多的是像素 px；
四、定义字距和词距
1、字距
使用 letter-spacing 属性定义字距，所谓字间距就是字符与字符之间的空白，取值为长度值，由浮点数字和单位标识符组成，默认为 normal，表示默认间隔。
语法：
letter-spacing: 2em;
2、词距 (对中文无效)
word-spacing 属性用于定义英文单词之间的间距，对中文字符无效。和 letter-spacing 一样，其属性值可为不同单位的数值，允许使用负值，默认为 normal。
word-spacing 和 letter-spacing 均可对英文进行设置。不同的是 letter-spacing 定义的为字母之间的间距，而 word-spacing 定义的为英文单词之间的间距。
语法：
word-spacing:2em;
五、定义缩进
text-indent 属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em 字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，, 建议使用 em 作为设置单位。
允许使用负值，使用复制，代表悬垂缩进。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度。
Demo：
text-indent: 2em;
