去过哪里?
别忘了加上a:visited声明,帮助使用者看出他们曾经去过的地方.所有一般CSS规则都能用在伪类上,为浏览过的链接指定独特的样式:颜色,边框,背景等等.
CSS规则就像这样:
a:visited {
color: purple;
}
上面这段声明能将访问过的链接的颜色改为紫色,最小限度的提醒使用者:他们已经看过这个链接了,这种效果十分重要就算只像这个例子做一点小改动也行.
鼠标经过
同样的,我们也能使用:hover这个伪类在鼠标滑过链接时加上威力无穷的效果.可以使颜色改变,加上边线,背景颜色或图片等等,有无穷的可能性.
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
a:hover {
color: blue;
border-bottom: 1px solid blue;
}
上面两个声明会把连接变成绿色,加上点状边线,但是在鼠标移过链接时,链接会变成蓝色,边线也会变成实线(同时也变成蓝色).
这是个简单的示例,只要试着组合不同的CSS规则应用在连接,鼠标移动效果上,你不必用上javascript或是额外的标签也能设计出轻巧的鼠标滑过效果.
启动状态
:active 这个伪类代表的是鼠标按键按下时链接的样式.你能在此使用相同的规则:改变颜色,文字装饰,背景等等,举例来说,如果你让链接在点击时变成红色,就能以视觉提醒使用者:他们选择前往这个特定的页面,而且也实际点击了这个链接.
以下的声明能够办到这件事:
a:active {
color: red;
}
令人又爱又恨的链接(LoVe/HAte)
为了让之前提到的四个伪类能正常运作,排列的顺序变得十分重要,以防他们的设定值彼此覆盖.
LoVe / HAte 是个记住正确声明顺序的口诀(http://www.mezzoblue.com/css/cribsheet/):
a:link (L)
a:visited (V)
a:hover (H)
a:active (A)
当然,你可以自创口诀,只要能帮助记忆就行, Love Vegetables? Have Asparagus! (爱吃素菜吗?来点芦笋吧)
作为示例,以下是四个先前的例子,依照正确的顺序组合成完整套件结果:
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
a:visited {
color: purple;
}
a:hover {
color: blue;
border-bottom: 1px solid blue;
}
a:active {
color: red;
}
起锚
在我们开始航向下个章节前,让我们回顾一下本章讨论过的内容.我们观察了在页面上建立锚点的四种不同方式,而我们认为后两种比较好.现在你已经具备足够的知识,能根据读者群的差异,为下一个项目选择合适的方法.
接着我们讨论title属性,以及它能如何提供额外的链接信息给使用者,提升易用性,视觉读者和失明的聆听者都能够获得title属性所带来的好处.
最后,我们探讨使用css的伪类为链接加上样式的方法.只要你有充足的想象力,再为四个不同链接状态加上一些声明,不必用上javascript与多余的标签也能做出丰富的互动效果.
是时候收锚扬帆了,让我们...抱歉,回归正题.
经典论坛交流：
http://bbs.blueidea.com/thread-2824215-1-1.html
出处：蓝色理想
责任编辑：bluehearts
上一页 标记语言——锚点 [4] 下一页
联系客服
