上一篇文章學習了CSS背景，本篇來學習CSS文本。背景（background）和文本（text）一後一前，相互渲染，從而呈現出頁面內容。背景就像是畫布，而文本就是我們在畫布上繪製的文字線條。CSS 文字屬性主要包括文本顏色（color）、字元間距（letter- spacing）、對齊文本（text-align）、裝飾文本（text-decoration)和文本縮排（text-indent）等，下面分別學習。
一、文本顏色
CSS使用color 屬性設定文本顏色（前景色彩）。color屬性設定了一個元素的前景色彩（在 HTML 表現中，就是元素文本的顏色）；光柵映像不受 color 影響。color屬性還會應用到元素的所有邊框（border），除非被 border-color 或另外某個邊框顏色屬性覆蓋。color屬性的取值可以為顏色名、十六進位的顏色值或rgb值。 以下是一個color屬性的樣本：
/*設定整個body的文本顏色為紅色（顏色名）*/body { color:red; }/*一級標題為綠色（十六進位顏色值）*/h1 { color:#00ff00; }/*段落為藍色（rgb值）*/p { color:rgb(0,0,255); }
二、文本縮排
像Word中的首行縮排效果一樣，我們也可以使用CSS中的文本縮排（text-indent）屬性，實現Web 頁面上的段落等區塊層級元素的首行縮排，這是一種最常用的文字格式設定化效果。 text-indent屬性可以應用於所有區塊層級元素，但無法應用於行內元素（提示：如果想把一個行內元素的第一行“縮排”，可以用左內邊距或外邊距創造這種效果）。text-indent 屬性的取值可以是一個給定的長度值（length）、百分比（%），甚至該長度可以是負值，還可以從父元素繼承。
1.使用固定值（length）
text-indent使用固定值的預設取值為0，可以使用px、em、cm和in等長度單位。text-indent屬性最常見的用途是將段落的首行縮排，下面的規則會使所有段落的首行縮排 5 em：
p {text-indent: 5em;}
2.使用百分比（%）
text-indent使用百分比定義時，是定義基於父元素寬度（width）的百分比的縮排。比如將text-indent的值設定為 20%，所影響元素的第一行會縮排其父元素寬度的 20%。在下例中，元素，（<p></p>）的縮排值是父元素（<div></div>）的 20%，即 100 個像素：
div {width: 500px;}p {text-indent: 20%;}
<div> <p>this is a paragragh</p></div>
3.使用負值
text-indent 還可以設定為負值。利用這種技術，可以實現很多有趣的效果，比如word中的“首行凸排”，即第一行懸掛在元素中餘下部分的左邊：
p {text-indent: -5em;}
在為 text-indent 設定負值時要當心，如果對一個段落設定了負值，那麼首行的某些文本可能會超出瀏覽器視窗的左邊界。為了避免出現這種顯示問題，建議針對負縮排再設定一個外邊距或一些內邊距：
p {text-indent: -5em; padding-left: 5em;}
4. text-indent屬性的繼承
text-indent 屬性可以繼承，比如以下標記中的段落也會縮排 50 px，因為這個段落繼承了 id 為 inner 的 div 元素的縮排值。
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>
三、水平對齊
text-align 屬性規定元素中的文本的水平對齊。該屬性通過指定行框與哪個點對齊，從而設定區塊層級元素內文本的水平對齊。text-indent屬性的取值可以為靠左對齊（left）、靠右對齊（right）或置中對齊（center），還允許使用者代理程式調整行內容中字母和字之間的間隔，從而支援值 justify（左右對齊）；不同使用者代理程式可能會得到不同的結果。
text-align屬性的預設值：如果 direction 屬性是 ltr（left to right），則預設值是 left；如果 direction 是 rtl（right to left），則為 right。
h1 {text-align:center}h2 {text-align:left}h3 {text-align:right}
區塊層級元素的置中：要將區塊層級元素或表元素置中，可以通過在這些元素上適當地設定左、右外邊距（margin）來實現。
text-align:center 與 <center></center>元素的區別：
有時我們可能會認為 text-align:center 與 <center></center> 元素的作用一樣，但實際上二者大不相同。<center></center> 不僅影響元素中的文本，還會把整個元素置中。text-align 不會控制元素的對齊，而隻影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。
四、字間距
word-spacing 屬性增加或減少單詞間的空白（即字間隔）。該屬性定義元素中字之間插入多少空白符。 這個屬性中的“字” 定義為由空白符包圍的一個字串。如果指定為長度值，會調整字之間的通常間隔；所以，normal 就等同於設定為 0。允許指定負長度值，這會讓字之間擠得更緊。
<html><head><style type="text/css"> /*class為spread的段落的字間距為30像素*/ p.spread {word-spacing: 30px;} /*class為tight的段落的字間距為-0.5em*/ p.tight {word-spacing: -0.5em;}</style></head><body><p class="spread">This is some text. This is some text.</p><p class="tight">This is some text. This is some text.</p></body></html>
五、字元間距
letter-spacing 屬性設定文本中字母之間的間距，與 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>
六、字元大小寫轉換
text-transform 屬性處理文本的大小寫。text-transform屬性有 4 個取值：none、uppercase、lowercase和capitalize。預設值為 none，表示 對文本不做任何改動，將使用來源文件中的原有大小寫。 uppercase 和 lowercase 將文本轉換為全大寫和全小寫字元。最後，capitalize 只對每個單詞的首字母大寫。
作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改：
h1 {text-transform: uppercase}
七、文本裝飾
text-decoration 屬性設定添加到文本的修飾。 這個屬性允許對文本設定某種效果，如加底線。如果後代元素沒有自己的裝飾，祖先元素上設定的裝飾會“延伸”到後代元素中。
text-decoration 的取值有五個：none（無裝飾，並且會關閉掉原本應用到元素上的所有裝飾），underline（為元素加底線），overline（為元素加上劃線），line-through（為元素加刪除線），blink（讓文本閃爍，類似於word中的發光字）。 例如，連結預設地會有底線。如果您希望去掉超連結的底線，可以使用以下 CSS 來做到這一點：
a {text-decoration: none;}
八、空白符的處理
white-space 屬性設定如何處理元素內的空白。這個屬性聲明建立版面配置階段中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
white-space屬性的取值：
1.normal：預設值，空白會被瀏覽器忽略。
2.pre：空白會被瀏覽器保留，其行為方式類似 HTML 中的 <pre> 標籤。
3.nowrap：文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤為止。
4.pre-wrap：保留空白符序列，但是正常地進行換行。
5.pre-line：合并空白符序列，但是保留分行符號。
6.inherit：規定應該從父元素繼承 white-space 屬性的值。
樣本：
/*規定段落中的文本不進行換行*/ p { white-space: nowrap }
九、文本方向
如果我們閱讀的是英文書籍或現代漢語，就會從左至右（ltr）、從上到下地閱讀，這就是英文和現代漢語的流方向。不過，並不是所有語言都如此。我們知道古漢語就是從右至左（rtl）來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。
direction 屬性影響區塊層級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及左右對齊元素中最後一行的為止。對於行內元素，只有當 unicode-bidi 屬性設定為 embed 或 bidi-override 時才會應用 direction 屬性。
direction 屬性有兩個值：ltr 和 rtl。大多數情況下，預設值是 ltr，顯示從左至右的文本。如果顯示從右至左的文本，應使用值 rtl。
1 <html> 2 <head> 3 <style type="text/css"> 4 /*設定class=one的div的文本顯示放心為從右向左*/ 5 div.one 6 { 7 direction: rtl 8 } 9 /*設定class=two的div的文本顯示放心為從左至右*/10 div.two11 {12 direction: ltr13 }14 </style>15 </head>16 <body>17 <div class="one">Some text. Right-to-left direction.</div>18 <div class="two">Some text. Left-to-right direction.</div>19 </body>20 </html>
參考：http://www.w3school.com.cn/css/css_text.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
