縮進文本

把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。

CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。

通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。

這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em：

p {text-indent: 5em;}

注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。

提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。

使用負值

text-indent 還可以設置為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊：

p {text-indent: -5em;}

不過在為 text-indent 設置負值時要當心，如果對一個段落設置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距：

p {text-indent: -5em; padding-left: 5em;}

使用百分比值

text-indent 可以使用所有長度單位，包括百分比值。

百分數要相對于縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。

在下例中，縮進值是父元素的 20%，即 100 個像素：

div {width: 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div> 

繼承

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> 

以上標記中的段落也會縮進 50 像素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。

水平對齊

text-align 是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些復雜。

值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。

西方語言都是從左向右讀，所有 text-align 的默認值是 left。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對于希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀。不出所料，center 會使每個文本行在元素中居中。

提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。

text-align:center 與 <CENTER>

您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。

<CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。

justify

最后一個水平對齊屬性是 justify。

在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。

需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請參閱 CSS text-align 屬性參考頁。

字間隔

word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。

word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那么字之間的間隔就會增加。為 word-spacing 設置一個負值，會把它拉近：

p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p >
實例 TIY ：增加或減少單詞間距（字間隔）
注釋：如需深入理解 CSS 對“字”（word）的定義，請訪問 CSS word-spacing 屬性參考頁。
字母間隔
letter-spacing 屬性與 word-spacing 的區別在于，字母間隔修改的是字符或字母之間的間隔。
與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：
h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px} <h1>This is header 1</h1> <h4>This is header 4</h4> 
實例 TIY ：規定字符間距（字母間隔）
字符轉換
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
none
uppercase
lowercase
capitalize
默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。
作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：
h1 {text-transform: uppercase}
使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。
實例 TIY ：控制文本中字母的大小寫
文本裝飾
接下來，我們討論 text-decoration 屬性，這是一個很有意思的屬性，它提供了很多非常有趣的行為。
text-decoration 有 5 個值：
none
underline
overline
line-through
blink
不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。
none 值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點：
a {text-decoration: none;}
注意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區別）。
還可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規則如下：
a:link a:visited {text-decoration: underline overline;}
不過要注意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則：
h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;} 
對于給定的規則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 text-decoration 值會替換而不是累積起來。
處理空白符
white-space 屬性會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。
通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經完成了空白符處理：它會把所有空白符合并為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：
<p>This paragraph has many spaces in it.</p>
可以用以下聲明顯式地設置這種默認行為：
p {white-space: normal;}
上面的規則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個值，換行字符（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。
實例 TIY ：white-space: normal
值 pre
不過，如果將 white-space 設置為 pre，受這個屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會被忽略。
如果 white-space 屬性的值為 pre，瀏覽器將會注意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當于一個 pre 元素。
實例 TIY ：white-space: pre
注意：經測試，IE 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例。
值 nowrap
與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 <td nowrap> 將一個表單元格設置為不能換行，不過 white-space 值可以應用到任何元素。
實例 TIY ：white-space: nowrap
值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創作人員更好地控制空白符處理。
如果元素的 white-space 設置為 pre-wrap，那么該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中一樣合并空白符序列，但保留換行符。
實例 TIY ：white-space: pre-wrap
實例 TIY ：white-space: pre-line
注意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個實例，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。
總結
下面的表格總結了 white-space 屬性的行為：
值
空白符
換行符
自動換行
pre-line
合并
保留
允許
normal
合并
忽略
允許
nowrap
合并
忽略
不允許
pre
保留
保留
不允許
pre-wrap
保留
保留
允許
文本方向
如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，并不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。
direction 屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最后一行的為止。
注釋：對于行內元素，只有當 unicode-bidi 屬性設置為 embed 或 bidi-override 時才會應用 direction 屬性。
direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。
CSS 文本實例：
設置文本顏色
本例演示如何設置文本的顏色。
設置文本的背景顏色
本例顏色如何設置部分文本的背景顏色。
規定字符間距
本例演示如何增加或減少字符間距。
使用百分比設置行間距
本例演示如何使用百分比值來設置段落中的行間距。
使用像素值設置行間距
本例演示如何使用像素值來設置段落中的行間距。
使用數值來設置行間距
本例演示如何使用一個數值來設置段落中的行間距。
對齊文本
本例演示如何對齊文本。
修飾文本
本例演示如何向文本添加修飾。
縮進文本
本例演示如何縮進文本首行。
控制文本中的字母
本例演示如何控制文本中的字母。
在元素中禁止文本折行
本例演示如何禁止在元素中的文本折行。
增加單詞間距
本例演示如何增加段落中單詞間的距離。
CSS 文本屬性
屬性
描述
color
設置文本顏色
direction
設置文本方向。
line-height
設置行高。
letter-spacing
設置字符間距。
text-align
對齊元素中的文本。
text-decoration
向文本添加修飾。
text-indent
縮進元素中文本的首行。
text-shadow
設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform
控制元素中的字母。
unicode-bidi
設置文本方向。
white-space
設置元素中空白的處理方式。
word-spacing
設置字間距。