※定義間距
前面說了如何用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屬性，而且採用了偽類元素。
通過上面的代碼注釋，相信您應該對偽類元素有一個大概認識。實際上我們用到的這種偽類應當稱之為“錨偽類”，它規定了連結不同狀態下的效果。
怎麼樣，是不是很簡單的就可以實現動態連結的效果，趕緊自己動手試一試吧！下一節我將向您介紹“容器”屬性。
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
