CSS 基础教程-037 CSS设置超级链接样式

hrs 提交于 2020/01/11 - 16:28 , 周六

实例代码:

<!doctype html>
<head>
<meta charset="utf-8">
<style type="text/css">
a:link{color:red;} /* 未被访问的链接*/
a:visited{color:blue;}  /* 已被访问的链接*/
a:hover{color:black;}  /*当鼠标指针移动到链接上*/
a:active{color:green;} /*正在被点击的链接*/
</style>
</head>

<html>
<body>
<h1>这是一个链接样式实例</h1>
<a href="https:www.dwoke.com">这是一个你行网的链接</a>
<p>注释:为了使定义生效,a:hove 必须位于a:link 和 a:visited 之后 !!</p>
<p>注释:为了使定义生效,a:active 必须位于a:hover 之后!!</p>
</body>
</html>

运行效果:

css_037.png

a:link :定义未被访问的链接 ,顺序为1。

a:visited: 定义已被访问的链接, 顺序为2。

a:hover: 定义当鼠标指针移动到链接上时, 顺序为3 。

a:active: 定义正在被 点击的链接, 顺序为4。

注意:上面的鼠标动作一般要安顺执行。

 

标签