使用标签<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 回复