去过哪里?

别忘了加上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与多余的标签也能做出丰富的互动效果.

是时候收锚扬帆了,让我们...抱歉,回归正题.

下文：Chapter 8 再谈清单

经典论坛交流：
http://bbs.blueidea.com/thread-2824215-1-1.html

本文链接：http://www.blueidea.com/tech/web/2008/5883.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 标记语言——锚点 [4] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。