前面的 HTML 教程圖片與超鏈接里，講過鏈接的標簽，現(xiàn)在來看看對于鏈接有哪些樣式。

鏈接的狀態(tài)

鏈接不同于普通文字，它可以點擊，而點擊用到了鼠標。

結合可點擊和鼠標是否在鏈接上面，鏈接分成以下四個狀態(tài)：

• a:link - 正常的鏈接，也就是沒有被用戶訪問過的鏈接狀態(tài)。

• a:visited - 已經(jīng)被用戶訪問過的鏈接，即點擊過的鏈接狀態(tài)。

• a:hover - 用戶正要訪問（點擊），當用戶鼠標放在鏈接上時的鏈接狀態(tài)。

• a:active - 用戶正要訪問（點擊），當用戶點擊鏈接那一刻的鏈接狀態(tài)。

a:link {   color: black; }  a:visited {   color: red; }  a:hover {   color: orange; }  a:active {   color: green; } 

<p><a href="../../html/sample-code/2-2-1.html">IT從業(yè)指北公眾號 (link)</a></p> <p>   <a href="../../html/sample-code/2-3-1.html">IT從業(yè)指北公眾號 (visited)</a> </p> <p><a href="../../html/sample-code/2-4-1.html">IT從業(yè)指北公眾號 (hover)</a></p> <p><a href="../../html/sample-code/2-5-1.html">IT從業(yè)指北公眾號 (active)</a></p> 

當為鏈接定義以上不同狀態(tài)時，要遵守順序，即：

• a:hover 必須出現(xiàn)在 a:link 和 a:visited 的后面。

• a:active 必須出現(xiàn)在 a:hover 的后面。

有一個幫助記憶的方法，記住愛（Love）恨（hate）的英文單詞，上述的狀態(tài)首字母落在這兩個單詞中間。

L(link)OV(visited)E 和 H(hover)A(active)TE

鏈接樣式

上面展示了修改不同狀態(tài)下的鏈接顏色，除顏色，還有其它樣式可以修改。

下劃線

默認情況下，鏈接包含下劃線，如果不想要下劃線，可以去掉。

a:link {   text-decoration: none; } 

text-decoration 默認值是 underline。

背景顏色

鏈接的背景同樣可以改變，使用 background-color 就可以。

a:link {   background-color: yellow; } 

可以為四種不同狀態(tài)下的鏈接指定不同的背景色。

鏈接實例

通過上述的樣式的樣式組合，可以實現(xiàn)專業(yè)又好看的鏈接樣式，以下示例供參考。

div a:link {   background-color: green;   color: white;   padding: 10px;   border: 1px solid green;   text-decoration: none; }  div a:visited {   background-color: white;   color: blue;   border: 1px solid blue; }  div a:hover {   border: 1px solid orange;   background-color: white;   color: orange; }  div a:active {   color: green;   background-color: white;   border: 1px solid green; } 

<div>   <a href="../../html/sample-code/2-10-1.html">IT從業(yè)指北公眾號</a> </div> 

效果如下：

怎么樣，看起來還不錯吧？

總結

• ?? 在 CSS 中鏈接有四種狀態(tài)的樣式可以設置，它們分別是 link, visited, hover 和 active。

• ?? 當為同一個鏈接指定不同的狀態(tài)樣式時，要遵循上述順序。

• ?? 通過不同的樣式組合，可以改變鏈接樣式滿足各種需求。