設(shè)置鏈接的樣式

能夠設(shè)置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。

鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式。

鏈接的四種狀態(tài)：

• a:link - 普通的、未被訪(fǎng)問(wèn)的鏈接
• a:visited - 用戶(hù)已訪(fǎng)問(wèn)的鏈接
• a:hover - 鼠標(biāo)指針位于鏈接的上方
• a:active - 鏈接被點(diǎn)擊的時(shí)刻

實(shí)例

a:link {color:#FF0000;}		/* 未被訪(fǎng)問(wèn)的鏈接 */
a:visited {color:#00FF00;}	/* 已被訪(fǎng)問(wèn)的鏈接 */
a:hover {color:#FF00FF;}	/* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;}	/* 正在被點(diǎn)擊的鏈接 */

親自試一試

當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，請(qǐng)按照以下次序規(guī)則：

• a:hover 必須位于 a:link 和 a:visited 之后
• a:active 必須位于 a:hover 之后

常見(jiàn)的鏈接樣式

在上面的例子中，鏈接根據(jù)其狀態(tài)改變顏色。

讓我們看看其他幾種常見(jiàn)的設(shè)置鏈接樣式的方法：

文本修飾

text-decoration 屬性大多用于去掉鏈接中的下劃線(xiàn)：

實(shí)例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

親自試一試

背景色

background-color 屬性規(guī)定鏈接的背景色：

實(shí)例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

親自試一試