CSS 設定連結樣式

admin發表於2018-10-07
CSS

連結自然大家很熟悉，通過<a>標籤建立。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼
<a href="www.softwhy.com">螞蟻部落</a>

使用標籤<a>定義了一個超連結，點選其中的文字可以跳轉到螞蟻部落首頁。

連結是HTML中最為重要的元素之一，猶如一個超時空飛船，實現了頁面之間或者站點之間的跳轉。

所以對於超連結樣式的設定也是比較重要的操作，可以提示瀏覽者當前連結處於一個什麼狀態，比如是否處於點選狀態，或者是否已經訪問過等，下面通過程式碼例項分別做一下介紹。

一.超連結四種狀態：

（1）.a:link：設定連結的初始樣式，也就是未被點選的樣式。

（2）.a:visited：設定連結被點選後的樣式。

（3）.a:hover：設定當滑鼠懸浮於連結之上的樣式。

（4）.a:active：設定當連結被啟用時的狀態，也就是滑鼠按鍵在連結上按下且未鬆開時的狀態。

二.程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a:link {
  text-decoration:none;
  color:red;
}
a:visited {
  text-decoration:none;
  color:blue;
}
a:hover {
  text-decoration:underline;
  color:green;
}
a:active {
  text-decoration:underline;
  color:deeppink;
}
</style>
</head>
<body>
<a href="#">本站url地址是www.softwhy.com</a>
</body>
</html>

上面程式碼建立一個連結，並通過CSS程式碼設定了連結的四個狀態。

狀態分析如下：

（1）.當連結從未點選狀態下，字型顏色為紅色。

（2）.當連結被點選後，字型顏色為藍色。

（3）.當滑鼠懸浮於連結之上，字型顏色為綠色，並帶有中劃線。

（4）.當滑鼠按於連結之上且未鬆開的時候，字型顏色為粉紅色。

三.順序的重要性：

連結的這四個狀態的順序非常重要，如果順序不對，那麼就可能無法獲取預期效果。

正確順序如下：

（1）.link。

（2）.visited。

（3）.hover。

（4）.active。

對於初學者可能一開始不容易記憶，下面分享一個筆者記憶的技巧。

LV是一個著名的奢侈品牌，那麼程式碼順序就是LVHA（LV哈），比較驚訝的樣子。

關於順序的原理可以參閱CSS 連結偽類選擇器順序原理一章節。

相關文章