第六課：鏈接

我們可以把前面所學知識用于鏈接，即改變顏色，字體和下劃線等參數。CSS能讓你根據鏈接被訪問過，未訪問，激活或鼠標是否放在鼠標上等狀態定義不同特性。這能給你的網站增加有趣和實用效果。控制這些效果使用的是CSS代碼“pseudo-classes”。

什么是pseudo-classes？

pseudo-classes能讓你在定義HTML標簽的特性時考慮不同條件或事件。查看下面這個實例。我們都知道，HTML是用<a>定義鏈接的，因此我們可以使用CSS的選擇器：

a {
color: blue;
}

鏈接有不同狀態。例如，它可以是訪問過或未訪問過；你能用pseudo-classes給訪問過和未訪問過的鏈接安排不同風格。

a:link {
color: blue;
}

a:visited {
color: red;
}

分別給未訪問和訪問過的鏈接使用a:link和a:visited。激活的鏈接使用pseudo-class a:active ；在鼠標位于鏈接上方時，可以用a:hover。下面用實例進一步解釋每一種pseudo-classes（四種）的作用。

1、Pseudo-class: link

:link用于用戶未訪問過的頁面鏈接。下面的代碼實例中，未訪問過的鏈接是淡藍色。

a:link {
color: #6699CC;
}

2、Pseudo-class: visited

:visited用于用戶訪問過的鏈接。例如，下面的代碼會讓所有訪問過的鏈接變成深紫色：

a:visited {
color: #660099;
}

3、Pseudo-class: active

:active用于被激活的鏈接。這一實例說明一個黃色背景的激活鏈接：

a:active {
background-color: #FFFF00;
}

4、Pseudo-class: hover

:hover用于鼠標放在一個鏈接上時。這能創造出有趣的效果。例如，如果想讓鏈接變成橙色，并且在鼠標劃過時變成斜體，可以使用下面的CSS代碼：

a:hover {
color: orange;
font-style: italic;
}

實例1：在鼠標劃過鏈接時的效果

給鼠標劃過鏈接時創造不同效果的做法特別流行。因此，我們還可以舉出更多與:hover有關的例子。

實例1a：字母之間的間隙

在第五課我們學習過怎樣用letter-spacing調節字母間的空隙，它還可以用于特殊效果的鏈接：

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

實例1b: 大寫字母和小寫字母

第五課講過字體轉換，能在大小寫之間轉換。它同樣可以用于創造鏈接效果：

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

這兩個實例說明，綜合不同特性能創造無限可能的效果。你可以親自嘗試一下。

實例2：清除鏈接下劃線

很多人想知道怎樣清除鏈接下劃線。應謹慎考慮，是否需要清除下劃線，因為它可能會明顯降低網站的可用性。人們習慣于網頁的藍色下劃線，并知道可以點擊它們。但如果你改變鏈接的下劃線和顏色，很有可能給用戶造成困惑，并因此影響網站的內容質量。

當然，清除下劃線很容易。上一課已經學過，用text-decoration就能確定文本是否顯示下劃線。要做到這一點，僅僅將text-decoration設置為none即可。

a {
text-decoration:none;
}

你也可以將text-decoration與其它四個pseudo-classes特性一起設置。

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

總結

這一課我們學習了pseudo-classes，并且使用了前面提到的特性。這能讓你進一步了解CSS提供的可能性。下一課將學習如何定義特殊元素和元素組的特性。