CSS link (link)
CSS Links
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 - 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中文网(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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>Run Instance»
Click "Run Instance" Button to view online instances
When set to several link status styles, there are also some order rules:
a:hover must be followed by a:link and a:visited is followed by
a:active must be followed by a:hover
Common link styles
According to the example of the color change of the above link, see what state it is in.
Let’s move on to link styling through some other common ways:
Text-decoration
The text-decoration attribute is mainly used to remove underlines from links:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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="http://www.php.cn/css/css-css_tutorial.html" 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 instance»
Click the "Run instance" button to view the online instance
Background Color
The background-color attribute specifies the link background color:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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="http://www.php.cn/css/css-css_tutorial.html" 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>Running instance»
Click the "Run Example" button to view online examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>Run Example»Click the "Run Example" button to view the online example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This is a link</a>
</body>
</html>Run Instance»Click the "Run Instance" button to view the online instance
