CSS設定連線<a>的樣式

admin發表於2018-07-12
CSS

預設情況下，連結在沒有點選和點選後的樣式有所差別的，可以有效的區分連結是否已經被點選過。

下面介紹一下如何設定連線<a>的樣式。

一.樣式屬性:

（1）.a:link：定義連結點選前的樣式。

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

（3）.a:active：定義連結被啟用時的樣式，也就是滑鼠按下時的樣式。

（4）.a:hover：定義滑鼠懸浮於連線上時的樣式。

二.程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:150px;
  margin:0px auto;
}
a:link{color:red}
a:visited{color:blue}
a:hover{color:green}
a:active{color:yellow}
</style> 
</head>
<body>
<div id="thediv"><a href="#">螞蟻部落</a></div>
</body>
</html>

以上程式碼可以設定連線四種狀態的樣式。

特別說明：設定樣式屬性的四個選擇器順序不能夠改變。

相關文章