4、CSS 链接
我們能夠以不同的方法為鏈接設置樣式。
1、設置鏈接的樣式
能夠設置鏈接樣式的 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;} /* 正在被點擊的鏈接 */當為鏈接的不同狀態設置樣式時，請按照以下次序規則：
<!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /* 未被訪問的鏈接 */ a:visited {color:#00FF00;} /* 已被訪問的鏈接 */ a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */ a:active {color:#0000FF;} /* 正在被點擊的鏈接 */ </style> </head><body> <p><b><a href="/index.html" target="_blank">這是一個鏈接</a></b></p> <p><b>注釋：</b>為了使定義生效，a:hover 必須位于 a:link 和 a:visited 之后！！</p> <p><b>注釋：</b>為了使定義生效，a:active 必須位于 a:hover 之后！！</p> </body> </html>- a:hover 必須位于 a:link 和 a:visited 之后
- a:active 必須位于 a:hover 之后
2、常見的鏈接樣式
在上面的例子中，鏈接根據其狀態改變顏色。
讓我們看看其他幾種常見的設置鏈接樣式的方法：
- 文本修飾
text-decoration 屬性大多用于去掉鏈接中的下劃線：
實例
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} <!DOCTYPE html> <html> <head> <style> a:link {text-decoration:none;} /* 未被訪問的鏈接 */ a:visited {text-decoration:none;} /* 已被訪問的鏈接 */ a:hover {text-decoration:underline;} /* 鼠標指針移動到鏈接上 */ a:active {text-decoration:underline;} /* 正在被點擊的鏈接 */ </style> </head><body> <p><b><a href="/index.html" target="_blank">這是一個鏈接</a></b></p> <p><b>注釋：</b>為了使定義生效，a:hover 必須位于 a:link 和 a:visited 之后！！</p> <p><b>注釋：</b>為了使定義生效，a:active 必須位于 a:hover 之后！！</p> </body> </html>- 背景色
background-color 屬性規定鏈接的背景色：
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}實例
總結
