CSS link
CSS Link
Different links can have different styles.
Link style
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 - the link that the user has visited
a:hover - when the user mouses over the link
a:active - the link is The moment you click
##Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">這是一個鏈接</a></b></p>
<p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴(yán)格按順序才能看到效果。</p>
<p><b>注意：</b> a:active 必須在 a:hover 之后。</p>
</body>
</html>Run the program and try itWhen set to several link status styles, there are also some order 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 above link, see what state it is in.
Let’s move on to link styles with some other common ones:
Text Decoration## The #text-decoration attribute is mainly used to remove underlines in links:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必須在:link和 a:visited之后定義才有效.</p>
<p><b>注意:</b>active必須在hover之后定義是有效的.</p>
</body>
</html>Run the program to seeBackground color
The background color attribute specifies the link background color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<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">This is a link</a></b></p>
<p><b>注意:</b> hover必須在:link和 a:visited之后定義才有效.</p>
<p><b>注意:</b>active必須在hover之后定義是有效的.</p>
</body>
</html>Run the program to try itMore examples
Add different styles of hyperlinks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>將鼠標(biāo)移至鏈接上改變樣式.</p>
<p><b><a class="one" href="" target="_blank">這個鏈接改變顏色</a></b></p>
<p><b><a class="two" href="" target="_blank">這個鏈接改變字體大小</a></b></p>
<p><b><a class="three" href="" target="_blank">這個鏈接改變背景顏色</a></b></p>
<p><b><a class="four" href="" target="_blank">這個鏈接改變字體類型</a></b></p>
<p><b><a class="five" href="" target="_blank">這個鏈接改變文字修飾</a></b></p>
</body>
</html>Run the program to try itExample
Create link box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/css/" target="_blank">這是一個鏈接</a>
</body>
</html>Run the program and try it
