文本樣式包括所謂的文本縮進：text-indent 水平對齊：text-align:center;left;right 字間隔和字母間距、字符轉(zhuǎn)換：text-transform等

1.文本縮進：text-indent

代碼如下:

p {text-indent: 5em;}

1.實用負值：設(shè)置負值時要當(dāng)心，如果對一個段落設(shè)置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對負縮進再設(shè)置一個外邊距或一些內(nèi)邊距。

代碼如下:p {text-indent: -5em; padding-left: 5em;}

2.text-indent 具有繼承屬性

代碼如下:

這里的p 首行縮進50px

2.水平對齊：text-align:center;left;right;

3.字間隔和字母間距： word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設(shè)置值為 0 是一樣的。

letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。

4.字符轉(zhuǎn)換：text-transform 即大小寫 首字母 轉(zhuǎn)換。使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規(guī)則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

代碼如下:

none 沒有變化 uppercase 全大寫 lowercase 全小寫 capitalize 單詞首字母大寫

5.文本裝飾：text-decoration

在一個規(guī)則中結(jié)合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規(guī)則如下：

代碼如下:

a:link a:visited {text-decoration: underline overline;}

如果兩個不同的裝飾都與同一元素匹配，勝出規(guī)則的值會完全取代另一個值。請考慮以下的規(guī)則：

代碼如下:

h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;}

對于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 text-decoration 值會替換而不是累積起來。

6.處理空白格

white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。

了解更多，請點擊：https://www.bilibili.com/video/BV13b411g78D

作者：前端王祖藍
鏈接：https://juejin.cn/post/6909699690615275534
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。