css經常使用的六種文本樣式


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),這是最應該注意的地方。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM