使用标签<a>定义了一个超链接，点击其中的文本可以跳转到蚂蚁部落首页。
链接是HTML中最为重要的元素之一，犹如一个超时空飞船，实现了页面之间或者站点之间的跳转。
所以对于超链接样式的设置也是比较重要的操作，可以提示浏览者当前链接处于一个什么状态，比如是否处于点击状态，或者是否已经访问过等，下面通过代码实例分别做一下介绍。
一.超链接四种状态：
（1）.a:link：设置链接的初始样式，也就是未被点击的样式。
（2）.a:visited：设置链接被点击后的样式。
（3）.a:hover：设置当鼠标悬浮于链接之上的样式。
（4）.a:active：设置当链接被激活时的状态，也就是鼠标按键在链接上按下且未松开时的状态。
二.代码实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/"; />
<title></title>
<style type="text/css">
a:link {
text-decoration:none;
color:red;
}
a:visited {
text-decoration:none;
color:blue;
}
a:hover {
text-decoration:underline;
color:green;
}
a:active {
text-decoration:underline;
color:deeppink;
}
</style>
</head>
<body>
<a href="#">
</body>
</html>
上面代码创建一个链接，并通过CSS代码设置了链接的四个状态。
状态分析如下：
（1）.当链接从未点击状态下，字体颜色为红色。
（2）.当链接被点击后，字体颜色为蓝色。
（3）.当鼠标悬浮于链接之上，字体颜色为绿色，并带有中划线。
（4）.当鼠标按于链接之上且未松开的时候，字体颜色为粉红色。
三.顺序的重要性：
链接的这四个状态的顺序非常重要，如果顺序不对，那么就可能无法获取预期效果。
正确顺序如下：
（1）.link。
（2）.visited。
（3）.hover。
（4）.active。
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复