32. 样式列表和链接

序言

就设计而言，网页上的许多元素是比较“宽松”的——即使不十分精确也没有大碍。但是对于列表和链接来说就不行了——如果列表和链接没有处理好，将可能对网站的用户造成严重的影响。

尤其是链接，对于链接会有一些重要的样式要求和用户期望。蹩脚的链接设计会毁了整个网站的用户体验，因为人们不得不停下来去想到底该点击哪里。在最糟的情况下，用户甚至可能弄不清楚到底网页上哪一处才是真正的链接。

在本文中我们将会学习创建良好的列表和链接样式所需的核心技术。本文也会讨论一些避免列表和链接上易犯的重大错误的方法，并制作出跨浏览器且方便残疾用户使用的最终效果。

 

本文中用到了许多示例，可以下载列表与链接示例照着学习。

本篇文章的内容目录如下：

• 样式化列表
  • 基本项目符号和编号
  • 使用图片的自定义项目符号
  • 列表边距与填充距
    • 无序列表
    • 有序列表
    • 那么，该怎么做呢？
  • 使用列表样式位置
  • 对于定义表来说是怎样的呢？
  • 嵌套列表
  • 水平列表
  • 伪列布局
    • 老式浏览器
  • 列表结语
• 样式化链接
  • 了解链接状态
  • 浏览器的演变是如何影响用户期望的
  • 用户期望
  • 谨慎地使用颜色
  • 言归正传：CSS
    • 按照正确的顺序来样式化链接状态
    • 控制缺省值
      • 加下划线
      • 画轮廓
  • 示例：再现Netscape默认风格
    • 利用下边框来做伪下划线
    • 不依赖于颜色的样式
  • 链接图标
• 全部用起来—一个简单的导航菜单
• 总结
• 练习题
• 延伸阅读

样式化列表

首先，我会带你领略利用CSS样式化列表的基本原理，在这之前我们先来看一些稍微复杂一点的技术。

基本项目符号与数字

创建列表样式的时候要考虑的最基本的问题是你想用什么类型的项目符号或编号方式。你也可以将项目符号和编号完全删掉。就如你们在HTML列表一文中学到的那样，对于这一点有许多可用选项，对该项的设置用的是list-style-type属性。

例如，将你的站点上所有无序列表的项目符号都设置成实心方块，可以用下面的CSS：

ul li {
  list-style-type: square;
}

这将会产生如图1所示的效果：

图1：带方形项目符号的无序列表。

一些常见的列表类型如图2所示：

图2：常见列表类型。

基本列表选项示例中列举了更多可供选择的类型。

注意，项目符号和编号是由li标签所设置或继承的color属性来渲染的。如果想要使项目符号的颜色与文本颜色不一样的话，只有用图片来代替项目符号，或者在列表项中用其它元素围绕该符号（当所有列表项都是链接的时候这样会比较简单）。

用图片自定义项目符号

项目符号的标准设置对于基本的内容来说已经足够了，然而将项目符号替换为自定义图片是一种常见的设计要求。

CSS规范中包括了list-style-image属性，用以添加自定义列表图片。然而，该属性的背景图片位置选项有限，而且在有些情况下根本无法在IE中显示。所以直接在列表项上设置一张背景图片就成了非常普遍的做法。

我们假定你有一列RSS 订阅，想将项目符号改成标准的橙色RSS图标。我们为这个列表定义一个“rss”类，以便与其它列表区别开来。

<ul class="rss">

  <li><a href="http://example.com/rss.xml">News</a></li>
  <li><a href="http://example.com/rss.xml">Sport</a></li>
  <li><a href="http://example.com/rss.xml">Weather</a></li>

  <li><a href="http://example.com/rss.xml">Business</a></li>
  <li><a href="http://example.com/rss.xml">Entertainment</a></li>
  <li><a href="http://example.com/rss.xml">Funny News</a></li>

</ul>

首先我们将list-style-type设置为无，并清空边距和填充距。然后，给每个列表项直接加一张背景图片，并加上左侧填充距，将文本挪一下地方好让图片露出来，还有加下方填充距以使列表项产生间距。

.rss {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.rss li {
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

这样生成的列表将会以RSS图片取代项目符号，如图3所示：

图3：带图片项目符号的列表。

注意背景图片是以像素来实现精确定位的。你也可以使用%, em或关键字，视你要创建的布局而定。当你的设计特征包含一些可能导致某个列表项换行的内容时，应当仔细一点——如果你的背景设置为垂直居中或50％的话，看起来可能会很奇怪，就像图4那样：

图4：多行列表项项目符号图片的垂直居中演示。

通过将图片设置在列表项的顶端，就可以维持项目符号的默认风格（即项目符号位于首行）——参见图5：

图5：多行列表项项目符号图片的顶端对齐演示。

列表边距和填充距

巧用边距和填充距可以使列表看起来更精炼、更专业，但你要知道自己到底要做什么，并且要记住不同类型的列表所对应的情况是不同的。

无序列表

你可能很快就会注意到列表在其默认样式下比默认样式的段落缩进得更多——参见图6：

图6：默认风格的列表是左端缩进的。

如果想使无序列表项与其它页面内容的左对齐点相同的话，你需要设置一些样式来将缩进调节成你喜欢的样子。不同的浏览器对设置的要求也不同——有的需要清除边距，还有的需要清除填充距。因此，为了适应所有的浏览器，我们将二者都重设一下：

ul {
  margin: 0;
  padding: 0;
}

这段代码可能达不到你想要的效果，因为它会使文本左对齐，但项目符号会比文本的位置更靠左，如图7所示：

图7：项目符号的位置比文本更靠左.

因此，为了使项目符号在左侧对齐，现在你可以设置列表项的边距，来使它们排成一队：

ul {
  margin-left: 0;
  padding-left: 0;
}

ul li {
  margin-left: 1em;
}

...这时候你仍会发现在不同的浏览器上会有像素级别的差异，但页面效果已基本上达到了尽量一致——参见图8：

图8：项目符号与周围段落一同定位。

有序列表

现在你要考虑的是在应用到有序列表中时如何处理同样的问题。由于有序列表中的数字标号是根据数字最大的那个列表项目来对齐的，所以在有序列表中的应用会比较复杂一些。比如说，假如有10个列表项，十进制数字的定位会考虑到两位数“10”的列表项，如图9所示：

图9：1－9项的数字标号会在前面进行填充以便与第10项右对齐。

所以，除了使用这个语句list-style-type: decimal-leading-zero;来设置列表，没有其它任何办法来使列表项与周围文字的左对齐位置一致。该语句可以掩盖空缺部分，如图10所示：

图10：开头的0填补了1-9项的间隙。

更常见的做法是容忍这种间隙差异。然而这就意味着你的有序列表和无序列表的标记符号不能顺利地保持左对齐一致了。你只能对列表中的文本进行排列。

ul, ol {
  margin-left: 0;
  padding-left: 0;
}

li {
  margin-left: 2em;
}

你至少需要2em的左边距来满足有序和无序列表的需要。注意图11中两种列表中列表项文本的排列方式：

图11：在有序和无序列表中文本都排成一列。

那么，该怎么办呢？

大致说来，你有三种选择：

1. 忍受列表和其标记符号的默认定位
2. 对文本进行显式排列
3. 在ul和ol中设置另外一种样式。

方法无所谓“对”还是“错”，而且对一般内容中的列表一概直接使用默认样式也是一种常见的做法。

利用list-style-position

如果想使多行列表项的文本占据列表标记符号的下方位置，应当将list-style-position属性设为inside，这样就会产生图12所示的效果：

图12：列表位置“inside”设置会使文本占据标号下方的位置，而不是与缩进的文本对齐。

设置标记符号位置为内侧并不是一种特别流行的样式。默认的list-style-position是将标记符号位置设置为outside，由此产生的效果将会在本文的其它地方谈到。

对于定义列表来说是怎样的呢？

一般来说，除了设置dt样式（一般是粗体文本）以及调节定义内容的缩进之外，定义列表并没有需要特别留心的地方。

dt {
  font-weight: bold;
}

dd {
  margin-left: 2em;
}

上面的代码能使定义列表产生清晰简明的风格，如图13所示：

图13：一张样式简单的定义表。

尽管定义列表可由浮动和位置控制来调整，但由于它们比较易变所以一般还是保持简单比较好。就这样定义列表已经很令人满意了，如果再稍微加工一下，使定义项更突出，并且使定义内容的缩进更精确的话，就更好了。

嵌套列表

在HTML 列表一文中你们学习了有关嵌套式列表的知识。当你创建CSS时要注意保持设计线索明晰，以便显示嵌套列表与其上级列表之间的关系。为了达到这个目的，目前最常见的办法是缩进嵌套列表项——这其实是跨浏览器的默认设置。

如果你自己设置了列表缩进，你的基础设置的效果会层层递推。比如说，看看下面这段CSS代码：

ul, ol {
  margin-left: 0;
  padding-left: 0;
}

li {
  margin-left: 2em;
}

这一系列列表项中的每个子列表项都会从其上级列表项继承margin值，除了它们自己的缩进值之外还会在顶端另加上2em的缩进。因此顶层列表项（即没有上级项的列表项）的左边距为2em，它的子列表项会从其上级列表项继承2em的边距，然后再加上2em，总共就有4em的左边距…以此类推下去。

水平列表

对于列表来说，最普遍的一种变化就是生成水平列表——即，使列表项的呈现一个挨着一个的效果，而不是一个接着一个。这是网站导航上最常见的技巧。我们用一下导航菜单一文中的一个示例（见图14）：

图14：一个简单的列表。

我们来将它转换为水平列表，如图15所示：

图15：一个简单的水平列表。

为了达到这种效果，我们需要对列表做三件事：

1. 从<ul>标签中清空margin和padding
2. 将列表项设置为：display: inline;
3. 在列表项右侧留一些间隔，以免它们挤到一起

本例中该列表的ID为"mainmenu"，故我们可以将其作为一个上下文选择器，以确保我们只改动了我们要改的那个列表。CSS代码为：

#mainmenu {
  margin: 0;
  padding: 0;
}

#mainmenu li {
  display: inline;
  padding: 0 1em 0 0;
}

在这个简单的例子中，将列表项设置为display: inline;就可以了，记住，使用float: left;也可以达到类似的效果。在本课程中稍后你将学习更多关于浮动的知识。

伪列布局

早先我们创建了一个RSS 订阅列表。现在让我们想象这个列表已经放在你网站的侧边栏中。设计师想让这个列表以两列的形式出现，并且在整个列表外围加上一个边框，如图16所示：（参见styling-lists-example-columns.html）

图16：一张两列的信息源列表，每个项目符号都是RSS图标。

我们假设该列表位于设置宽度与边框的<div>标签中。初步的列表外观如图17所示：（参见styling-lists-example-image-bullet.html）

图17：边框内未经样式处理过的列表。

首先，RSS图标之前已经演示过了；接下来在顶端，左侧和右侧各加5px边距：

.rss {
  margin: 5px 5px 0 5px;
  padding: 0;
}

.rss li {
  list-style-type: none;
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
  display:-moz-inline-box;
}

要注意display:-moz-inline-box;是用来保证在Firefox中显示正确而添加的。

我们不用设置下边距，因为最末一个列表项是用填充距来添加适当的间距的，如图18所示：

图18：中间效果——现在间距和图标都处理好了。

现在将列表项设为display: inline-block;，其宽度设为40%，右边距为2%（也可以用像素宽度）。还要在<ul>标签中显式设置宽度为100%，以确保列表的换行和大小排列正确：

.rss {
  margin: 5px 5px 0 5px;
  padding: 0;
  width: 100%;
}

.rss li {
  display: inline-block;
  width: 40%;
  margin: 0 2% 0 0;
  list-style-type: none;
  background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
  padding: 0 0 5px 15px;
  display:-moz-inline-box;
}

在绝大多数的浏览器下，这样已经足够创建分栏效果，但在IE下你得显式设置列表项向左浮动。我们用一个条件样式来适应IE7及其之下（因为我们还不知道未来的浏览器将会怎样）的所有浏览器：

<!--[if lte IE 7]>
  <style type="text/css">

    .rss li {
      float: left;
    }
  </style>
<![endif]-->

现在我们想要的两栏效果就出来了，如图19所示：

图19：完成后的列表。

老式浏览器

如果要求你为不支持内联区块的老式浏览器设计网页，就需要使列表项在所有浏览器下都向左浮动，并使用类似清除无源标记的浮动容器一文中所描述的那种清除浮动。由于最新系列的浏览器版本都已经开始支持inline-block属性，所以除非你所面对的目标人群大多数都用firefox 2之类的老式浏览器，你应该是可以使用inline-block方法的。

列表总结

现在我们学完了列表的样式化选项和方法的核心内容。你可以以这些示例为基础，将它们结合起来，来创作大量的网页设计。由于列表经常与链接结合使用，我们下面来看看链接。

样式化链接

样式化链接带着点艺术形式的味道。现在对于链接有许多各式各样的要求，在制作美观的效果的同时全部满足这些要求是比较困难的。不过，假如你记住几个简单的规则，是可以做好的：

• 了解各种链接状态
• 不要离用户期望差得太远
• 谨慎使用颜色

如果你遵行上述原则，就可以制作出明晰又易用的链接。

了解链接状态

在样式化链接之前，你需要了解各种链接状态。一共有五种链接状态：未访问/默认，已访问，焦点，悬停和激活。

unvisited

链接在未被激活或未被访问过时的默认状态。

visited

用户已访问过的链接状态。

focus

链接获取焦点时的状态——例如当键盘用户的光标位于某个链接上时。注意：现在的IE不支持焦点状态，只能用active代替focus。

hover

用户的鼠标指针“悬停”在链接上，但还没有点击时的状态。

active

用户激活链接时的状态——从字面上讲是在用户点击链接的那一段时间。在有的浏览器下也指在新窗口或标签中打开链接时的状态。

你可以为上述每个状态指定CSS。每个状态都在告诉用户他们正在与链接进行互动。如果对focus, hover和active这几个状态存在疑问，你也可以直接以同样的方法样式化focus和hover，因为它们的功能很相似，同样的链接样式也不至于引起混淆。然后你可以为active添加一些简单的变化，比如将文本设置为斜体。必要时你可以用同样的方法样式化这三种状态。

注意，上述这些状态并不是互斥的（尽管同一个链接实际上不可能同时既是未访问的又是已访问的）——然而一个链接很可能同时处于悬停，激活和已访问的状态。

浏览器的演变是如何影响用户期望的

为了更好地理解一些常见的关于链接的用户期望，了解一点网络的历史会很有帮助。

你可能听人们提起过链接的“Netscape 默认风格”；或者说到链接应该都是蓝色和紫色的。 这让我们回想起网络的早年时期，那时浏览器设定了页面内容的颜色，而网页作者不能控制网页的渲染。

文本是黑色的；背景是灰色的；所有的链接都是加了下划线的。未访问链接是蓝色的，已访问链接是紫色的，激活的链接是红色的…这就是早期的网页。图20就是早期网页的一个图示。

图20：Mosaic浏览器的屏幕截图。

这确实有点单调乏味，然而也是和谐的——而且它设定了用户期望的基准线。特别是，至今用户们仍希望下划线文本是一个链接。他们可能并不期望所有的链接都有下划线，但是他们肯定期望下划线文本是可点击的。最好不要与这个用户期望相抵触。

一些网站仍然沿用着蓝色和紫色的链接；而在绝大多数浏览器下这些链接颜色也仍然是未经样式处理过的页面内容的默认风格。你可以一直走复古路线并继续使用这种颜色设置，而用户们在其它设置下也相当地得心应手——在一定的范围之内。

用户期望

用户对于链接的期望具有下面几条基本规则：

• 用户期望链接与其它非链接文本看起来不一样
• 当用户悬停或聚焦在链接上时，他们期望链接会有反应
• 用户期望在他们访问过某个链接过后，该链接会发生变化
• 用户期望同样功能的链接在风格上具有一致性以便他们明白该点击什么
• 用户期望下划线文本是链接——所以不要将下划线作任何其它用途

你应当时刻迎合这些基本规则，因为它们有助于你的用户迅速地识别及使用链接。你应该创建的样式是：让任何人都不用停下来去思索“到底哪里才是链接”？！

这些用户期望可以转化为简单的代码规则：

• 为所有链接状态设置样式
• 下划线只供链接使用

谨慎地使用颜色

在样式化链接时，注意连接状态的区分不能完全依赖于颜色。不是所有人都能看到同样的颜色（比如说患有色盲的人），所以你应当同时使用颜色与样式，比如各种下划线，图标或反向色。

还应当检查你的颜色选择是否有明显的对照物——利用类似色彩对比度分析器（适用于PC机和Mac机）或Opera网站可访问性工具条（二者都来自Paciello Group）之类的工具就可以轻易做到。

色彩对比度分析器（如图21）可以用拾色器选取屏幕上的前景和背景颜色，并对它们的对比度作出简单的评价。

图21：使用中的色彩对比度分析器的屏幕截图

如果四个结果都表示通过，那么色彩就成功了。要记得检查所有的链接状态。你可能需要在“hex”框中手动输入颜色值来检测焦点，悬停和激活状态的色彩对比度。

言归正传：CSS

现在你们明白了一些关于链接的基本法则，让我们来看看代码——这一部分给出了成功进行链接样式化所需的所有CSS的详细资料。

按正确的顺序来样式化链接状态

首先，要注意如果你没有在样式表中将链接状态正确排序，那么设置就会互相覆盖，链接状态就不能奏效了。链接样式必须始终遵照下面的顺序：

1. link
2. visited
3. focus
4. hover
5. active

有一个常用的助记方法"Lord Vader’s Former Handle, Anakin"可以帮助我们记住这个顺序。如果你不是星球大战的粉丝，我想你恐怕只能死记硬背，或者复制粘贴下面的代码块了！

还有一种流行的助记方法是"LoVe Fears HAte"，其中"Fears"代表"Focus"。

不同的链接状态是通过其“伪类”来实现样式化的——:link :visited :focus :hover :active——将其加在链接对象选择符a后面。所以你的CSS代码应当这样开始：

a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

如果你想为所有链接的所有状态设置一条CSS规则，可以直接对a进行设计。不过要记得首先应置入通用法则以保持连接状态的顺序。

a {}
a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

这对于将替换默认的下划线为下边框是很有用的，下边框是获得更佳视觉效果的常见手法。

控制缺省值

在默认风格下，大多数浏览器都将链接设置为带有下划线，而焦点状态的链接则带有轮廓，如图22所示：

图22：从左到右依次是：Opera 9，Firefox 2和IE 7的默认焦点样式。

如果你想将这些样式替换成别的什么，可以改变或禁用这些缺省值。

Underlining

通过设置text-decoration属性，可以实现加下划线的效果。

a {
  text-decoration: underline;
}

你可以通过将该属性设置为none来禁用下划线。

a {
  text-decoration: none;
}

即使你想保存下划线风格，你也会发现禁用text-decoration并利用border-bottom来做一个伪下划线要更容易些。我们将通过下面的例子来感受一下。

Outline轮廓

焦点轮廓是由outline属性来控制的。轮廓与边框几乎一样，但轮廓不占用页面空间，也不会在出现时导致页面重新排版（注意，IE7及其之前版本的浏览器不支持轮廓）。最简便的设置轮廓的方法是使用简写的属性：

a:focus{
  outline: thick solid #000;
}

该例的渲染效果如图23所示：

图23：粗黑轮廓线的渲染示例。

如果你不知道该怎样处理轮廓，可以直接使用浏览器默认风格。

例：再现Netscape默认风格

作为一个链接样式的简单示例，我们来再现一下Netscape默认风格的蓝色、紫色和红色链接。我们会保留下划线，但将会用斜体字来标记激活状态。为了突出本例的效果，我们将字体放大并将背景设为白色。

body {
  background: #fff;
  color: #000;
  font-size: 2em;
}

a {
  text-decoration: underline;
}

a:link{
  color: #0000CC;
}

a:visited{
  color: #6D006D;
}

a:focus{
  color: #CC0000;
}

a:hover{
  color: #CC0000;
}
 
a:active{
  color: #CC0000;
  font-style: italic;
}

这段代码的效果如图24所示：

图24：再现Netscape默认风格。

利用下边框来做伪下划线

许多网页设计者都注意到下划线有点太粗了，而且会穿过小写字母的下半部分——更确切地说，就是下划线会穿过g，j，p，q和y这些字母的下端。如图25所示：

图25：下划线会穿过小写字母的下半部分。

我们假设为你设计网站的人同意，并且乐意让下划线变得细一点儿，不要接触到文字。为了达到这个要求，我们用边框来代替下划线，如图26所示：

图26：用边框来代替下划线可以使效果更美观。

首先，禁用所有链接状态的下划线，然后将下边框与各状态下的链接颜色相匹配：

body {
  background: #fff;
  color: #000;
  font-size: 2em;
  line-height: 2em; 
}

a {
  text-decoration: none;
}

a:link{
  color: #00c;
  border-bottom: 1px solid #00c;
}

a:visited{
  color: #6D006D;
  border-bottom: 1px solid #6D006D;
}

a:focus{
  color: #c00;
  border-bottom: 1px solid #c00;
}

a:hover{
  color: #c00;
  border-bottom: 1px solid #c00;

}

a:active{
  color: #c00;
  border-bottom: 1px solid #c00;
  font-style: italic;
}

效果如图27所示：

图27：伪下划线运行效果。

如果你使用伪边框方法的话，可以设置足够的line-height来避免下划线与下一行文字相冲突。

不依赖于颜色的样式

到目前为止的例子中，五个链接状态中有四个都是完全依靠颜色来区分的，我们应该开始进行下一步，改变已访问、焦点和悬停状态的下边框。我们来将已访问状态的下边框设为点线，而悬停和激活状态的下边框设为虚线：

body {
  background: #fff;
  color: #000;
  font-size: 2em;
}

a {
  text-decoration: none;
}

a:link{
  color: #00c;
  border-bottom: 1px solid #00c;
}

a:visited{
  color: #6D006D;
  border-bottom: 1px dotted #6D006D;
}

a:focus{
  color: #c00;
  border-bottom: 1px dashed #c00;
}

a:hover{
  color: #c00;
  border-bottom: 1px dashed #c00;
}

a:active{
  color: #c00;
  border-bottom: 1px solid #c00;
  font-style: italic;
}

代码效果如图28所示：

图28：改变各链接状态下的边框样式。

如果我们将焦点和悬停作为等价的样式状态的话，这就意味着链接状态的区分是不依赖于颜色的。即使是在黑白模式下浏览这些链接，你也能辨认各种链接状态，如图29所示：

图29：即使在黑白模式下，链接状态也是可分辨的。

链接图标

有些网站用图标和标志来补充链接信息。例如，有的网站用箭头来表示某个链接是指向外部站点的；或者用一个记号来表示该链接已被访问过。

用背景图片就能很容易地实现这些效果，如图30所示：

图30：带辨识图标的链接示例。

你可以在链接标签中加入"external"类，来给外部链接加上箭头图标：

<a href="http://example.com/" class="external">external link</a>

接下来，在样式表中为该类设置背景图片——记得要添加填充距，以容纳该图片。

a.external {
  background: #fff url("icon-external.gif") center right no-repeat;
  padding-right: 30px;
}

这段代码会使该图标出现在所有状态下的所有已访问链接上。如果你想将该图标设为仅出现在未访问的外部链接上，你可以在选择符中将各种类与链接状态伪类结合起来：

a.external:link{
  background: #fff url("icon-external.gif") center right no-repeat;
  padding-right: 30px;
}

将类与状态结合使用，大大发掘了链接的潜在创新可能。此外别忘了检查你的配色，从今以后，唯一能限制你的就是创造力的问题了。

全部用起来——一个简单的导航菜单

为了阐释一种综合应用链接和列表的方法，该示例的压缩包包括了一个简单的弹出式导航菜单，如图31所示。弹出式菜单是一种非常常见的导航系统。

图31：弹出式菜单示例的屏幕截图。

总结

充分地掌握列表和链接的样式化对于网站开发员来说是非常重要的，因为处处都要用到它们。创建网站导航时二者通常都是结合使用的，而明晰的链接样式对于任何网站的易用性来说都是十分关键的。不良的链接样式可能引起大家的严重混淆，甚至会导致某些用户无法使用网站。

练习题

• 你该如何在基础链接样式中做出选择，比如说，对于有序列表你是选实心方块还是罗马数字？
• 何谓图像拼合技术，为什么你要使用它？
• 为什么说色彩对比度很重要？如何保证你的链接选用的颜色是适宜的？
• 给各个链接状态设置样式时的正确顺序是什么？

延伸阅读

• WCAG Samurai Errata for WCAG 1.0, with specific reference to Guideline 2.
  Don’t rely on colour alone.
• Type and Colour (a chapter from Building Accessible Websites, by Joe Clark)
• Juicy Studio: Highlighting Links
• Max Design—Simple, accessible external links
• Resource Center—Contrast Analyser 2.0 (Paciello Group)
• A List Apart: CSS Sprites: Image Slicing’s Kiss of Death