第七章：鏈接
第七章：鏈接
CSS可以根據鏈接是未訪問的、已訪問的、活動的、是否有鼠標懸停等分別定義不同的屬性。這樣，我們便可為網站增添奇特而有用的效果。你需要通過偽類（pseudo-class）來控制這些效果。
偽類是什么？
偽類（pseudo-class）是指可以在HTML元素定義CSS屬性的時候將條件和事件考慮在內。
我們來看一個例子。正如你所知道的，在HTML里，鏈接是通過a元素來定義的。因此，在CSS里，我們可以將a作為一個選擇器（selector）：
a {
color: blue;
}
一個鏈接可以有不同的狀態。例如，它可以是已訪問過的，也可以是未訪問過的。你可以通過偽類分別為訪問過的鏈接和未訪問過的鏈接設置不同的樣式。
a:link {
color: blue;
}
a:visited {
color: red;
}
為未訪問過的鏈接和已訪問過的鏈接分別使用偽類a:link和a:visited。活動的鏈接對應的偽類為a:active，有鼠標懸停的鏈接對應的偽類為a:hover。
我們將逐個解釋這四個偽類，并給出示例。
偽類：link
偽類:link用于瀏覽者從未訪問過的鏈接。
在下面的'示例代碼中，我們將未訪問過的鏈接設為淺藍色。
a:link {
color: #6699CC;
}
偽類： visited
偽類:visited用于瀏覽者已訪問過的鏈接。比如，下面的代碼將已訪問過的鏈接設為深紫色：
a:visited {
color: #660099;
}
偽類： active
偽類:active用于活動的鏈接（即獲得當前焦點的鏈接）。
下例將活動的鏈接設為具有黃色背景：
a:active {
background-color: #FFFF00;
}
偽類： hover
偽類:hover用于有鼠標懸停的鏈接。
這能制造出有趣的效果。例如，如果你要當鼠標光標移到鏈接上時將鏈接顯示為橙色斜體，那么CSS可以這樣寫：
a:hover {
color: orange;
font-style: italic;
}
實例：有鼠標停的鏈接的效果
為鏈接設置懸停效果十分流行。所以，我們將多看幾個:hover偽類的例子。
我們在第5課學過，可以用letter-spacing屬性來調整字符間距。現在為了取得特殊效果，我們將它應用到鏈接上：
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
實例：大寫和小寫
同樣在第5課我們學過，可以通過text-transform屬性來轉換字母的大小寫。這也可用于為鏈接制造效果：
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屬性也可以與其它屬性一起應用在偽類上。
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;
}
小結
在這一課，你學習了偽類，并且還運用了一些之前學到的屬性。也許這已經令你對CSS的強大功能領略一二了。
在下一課，我們將向你介紹如何為特定元素或一組元素定義屬性。
【第七章：鏈接】相關文章：