CSS link
CSS Link
Different links can have different styles.
Link style
The link style can use any CSS properties (such as color, font, background, etc.).
Special links can have different styles, depending on their status.
The four link statuses are:
a:link - normal, unvisited link
a:visited - link that the user has visited
a:hover - when the user mouses over the link
a:active - the moment the link is clicked
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">這是一個(gè)鏈接</a></b></p>
<p><b>注釋：</b>為了使定義生效，a:hover 必須位于 a:link 和 a:visited 之后??！</p>
<p><b>注釋：</b>為了使定義生效，a:active 必須位于 a:hover 之后?。?lt;/p>
</body>
</html>When set to several link status styles, there are also some sequences Rules:
a:hover must follow a:link and a:visited
a:active must follow a:hover
Common link styles
Based on the example of the color change of the link above, see what state it is in.
Let’s move on to link styles through some other common ways:
Text-decoration
text-decoration Attribute Main Used to remove underscores from links:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">點(diǎn)擊鏈接</a></b></p>
<p><b>注意:</b> hover必須在:link和 a:visited之后定義才有效.</p>
<p><b>注意:</b>active必須在hover之后定義是有效的.</p>
</body>
</html>
