CSS Text（文本）
一、文本顏色
color 顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
- 十六進制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
一個網頁的背景顏色是指在主體內的選擇：
body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
注意：對於W3C標准的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。
二、文本的對齊方式
text-align 文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或對齊到左或右,兩端對齊.
當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css教程</title> <style> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>CSS text-align 實例</h1> <p class="date">2015 年 3 月 14 號</p> <p class="main">“當我年輕的時候，我夢想改變這個世界；當我成熟以后，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以后，我發現我不能夠改變我們的國家，我的最后願望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界。”</p> <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>
效果：
三、文本修飾
text-decoration 屬性用來設置或刪除文本的裝飾。
從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下划線：
a {text-decoration:none;}
也可以這樣裝飾文字：
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css教程</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html>
效果：
注意：我們不建議強調指出不是鏈接的文本，因為這常常混淆用戶。
四、文本轉換
text-transform 文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。
可用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
p.uppercase {text-transform:uppercase;} /*轉為大寫*/ p.lowercase {text-transform:lowercase;} /*轉為小寫*/ p.capitalize {text-transform:capitalize;} /*轉為每個單詞首字母大寫*/
五、文本縮進
text-indent 文本縮進屬性是用來指定文本的第一行的縮進。
p {text-indent:50px;}
六、設置字符間距
letter-spacing 如何增加或減少字符之間的空間。
h1 {letter-spacing:2px;} /*字符之間增加空間*/ h2 {letter-spacing:-3px;} /*字符之間減少空間*/
七、設置行間距
line-height 指定行與行之間的空間。
p.small {line-height:70%;} p.big {line-height:200%;}
八、設置元素文本方向
direction 改變元素的文本方向。
div.ex1 {direction:rtl;}
示例代碼：
<html> <head> <meta charset="utf-8"> <title>css教程</title> <style type="text/css"> div.ex1 {direction:rtl;} </style> </head> <body> <div>一些文本。 默認書寫方向</div> <div class="ex1">一些文本。從右到左的書寫方向</div> </body> </html>
效果：
九、單詞之間的空白空間
word-spacing 增加單詞之間的空白空間。
p { word-spacing:30px; }
十、在元素內禁用文件環繞（設置元素中空白的處理方式）
white-space 如何禁用一個元素內的文字環繞（設置元素中空白的處理方式）。
p { white-space:nowrap; }
十一、垂直對齊圖像
vertical-align 如何設置文本的垂直對齊圖像。
img.top {vertical-align:text-top;} img.bottom {vertical-align:text-bottom;}
效果如圖：
十二、設置文本陰影
text-shadow 設置文本陰影。
h1 {text-shadow:2px 2px #FF0000;}
效果如圖：
注意： Internet Explorer 9 以及更早的瀏覽器不支持 text-shadow 屬性。
十三、所有CSS文本屬性
