CSS Links(鏈接)

鏈接或超鏈接是從一個(gè)Web資源頁(yè)面連接到另一個(gè)Web資源頁(yè)面。

CSS樣式鏈接

鏈接有四種不同的狀態(tài)- link, visited, active 和 hover。鏈接或超鏈接的這四個(gè)狀態(tài)可以使用錨元素的偽類通過(guò)CSS屬性設(shè)置不同的樣式，具體取決于它們所處的狀態(tài)。

這是與HTML <a>標(biāo)記關(guān)聯(lián)的CSS偽類，可用于為超鏈接的不同狀態(tài)定義不同的樣式。

• a：link —為沒(méi)有鼠標(biāo)指針的普通或未訪問(wèn)鏈接設(shè)置樣式。

• a：visited-設(shè)置用戶訪問(wèn)過(guò)但沒(méi)有鼠標(biāo)指針的鏈接的樣式。

• a：hover —當(dāng)用戶將鼠標(biāo)指針?lè)旁阪溄由蠒r(shí)，設(shè)置鏈接的樣式。

• a：active-為正在單擊的鏈接設(shè)置樣式。

您可以指定你想CSS屬性,例如：color，font-family，background等，以這些的選擇重新定義鏈接的風(fēng)格，就像你用普通的文本那樣。

a:link {    /* 未被訪問(wèn)的鏈接   */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* 被訪問(wèn)過(guò)的鏈接 */
    color: #00FF00;
}
a:hover {    /* 鼠標(biāo)移到鏈接上 */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* 正在點(diǎn)擊的鏈接  */
    color: #0000FF;
}

為多個(gè)鏈接狀態(tài)設(shè)置樣式的順序很重要，因?yàn)樽詈蠖x的優(yōu)先級(jí)高于先前的CSS代碼。

標(biāo)準(zhǔn)鏈接樣式

在所有主流的Web瀏覽器中，如果未專門設(shè)置樣式，則網(wǎng)頁(yè)上的鏈接帶有下劃線，并使用瀏覽器的默認(rèn)鏈接顏色。

例如，基于Gecko的Web瀏覽器（如Firefox）的默認(rèn)鏈接顏色為- 藍(lán)色表示未訪問(wèn)，紫色表示已訪問(wèn)，紅色表示正在點(diǎn)擊的鏈接。

設(shè)置鏈接的顏色

以下是演示如何設(shè)置鏈接顏色的示例。

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

從鏈接中刪除默認(rèn)下劃線

text-decoration CSS屬性一般用來(lái)從鏈接中刪除默認(rèn)的下劃線。下面的示例演示，如何刪除或設(shè)置text-decoration超鏈接的不同狀態(tài)的屬性。

a:link {    /* 未被訪問(wèn)的鏈接 */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* 被訪問(wèn)過(guò)的鏈接 */
    color: #00FF00;
    text-decoration: none;
}
a:hover {    /* 鼠標(biāo)移到鏈接上 */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* 正在點(diǎn)擊的鏈接 */
    color: #0000FF;
    text-decoration: underline;
}