有細(xì)心的小伙伴可能會(huì)發(fā)現(xiàn)，我們?cè)跒g覽網(wǎng)頁(yè)時(shí)，不同狀態(tài)下的鏈接顯示的顏色是不一樣的。比如百度，未訪問(wèn)時(shí)鏈接未深藍(lán)色，鼠標(biāo)滑到該鏈接時(shí)則顯示為淺藍(lán)色，當(dāng)我點(diǎn)擊該鏈接后，鏈接則變?yōu)樽仙?。那?HTML 怎么設(shè)置超鏈接顏色？這篇文章告訴你。
定義鏈接樣式的四個(gè)偽類：
- ：link，定義正常的鏈接樣式；
- ：visited，定義已訪問(wèn)過(guò)的鏈接樣式；
- ：hover，定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式；
- ：active，定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式。
讓我們來(lái)看下具體如何使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML設(shè)置超鏈接顏色- 編程獅(w3cschool.cn)</title>
<style type="text/css">
a:link {
color:pink;
text-decoration:none;
}
a:visited {
color:blue;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
a:active {
color:black;
text-decoration:none;
}
</style>
</head>
<body>
<a href="http://www.o2fo.com/" target="_blank">w3cschool-編程獅</a>
</body>
</html>在該例子中，原本鏈接顯示為粉紅色（pink），當(dāng)鼠標(biāo)覆蓋在鏈接上時(shí)鏈接顯示為紅色（red），鏈接點(diǎn)擊時(shí)為黑色（black），而訪問(wèn)過(guò)后的鏈接為藍(lán)色。
需要注意的是，我們?cè)诙x時(shí)，需要主要他們的順序，如果沒(méi)有按照特定的順序來(lái)設(shè)置，可能會(huì)使定義失效。定義鏈接的順序?yàn)椋?/p>
link、visited、hover、active?？梢杂洖?LoVe HAte 原則。
對(duì)該功能感興趣的同學(xué)們，可以參考上述代碼自己進(jìn)行練習(xí)。
以上就是文章“HTML 怎么設(shè)置超鏈接顏色？設(shè)置超鏈接顏色總結(jié)”的全部?jī)?nèi)容。想要學(xué)習(xí)更多 HTML 知識(shí)請(qǐng)前往 w3cschool。
