CSS文本
上面表格中的屬性我們不會(huì)一一講述，只講述一些常用的屬性，主要是讓大家邊學(xué)邊練。其他內(nèi)容大家可以自己測(cè)試，w3c 上面也可以查看每個(gè)屬性的具體內(nèi)容。
例子 1 顏色 color
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>查看顏色</p> <h1>標(biāo)題查看顏色</h1> </body> </html>
style.css
body{
color: aqua;
}運(yùn)行結(jié)果：
大家可以看到我們是給 body 設(shè)置的顏色，但是 p 標(biāo)簽和 h1 的標(biāo)簽也顯示了 body 設(shè)置的字體顏色，說(shuō)明了兩個(gè)標(biāo)簽繼承了 body 的字體顏色。
例子 2 text-align
text-align是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。它的前 3 個(gè)值相當(dāng)直接，不過(guò)第 4 個(gè)和第 5 個(gè)則略有些復(fù)雜。
值 left、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。
西方語(yǔ)言都是從左向右讀，所有text-align的默認(rèn)值是 left。文本在左邊界對(duì)齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。 index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>php中文網(wǎng)</p> </body> </html>
style.css
body{
color: red;
text-align: center;
}運(yùn)行結(jié)果：?
例子 3 text-indent
縮進(jìn)文本 把 Web 頁(yè)面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。 CSS 提供了text-indent屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。 通過(guò)使用text-indent屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值。 這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：
p {text-indent: 5em;}下面的 index.html 中代碼為：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文網(wǎng)</h3> <p>最好的自學(xué)網(wǎng)站</p> <p>最好的自學(xué)網(wǎng)站</p> <p>最好的自學(xué)網(wǎng)站</p> <p>最好的自學(xué)網(wǎng)站</p> </div> </body> </html>
這時(shí)如果不加任何的 css 修飾。顯示的效果為：?
我們的 style.css 代碼中加入以下內(nèi)容縮進(jìn)讓實(shí)驗(yàn)樓三個(gè)字縮進(jìn) 2 個(gè)字節(jié)。
h3{
text-indent: 5em;
}運(yùn)行結(jié)果：
?
字間隔
word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。
word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提供一個(gè)正長(zhǎng)度值，那么字之間的間隔就會(huì)增加。為 word-spacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近：
<html> <body> <h1 style="word-spacing:15px;">設(shè)置中文字符間距</h1> <h1 style="word-spacing:15px;">this is a test</h1> </body> </html>
字母間隔
letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。
與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長(zhǎng)度。默認(rèn)關(guān)鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長(zhǎng)度值會(huì)使字母之間的間隔增加或減少指定的量：
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文網(wǎng)</h1>
<h4>php中文網(wǎng)</h4>
</body>
</html>?字符轉(zhuǎn)換
text-transform 屬性處理文本的大小寫。這個(gè)屬性有 4 個(gè)值：
? ? none
? ? uppercase
? ? lowercase
? ? capitalize
默認(rèn)值 none 對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后，capitalize 只對(duì)每個(gè)單詞的首字母大寫。
作為一個(gè)屬性，text-transform 可能無(wú)關(guān)緊要，不過(guò)如果您突然決定把所有 h1 元素變?yōu)榇髮?，這個(gè)屬性就很有用。不必單獨(dú)地修改所有 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個(gè)修改：
h1 {text-transform: uppercase}使用 text-transform 有兩方面的好處。首先，只需寫一個(gè)簡(jiǎn)單的規(guī)則來(lái)完成這個(gè)修改，而無(wú)需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來(lái)的大小寫，可以更容易地完成修改。
文本裝飾
接下來(lái)，我們討論?text-decoration 屬性，這是一個(gè)很有意思的屬性，它提供了很多非常有趣的行為。
text-decoration 有 5 個(gè)值：
? ? ? ? none
? ? ? underline
? ? ? ?overline
? ? ? ? line-through
? ? ? ? blink
不出所料，underline 會(huì)對(duì)元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會(huì)在文本的頂端畫一個(gè)上劃線。值 line-through 則在文本中間畫一個(gè)貫穿線，等價(jià)于 HTML 中的 S 和 strike 元素。blink 會(huì)讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標(biāo)記。
none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無(wú)裝飾的文本是默認(rèn)外觀，但也不總是這樣。例如，鏈接默認(rèn)地會(huì)有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來(lái)做到這一點(diǎn)：
a {text-decoration: none;}注意：如果顯式地用這樣一個(gè)規(guī)則去掉鏈接的下劃線，那么錨與正常文本之間在視覺(jué)上的唯一差別就是顏色（至少默認(rèn)是這樣的，不過(guò)也不能完全保證其顏色肯定有區(qū)別）。
還可以在一個(gè)規(guī)則中結(jié)合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規(guī)則如下：
a:link a:visited {text-decoration: underline overline;}不過(guò)要注意的是，如果兩個(gè)不同的裝飾都與同一元素匹配，勝出規(guī)則的值會(huì)完全取代另一個(gè)值。請(qǐng)考慮以下的規(guī)則：
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}對(duì)于給定的規(guī)則，所有 class 為 stricken 的 h2 元素都只有一個(gè)貫穿線裝飾，而沒(méi)有下劃線和上劃線，因?yàn)?text-decoration 值會(huì)替換而不是累積起來(lái)。
處理空白符
white-space 屬性會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和 tab 字符的處理。
通過(guò)使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認(rèn)的 XHTML 處理已經(jīng)完成了空白符處理：它會(huì)把所有空白符合并為一個(gè)空格。所以給定以下標(biāo)記，它在 Web 瀏覽器中顯示時(shí)，各個(gè)字之間只會(huì)顯示一個(gè)空格，同時(shí)忽略元素中的換行：
<p>This paragraph has many spaces in it.</p>
可以用以下聲明顯式地設(shè)置這種默認(rèn)行為：
p {white-space: normal;}上面的規(guī)則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個(gè)值，換行字符（回車）會(huì)轉(zhuǎn)換為空格，一行中多個(gè)空格的序列也會(huì)轉(zhuǎn)換為一個(gè)空格。
文本方向
如果您閱讀的是英文書籍，就會(huì)從左到右、從上到下地閱讀，這就是英文的流方向。不過(guò)，并不是所有語(yǔ)言都如此。我們知道古漢語(yǔ)就是從右到左來(lái)閱讀的，當(dāng)然還包括希伯來(lái)語(yǔ)和阿拉伯語(yǔ)等等。CSS2 引入了一個(gè)屬性來(lái)描述其方向性。
direction 屬性影響塊級(jí)元素中文本的書寫方向、表中列布局的方向、內(nèi)容水平填充其元素框的方向、以及兩端對(duì)齊元素中最后一行的位置。
注釋：對(duì)于行內(nèi)元素，只有當(dāng)?unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時(shí)才會(huì)應(yīng)用 direction 屬性。
direction 屬性有兩個(gè)值：ltr 和 rtl。大多數(shù)情況下，默認(rèn)值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應(yīng)使用值 rtl。
