超連結樣式的使用-CSS入門基礎（014）
阿新 • • 發佈：2020-12-19
今天我們分享關於超連結樣式的內容。
在瀏覽器中，超連結的樣式有預設樣式、點選後樣式、滑鼠懸停樣式和啟用樣式四種狀態。
超連結預設情況下是帶有下劃線的，看起來很醜，使用者體驗不好，前面我們說到了text-decoration:none可以去除下劃線。
表示四種訪問狀態，可以使用超連結的偽類來定義。
語法：
a:link{屬性：屬性值}a:visited{屬性：屬性值}a:hover{屬性：屬性值}a:actived{屬性：屬性值}
| 超連結偽類 | |
| 屬性 | 說明 |
| a:link | 定義a元素未訪問時的樣式 |
| a:visited | 定義a元素訪問後的樣式 |
| a:hover | 定義滑鼠懸停其上時的樣式 |
| a:actived | 定義滑鼠單擊啟用時的樣式 |
定義這四個偽類，必須按照順序進行，依次為link、visited、hover和active，否則瀏覽器無法正常顯示樣式。請大家注意此點。
示例程式碼：
<html><head><title>超連結偽類</title><style>#div1{width:200px;height:30px;line-height:30px;border: 1px solid #cccccc;text-align:center;background-color:#40b20f;}a{text-decoration:none;font-size:18px;}a:link { color:white;}a:visited { color:purple;}a:hover { color:yellow; text-decoration:underline;}a:active { color:red;}</style></head><body><divid="div1"><ahref="http://www.baidu.com">baidu</a></div></body></html>
常用超連結偽類：
初學者會有疑問，是不是每一個超連結都必須定義4中狀態樣式才可以？答案是否定的。一般情況下，我們只需要定義常用的兩種狀態，未訪問狀態和滑鼠懸停狀態。
未訪問狀態，可以直接使用a標籤代替就可以了。
語法：
a{屬性：屬性值；}a:hover{屬性：屬性值；}
示例程式碼：
<html><head><title>超連結偽類</title><style type="text/css">#d1{width:200px;height:40px;line-height:40px;border: 1px solid #cccccc;text-align:center;background-color: #40b20f;}a { text-decoration:none; color:purple;}a:hover { color:white;}</style></head><body><divid="d1"><a href="http://www.baidu.com">baidu</a></div></body></html>
按照正常人的思維來說，超連結樣式的定義順序應該是“未訪問時樣式，滑鼠懸停時樣式，點選時樣式和訪問後樣式”，但是為什麼定義超連結的樣式必須按照“未訪問時，訪問後，滑鼠懸停時，點選時”才能在瀏覽器中正常顯示。
這是原因是如此定義順序，是W3C官方組織定義的順序，要求按照標準執行就可以了。就像交通訊號燈規定，紅燈停綠燈行是一個道理，有標準就按照標準執行就可以了，不用糾結太多。
