App下載

HTML怎么設(shè)置超鏈接顏色？設(shè)置超鏈接顏色總結(jié)

猿友 2021-05-24 17:53:14 瀏覽數(shù) (21668)
反饋

有細心的小伙伴可能會發(fā)現(xiàn)，我們在瀏覽網(wǎng)頁時，不同狀態(tài)下的鏈接顯示的顏色是不一樣的。比如百度，未訪問時鏈接未深藍色，鼠標滑到該鏈接時則顯示為淺藍色，當我點擊該鏈接后，鏈接則變?yōu)樽仙?。那?HTML 怎么設(shè)置超鏈接顏色？這篇文章告訴你。

定義鏈接樣式的四個偽類：

  • ：link，定義正常的鏈接樣式；
  • ：visited，定義已訪問過的鏈接樣式；
  • ：hover，定義鼠標懸浮在鏈接上時的樣式；
  • ：active，定義鼠標點擊鏈接時的樣式。

讓我們來看下具體如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML設(shè)置超鏈接顏色- 編程獅(w3cschool.cn)</title>
	<style type="text/css">
		a:link {
			color:pink;
			text-decoration:none;
		}
		a:visited {
			color:blue;
			text-decoration:none;
		}
		a:hover {
			color:red;
			text-decoration:none;
		}
		a:active {
			color:black;
			text-decoration:none;
		}
	</style>
</head>
<body>
<a href="http://m.hgci.cn/" target="_blank">w3cschool-編程獅</a>
</body>
</html>

在該例子中，原本鏈接顯示為粉紅色（pink），當鼠標覆蓋在鏈接上時鏈接顯示為紅色（red），鏈接點擊時為黑色（black），而訪問過后的鏈接為藍色。

需要注意的是，我們在定義時，需要主要他們的順序，如果沒有按照特定的順序來設(shè)置，可能會使定義失效。定義鏈接的順序為：

link、visited、hover、active。可以記為 LoVe HAte 原則。

對該功能感興趣的同學們，可以參考上述代碼自己進行練習。

以上就是文章“HTML 怎么設(shè)置超鏈接顏色？設(shè)置超鏈接顏色總結(jié)”的全部內(nèi)容。想要學習更多 HTML 知識請前往 w3cschool。

推薦課程：HTML 入門微課、web 入門微課

HTML

1 人點贊