css設(shè)置超鏈接樣式的方法是,給超鏈接添加偽類,例如【a:visited {color:#00FF00;}】?!綼:visited】表示用戶已經(jīng)訪問過的鏈接。
本文操作環(huán)境:windows10系統(tǒng)、css 3、thinkpad t480電腦。
如果我們要設(shè)置超鏈接的樣式,其實(shí)是可以使用任何一個(gè)css屬性的,比如顏色、字體、背景等等。但是如果你想設(shè)置特別的樣式,就需要使用到偽類。下面我們一起來看下偽類。
提示:特別的鏈接,可以有不同的樣式,這取決于他們是什么狀態(tài)。
這四個(gè)鏈接狀態(tài)是:
-
a:link – 正常,未訪問過的鏈接
-
a:visited – 用戶已訪問過的鏈接
-
a:hover – 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)
-
a:active – 鏈接被點(diǎn)擊的那一刻
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> a:link {color:#000000;} /* 未訪問鏈接*/ a:visited {color:#00FF00;} /* 已訪問鏈接 */ a:hover {color:#FF00FF;} /* 鼠標(biāo)移動(dòng)到鏈接上 */ a:active {color:#0000FF;} /* 鼠標(biāo)點(diǎn)擊時(shí) */ </style> </head> <body> <p><b><a href="/css/" target="_blank">這是一個(gè)鏈接</a></b></p> <p><b>注意:</b> a:hover 必須在 a:link 和 a:visited 之后,需要嚴(yán)格按順序才能看到效果。</p> <p><b>注意:</b> a:active 必須在 a:hover 之后。</p> </body> </html>
我們來看下運(yùn)行效果: