CSS 设置链接样式

原创 黎云锐 教程 前端 2348阅读 12 天前 举报

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