目標

• 標線樣式
• 大小寫轉換
• 首行縮進
• 文本水平對齊
• 行高
• 字母間距與詞間距

之前介紹過文字樣式，但文字樣式只是針對一個字而已。現實往往更多處理的是大段的文字，也叫做段落。段落更注重的是排版效果。一個排版好看的文章，更吸引人去看。

標線樣式

之前是使用標籤來設置標線，但更推薦的是使用css來設置標線，因為樣式與結構分離才是最好的選擇。

語法：text-decoration:屬性值

屬性值

各種標線，下劃線和刪除線用得較多，常用在文章的重點語句，或者是電商網站里的原價

標線樣式

小技巧，還可以用這個屬性去除a標籤的默認下劃線。text-decoration:none

大小寫轉換

這個屬性是針對英文，它可以很方便轉換大小寫，這個對於經常跟英文打交道的，是個神器！

語法：text-transform:屬性值;

屬性值

真正一鍵轉換全大寫。

原文

轉大寫

首行縮進

在書寫習慣上，一般習慣每個段落都會縮進兩個字大小，這個叫首行縮進。我們都知道段落p標籤的首行是不會縮進的，在此之前都是手動打幾個空格，這樣很容易導致空格失效，因為編輯器很容易把空格忽略掉。所有要使用css來控制。

語法：text-indent:像素值;

像素值可以使用px，但一般開發用得更多的是rem，2rem代表2個字的大小。

首行縮進

文本水平對齊

在CSS中，使用text-align屬性控制文本的水平方向的對齊方式：左對齊、居中對齊、右對齊。常見的文章標題，就是用這個來水平居中。

語法：text-align:屬性值;

屬性值

三種不同的水平對齊方式

水平對齊方式

行高

在CSS中，使用line-height屬性來控制文本的行高。這個有點像行間距，但嚴謹的說，並不是！這裡的行高真的是指一行的高度，大多數人會認為是word文檔里的行間距，行間距指的是”兩行文本之間的距離”，是不是不一樣。

語法：line-height:像素值;

不同行高的區別如下

不同行高

這裡有個小技巧，行高line-height和高height設置為同一值，就可以實現垂直居中！

垂直居中

字母間距和詞間距

編寫word文檔的時候，常常是根據板式來調整字的間距，以免頁面過於擁堵。那調整字與字間距就有兩種情況。

首先是字間距，語法：letter-spacing:像素值;

說明：letter-spacing控制的是字間距，每一個中文文字作為一個”字”，而每一個英文字母也作為一個”字”。

原文

修改後

還有一個就是詞間距，語法：word-spacing:像素值;

說明：以空格為基準進行調節，如果多個單詞被連在一起，則被word-spacing視為一個單詞；如果漢字被空格分隔，則分隔的多個漢字就被視為不同的單詞，word-spacing屬性此時有效。

總結