位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 7 锚点（7）

[翻译]标记语言和样式手册 Chapter 7 锚点（7）

作者：zhaozy　来源：3user.com　发布时间：2008-01-28 14:01:00　

标签：样式,标记,css,手册,锚点

鼠标经过

同样的,我们也能使用: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! (爱吃素菜吗?来点芦笋吧)

作为示例,以下是四个先前的例子,依照正确的顺序组合成完整套件结果:

起锚

在我们开始航向下个章节前,让我们回顾一下本章讨论过的内容.我们观察了在页面上建立锚点的四种不同方式,而我们认为后两种比较好.现在你已经具备足够的知识,能根据读者群的差异,为下一个项目选择合适的方法.

接着我们讨论title属性,以及它能如何提供额外的链接信息给使用者,提升易用性,视觉读者和失明的聆听者都能够获得title属性所带来的好处.

最后,我们探讨使用css的伪类为链接加上样式的方法.只要你有充足的想象力,再为四个不同链接状态加上一些声明,不必用上javascript与多余的标签也能做出丰富的互动效果.

阅读下一章：Chapter 8 再谈清单

第一页上一页 3 4 5 6

投稿

[翻译]标记语言和样式手册 Chapter 7 锚点（7）

猜你喜欢