使用标签 < 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/" http://www.softwhy.com/%22
- ; />
- <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.
来源: http://www.qdfuns.com/article/51116/e521bdc43fabe450b4de89e68718f7b3.html