css當中經常使用的六種文本樣式
css 文本樣式是相對於內容進行的樣式修飾,下面來說下幾種常見的文本樣式。
首行縮進
首行縮進是將段落的第一行縮進,這是常用的文本格式化效果。一般地,中文寫作時開頭空兩格,類似於此。
該屬性的值是允許為負值的。
語法:
text-indent:<length> | <percentage> | inherit
tip:初始值為0;
應用於: 塊級元素(包括block和inline-block)
繼承性: 有
百分數: 相對於包含塊的寬度
案例:首字符下沉
div{
width: 200px;
border: 1px solid black;
text-indent: 0.5em;
}
div:first-letter{
font-size: 30px;
float: left;
}
水平對齊
水平對齊是影響一個元素中的文本的水平對齊方式。
語法:
text-align: left | center | right | justify | inherit
初始值: left
應用於: 塊級元素(包括block和inline-block)
繼承性: 有
對於IE7-瀏覽器來說,使用text-align不僅會改變文本的水平對齊方式,也會改變后代塊級元素的水平對齊方式
字間隔
字間隔是指單詞間距,用來設置文字或單詞之間的間距。實際上,"字"表示的是任何非空白符字符組成的串,並由某種空白符包圍。
注意:單詞之間用空格分開,單詞之間的間距 = word-spacing + 空格大小
注意:字間隔可為負值
語法:
word-spacing: <length> | normal | inherit
初始值: normal(默認為0)
應用於: 所有元素
繼承性: 有
字母間隔
字母間隔是指字符間距
注意:字母間隔可為負值
letter-spacing:<length> | normal | inherit
初始值: normal(默認為0)
應用於: 所有元素
繼承性: 有
文本轉換
文本轉換用於處理英文的大小寫轉換。
語法:
text-transform:uppercase(全大寫) | lowercase(全小寫) | capitalize(首字母大寫) | none | inherit
初始值: none
應用於: 所有元素
繼承性: 有
文本修飾
文本修飾用於為文本提供修飾線。
注意:文本修飾線的顏色與文本顏色相同。
語法:
text-decoration:none | [underline(下划線) || overline(上划線) || line-through(中划線)] | inherit
初始值: none
應用於: 所有元素
繼承性: 無
在首行縮進(text-index)、水平對齊(text-align)、字間隔(word-spacing)、字母間隔(letter-spacing)、文本轉換(text-transform)、文本修飾(text-decoration)這6種文本樣式中,首行縮進(text-index)和水平對齊(text-align)只能夠應用於塊級元素(包括block和inline-block),這是最應該注意的地方。