3、文本屬性
※定義間距
前面說了如何用CSS定義字體、顏色和背景屬性，那麼定義好的文本我們怎麼對它進行排版呢？
下面我們講述一下CSS的文本屬性，還是先來看一下文本屬性的詳細列表：
我們可以從表中看到在這裡可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。 舉個例子來看看吧。比如下面這段文字（如左下圖）：
我們對這段文字加上文本屬性重新排版，排版後的效果如右上圖所示。
我們看到經過文本屬性處理的文本字與字之間多了間距，行與行之間多了行高，對齊方式變成了兩端對齊，並且段首又多縮進了兩格。這是怎樣實現的呢？很簡單，只是在html中加了如下的代碼：
<p style=「letter-spacing：1em；text-align：justify；text-indent：
4em；line-height：17pt」>……</p>
//*letter-spacing設置了字間距為1em，其中1em為一個長度單位；text-align設
置了對齊方式為兩端對齊；indent設置了縮進格為4em；line-height設置了行高為
17pt*//
從上面的例子，我們可以看出利用CSS的文本屬性可以方便的對頁面中的文本進行排版。下一節我將向您介紹文本的Text-decoration屬性的一個小應用。
※裝飾超鏈接
網頁默認的鏈接方式是這樣的：未訪問過的鏈接是藍色文字並帶藍色的下劃線，訪問過的超級鏈接是深紫色的文字並帶深紫色的下劃線。如果您所有的網頁都是這種樣式，是不是很單調呢？
其實，利用文本屬性中的Text-decoration屬性就可以實現對超鏈接的修飾。我們先看下面的這段代碼：
<html>
<title>link css</title>
<head>
<style>
<!--
//*定義偽類元素（ａ：），大括號內定義了前景色屬性和文本裝飾屬性，
hover加上『font-size』屬性目的是讓鼠標激活鏈接時改變字體*//
a：link{color：green;text-decoration：none}
//*未訪問時的狀態，顏色為綠色(green)，文本裝飾屬性(text-decoration)值
為沒有(none)*//
a：visited{color：red;text-decoration：none}
//*訪問過的狀態，顏色為紅色(red)，文本裝飾屬性值為沒有*//
a：hover{color：blue;text-decoration：overline;font-size：20pt}
//*鼠標激活的狀態，顏色為藍色(blue)， 文本裝飾屬性值為上劃(overline)，
字體大小為20pt*//
-->
</style>
</head>
<body>
<p style=「font-family:行書體；font-size：18pt」>
<a href=「http：//www.hongen.com」>未訪問的鏈接</a></p>
//*加鏈接，顯示三種不同狀態，並且定義了鏈接文本的字體和大小*//
<p> <a href=「http：//www.hongen.com」>訪問過的鏈接</a></p>
<p> <a href=「http：//www.hongen.com」>鼠標激活的鏈接</a></p>
</body>
</html>
您如果想看上述代碼的效果，請
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。。
我們從例子中看到沒有訪問過的鏈接以綠色顯示，並且去掉了下劃線；而訪問過的鏈接以紅色且沒有下劃線顯示；另外，當鼠標激活鏈接時，鏈接以藍色顯示，並且加上了上劃線。這種效果是怎麼實現的呢？它除了運用了文本屬性中的text-decoration屬性，而且採用了偽類元素。
通過上面的代碼註釋，相信您應該對偽類元素有一個大概認識。實際上我們用到的這種偽類應當稱之為「錨偽類」，它規定了鏈接不同狀態下的效果。
怎麼樣，是不是很簡單的就可以實現動態鏈接的效果，趕緊自己動手試一試吧！下一節我將向您介紹「容器」屬性。
