Css樣式--文本樣式詳解
時間：2023-09-26 08:18:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-26 08:18:01 來源：網(wǎng)站運(yùn)營
Css樣式--文本樣式詳解：
Css樣式--文本樣式詳解
文本樣式包括所謂的文本縮進(jìn)：text-indent 水平對齊：text-align:center;left;right 字間隔和字母間距、字符轉(zhuǎn)換：text-transform等
1.文本縮進(jìn)：text-indent代碼如下:
p {text-indent: 5em;}1.實(shí)用負(fù)值：設(shè)置負(fù)值時要當(dāng)心，如果對一個段落設(shè)置了負(fù)值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對負(fù)縮進(jìn)再設(shè)置一個外邊距或一些內(nèi)邊距。
代碼如下:
p {text-indent: -5em; padding-left: 5em;}2.text-indent 具有繼承屬性
代碼如下:
這里的p 首行縮進(jìn)50px
2.水平對齊：text-align:center;left;right;3.字間隔和字母間距： word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 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ī)則：
代碼如下:
對于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因?yàn)?text-decoration 值會替換而不是累積起來。
6.處理空白格white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
作者：前端王祖藍(lán)
鏈接：https://juejin.cn/post/6909699690615275534
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
在線咨詢
