文本樣式主要涉及多個字符的排版效果。
一、定義文本水平對齊
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：表示由浮點數和單位標識符組成的長度值或者百分數，可為負數，定義由基線算起的偏移量；
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;