Design Code 設計密碼

設置鏈接的樣式

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

鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。

鏈接的四種狀態：

• a:link - 普通的、未被訪問的鏈接
• a:visited - 用戶已訪問的鏈接
• a:hover - 鼠標指針位於鏈接的上方
• a:active - 鏈接被點擊的時刻

實例

a:link {color:#FF0000;}         <span class="code_comment">/*未被訪問的鏈接*/</span> 
a:visited {color:#00FF00;}     <span class="code_comment">/*已 被訪問的鏈接*/</span> 
a:hover {color:#FF00FF;}     <span class="code_comment">/*鼠標指針移動到鏈接上*/</span> 
a:active {color:#0000FF;}     <span class="code_comment">/*正在被點擊的鏈接*/</span>
	

當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

• 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;}