CSS中非常好用的六種文本樣式的範例程式碼分享

前面的話

　　CSS文本樣式是相對於內容進行的樣式修飾。由於在層疊關係中，內容要高於背景。所以文本樣式相對而言更加重要。有些人對文本和字型樣式之間的不同不太瞭解，簡單地講，文本是內容，而字型則用於顯示這個內容。本文將詳細介紹文本相關樣式

首行縮排

定義

　　首行縮排是將段落的第一行縮排，這是常用的文字格式設定化效果。一般地，中文寫作時開頭空兩格，類似於此

　　[注意]該屬性可以為負值

text-indent

　　值: <length> | <percentage> | inherit

　　初始值: 0

　　應用於: 區塊層級元素(包括block和inline-block)

　　繼承性: 有

　　百分數: 相對於包含塊的寬度

應用

【首行凸排】

p{    width: 200px;    border: 1px solid black;    text-indent: -1em;//關鍵代碼    padding-left: 1em;//關鍵代碼}

【首字下沉】

p{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}p:first-letter{    font-size: 30px;    float: left;}

水平對齊

定義

　　水平對齊是影響一個元素中的文本的水平對齊

text-align

　　值: left | center | right | justify | inherit

　　初始值: left

　　應用於: 區塊層級元素(包括block和inline-block)

　　繼承性: 有

左右對齊

　　當水平對齊為左右對齊時，word-spacing可能會調整，以便文本在整行中正好放下。如果為letter-spacing指定一個長度值，則letter-spacing不會受左右對齊影響，除非letter-spacing值為normal

IE相容

　　對於IE7-瀏覽器來說，使用text-align不僅會改變文本的水平對齊，也會改變後代區塊層級元素的水平對齊

.box{    width: 200px;    height: 200px;    background-color: pink;    border: 1px solid black;    text-align: right;}    .in{    height: 100px;    width: 100px;    background-color: lightgreen;}

<p class="box">    <p class="in">測試文字</p></p>

字間隔

　　字間隔是指單詞間距，用來設定文字或單詞之間的間距。實際上，"字"表示的是任何非空白符字元組成的串，並由某種空白符包圍

　　[注意]單詞之間用空格分開，單詞之間的間距 = 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)，這是最應該注意的地方