第七章：鏈接
第七章：鏈接
CSS可以根據(jù)鏈接是未訪問的、已訪問的、活動(dòng)的、是否有鼠標(biāo)懸停等分別定義不同的屬性。這樣，我們便可為網(wǎng)站增添奇特而有用的效果。你需要通過偽類（pseudo-class）來控制這些效果。
偽類是什么？
偽類（pseudo-class）是指可以在HTML元素定義CSS屬性的時(shí)候?qū)l件和事件考慮在內(nèi)。
我們來看一個(gè)例子。正如你所知道的，在HTML里，鏈接是通過a元素來定義的。因此，在CSS里，我們可以將a作為一個(gè)選擇器（selector）：
a {
color: blue;
}
一個(gè)鏈接可以有不同的狀態(tài)。例如，它可以是已訪問過的，也可以是未訪問過的。你可以通過偽類分別為訪問過的鏈接和未訪問過的鏈接設(shè)置不同的樣式。
a:link {
color: blue;
}
a:visited {
color: red;
}
為未訪問過的鏈接和已訪問過的鏈接分別使用偽類a:link和a:visited�；顒�(dòng)的鏈接對(duì)應(yīng)的偽類為a:active，有鼠標(biāo)懸停的鏈接對(duì)應(yīng)的偽類為a:hover。
我們將逐個(gè)解釋這四個(gè)偽類，并給出示例。
偽類：link
偽類:link用于瀏覽者從未訪問過的鏈接。
在下面的'示例代碼中，我們將未訪問過的鏈接設(shè)為淺藍(lán)色。
a:link {
color: #6699CC;
}
偽類： visited
偽類:visited用于瀏覽者已訪問過的鏈接。比如，下面的代碼將已訪問過的鏈接設(shè)為深紫色：
a:visited {
color: #660099;
}
偽類： active
偽類:active用于活動(dòng)的鏈接（即獲得當(dāng)前焦點(diǎn)的鏈接）。
下例將活動(dòng)的鏈接設(shè)為具有黃色背景：
a:active {
background-color: #FFFF00;
}
偽類： hover
偽類:hover用于有鼠標(biāo)懸停的鏈接。
這能制造出有趣的效果。例如，如果你要當(dāng)鼠標(biāo)光標(biāo)移到鏈接上時(shí)將鏈接顯示為橙色斜體，那么CSS可以這樣寫：
a:hover {
color: orange;
font-style: italic;
}
實(shí)例：有鼠標(biāo)停的鏈接的效果
為鏈接設(shè)置懸停效果十分流行。所以，我們將多看幾個(gè):hover偽類的例子。
我們?cè)?span lang="EN-US">第5課學(xué)過，可以用letter-spacing屬性來調(diào)整字符間距�，F(xiàn)在為了取得特殊效果，我們將它應(yīng)用到鏈接上：
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
實(shí)例：大寫和小寫
同樣在第5課我們學(xué)過，可以通過text-transform屬性來轉(zhuǎn)換字母的大小寫。這也可用于為鏈接制造效果：
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
通過上面兩個(gè)例子你會(huì)發(fā)現(xiàn)，我們可以通過屬性的組合創(chuàng)造出無數(shù)種效果。
例2：去掉鏈接的下劃線
如何去掉鏈接的下劃線是一個(gè)常見的問題。
如果你去掉鏈接的下劃線或修改鏈接的字體顏色的話，這很有可能會(huì)令用戶感到困惑、并因此不能充分享用你網(wǎng)站上的內(nèi)容。 text-decoration屬性，它可用于決定是否給文本添加下劃線。要去掉下劃線，只要把text-decoration屬性的值設(shè)為none就行了。
a {
text-decoration:none;
}
除此以外，text-decoration屬性也可以與其它屬性一起應(yīng)用在偽類上。
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;
}
小結(jié)
在這一課，你學(xué)習(xí)了偽類，并且還運(yùn)用了一些之前學(xué)到的屬性。也許這已經(jīng)令你對(duì)CSS的強(qiáng)大功能領(lǐng)略一二了。
在下一課，我們將向你介紹如何為特定元素或一組元素定義屬性。
【第七章：鏈接】相關(guān)文章：