CSS 連結
連結或超連結是從一個 Web 資源到另一個 Web 資源的連線。
使用 CSS 設定樣式連結
連結有四種不同的狀態- link，visited，active 和 hover。連結或超連結的這四種狀態可以通過 CSS 屬性使用錨元素的偽類更改成不同的樣式，具體取決於它們所處的狀態。
以下是與 HTML <a> 標記關聯的 CSS 偽類，可用於為超連結的不同狀態定義不同的樣式。
a:link- 為沒有滑鼠指標的普通或未訪問連結設定樣式。a:visited- 為使用者訪問過的連結設定樣式但沒有滑鼠指標。a:hover- 當使用者將滑鼠指標放在連結上時設定連結的樣式。a:active- 為正在單擊的連結設定樣式。
你可以指定你想要的 CSS 屬性如 color，font-family， background 等，以這些的選擇重新定義連結的風格，就像你對普通的文字處理那樣。
a:link { /* unvisited link */
color: #FF0000;
text-decoration: none;
}
a:visited { /* visited link */
color: #00FF00;
}
a:hover { /* mouse over link */
color: #FF00FF;
text-decoration: underline;
}
a:active { /* active link */
color: #0000FF;
}
你為多個連結狀態設定樣式的順序很重要，因為最後定義的內容優先於早期的 CSS 程式碼。
注： 偽類的順序應該是如下： :link ， :visited ， :hover ， :active ， :focus 為了使這些正常工作。
標準連結樣式
在所有主要的 Web 瀏覽器中，如果你沒有專門為它們設定樣式，則網頁上的連結會下劃線並使用瀏覽器的預設連結顏色。
例如，基於 Gecko 的 Web 瀏覽器（如 Firefox）中的預設連結顏色為 - 藍色表示未訪問，紫色表示已訪問，紅色表示活動連結。
設定連結的顏色
以下是演示如何設定連結顏色的示例。
a:link { /* unvisited link */
color: #FF0000;
}
a:visited { /* visited link */
color: #00FF00;
}
a:hover { /* mouse over link */
color: #FF00FF;
}
a:active { /* active link */
color: #0000FF;
}
從連結中刪除預設下劃線
text-decoration CSS 屬性一般用來從連結中刪除預設的下劃線。以下示例演示如何刪除或設定超連結的不同狀態的 text-decoration 屬性。
a:link { /* unvisited link */
color: #FF0000;
text-decoration: none;
}
a:visited { /* visited link */
color: #00FF00;
text-decoration: none;
}
a:hover { /* mouse over link */
color: #FF00FF;
text-decoration: underline;
}
a:active { /* active link */
color: #0000FF;
text-decoration: underline;
}