1.文本縮進:text-indent
p {text-indent: 5em;}
1.實用負值:設置負值時要當心,如果對一個段落設置了負值,那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題,建議針對負縮進再設置一個外邊距或一些內邊距。
p {text-indent: -5em; padding-left: 5em;}
2.text-indent 具有繼承屬性
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 首行縮進50px
2.水平對齊:text-align:center;left;right;
3.字間隔和字母間距:
word-spacing 屬性可以改變字(單詞)之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。
letter-spacing 屬性與 word-spacing 的區別在于,字母間隔修改的是字符或字母之間的間隔。
4.字符轉換:text-transform
即大小寫 首字母 轉換。使用 text-transform 有兩方面的好處。首先,只需寫一個簡單的規則來完成這個修改,而無需修改 h1 元素本身。其次,如果您以后決定將所有大小寫再切換為原來的大小寫,可以更容易地完成修改。
none 沒有變化
uppercase 全大寫
lowercase 全小寫
capitalize 單詞首字母大寫
5.文本裝飾:text-decoration
| 值 | 描述 |
|---|---|
| none | 默認。定義標準的文本。 |
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。= |
| blink | 定義閃爍的文本。 |
| inherit | 規定應該從父元素繼承 text-decoration 屬性的值。 |
在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線,又有上劃線,則規則如下:
a:link a:visited {text-decoration: underline overline;}
如果兩個不同的裝飾都與同一元素匹配,勝出規則的值會完全取代另一個值。請考慮以下的規則:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
對于給定的規則,所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾,而沒有下劃線和上劃線,因為 text-decoration 值會替換而不是累積起來。
6.處理空白格
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
新聞熱點
疑難解答