# CSS 鏈接 **我們能夠以不同的方法為鏈接設置樣式。** ## 設置鏈接的樣式 能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。 鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。 鏈接的四種狀態： * a:link - 普通的、未被訪問的鏈接 * a:visited - 用戶已訪問的鏈接 * a:hover - 鼠標指針位于鏈接的上方 * a:active - 鏈接被點擊的時刻 ### 實例 ``` a:link {color:#FF0000;} /* 未被訪問的鏈接 */ a:visited {color:#00FF00;} /* 已被訪問的鏈接 */ a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */ a:active {color:#0000FF;} /* 正在被點擊的鏈接 */ ``` 當為鏈接的不同狀態設置樣式時，請按照以下次序規則： * a:hover 必須位于 a:link 和 a:visited 之后 * a:active 必須位于 a:hover 之后 ## 常見的鏈接樣式 在上面的例子中，鏈接根據其狀態改變顏色。 讓我們看看其他幾種常見的設置鏈接樣式的方法： ### 文本修飾 text-decoration 屬性大多用于去掉鏈接中的下劃線： #### 實例 ``` a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} ``` ### 背景色 background-color 屬性規定鏈接的背景色： #### 實例 ``` a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} ``` ## 更多實例 [向鏈接添加不同的樣式](/tiy/t.asp?f=css_link2) [高級 - 創建鏈接框](/tiy/t.asp?f=css_link_advanced)