Css樣式--文本樣式詳解

2024-07-11 08:28:16

字體：大中小

供稿：網(wǎng)友

1.文本縮進(jìn)：text-indent

復(fù)制代碼

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

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

復(fù)制代碼

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

2.text-indent 具有繼承屬性

復(fù)制代碼

代碼如下:
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

這里的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 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。

復(fù)制代碼

代碼如下:
none 沒有變化
uppercase 全大寫
lowercase 全小寫
capitalize 單詞首字母大寫

5.文本裝飾：text-decoration

值	描述
none	默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。=
blink	定義閃爍的文本。
inherit	規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。