下面介绍如何使用CSS3设计超链接的基本样式。
动态伪类
在网页设计中，用户可以使用CSS3的动态伪类选择器定义超链接的四种状态样式。
- a:link：定义超链接的默认样式。
- a:visited：定义超链接被访问后的样式。
- a:hover：定义光标指针移过超链接时的样式。
- a:active：定义超链接被激活时的样式。
【示例1】在下面示例中，定义页面所有超链接默认为红色下划线效果，当鼠标经过时显示为绿色下划线效果，而当单击超链接时则显示为黄色下划线效果，超链接被访问过之后显示为蓝色下划线效果，演示效果如图1所示。
<style type="text/css">
a:link {color: #FF0000;/* 红色 */} /* 超链接默认样式 */
a:visited {color: #0000FF; /* 蓝色 */} /* 超链接被访问后的样式 */
a:hover {color: #00FF00; /* 绿色 */}/* 鼠标经过超链接的样式 */
a:active {color: #FFFF00; /* 黄色 */}/* 超链接被激活时的样式 */
</style>
<ul class="p1">
<li><a href="#" class="a1">首页</a></li>
<li><a href="#" class="a2">新闻</a></li>
<li><a href="#" class="a3">微博</a></li>
</ul>
<ul class="p2">
<li><a href="#" class="a1">关于</a></li>
<li><a href="#" class="a2">版权</a></li>
<li><a href="#" class="a3">友情链接</a></li>
</ul>
图1 定义超链接样式
【提示】
超链接的四种状态样式的排列顺序是固定的，一般不能随意调换。正确顺序是：link、visited、hover和active。
在下面样式中，当鼠标经过超链接时，会先执行第一行声明，但是紧接着第三行的声明会覆盖掉第一行和第二行声明的样式，所以就无法看到鼠标经过和被激活时的效果。
a.a1:hover {color: #00FF00;}
a.a1:active {color: #FFFF00;}
a.a1:link {color: #FF0000;}
a.a1:visited {color: #0000FF; }
在上面代码中，通过指定类型选择器，限定上面4个样式仅作用于包含al类的超链接中。
当然，用户可以根据需要仅定义部分状态样式。例如，当要把未访问的和已经访问的链接定义成相同的样式，则可以定义link、hover和active三种状态。
a.a1:link {color: #FF0000;}
a.a1:hover {color: #00FF00;}
a.a1:active {color: #FFFF00;}
如果仅希望超链接显示两种状态样式，可以使用a和hover来定义。其中a标签选择器定义a元素的默认显示样式，然后定义鼠标经过时的样式。
a {color: #FF0000;}
a:hover {color: #00FF00;}
但是如果页面中包含锚记对象，将会影响锚记的样式。如果定义如下的样式，则仅影响超链接未访问时的样式和鼠标经过时的样式。
a:link {color: #FF0000;}
a:hover {color: #00FF00;}
下划线样式
在设计超链接样式时，下划线一直是一个重要效果，巧妙结合下划线、边框和背景图像，可以设计出很多富有个性的样式。例如，定义下划线的色彩、下划线距离、下划线长度和对齐方式和定制双下划线等。
如果用户不喜欢超链接文本的下划线样式，可以使用CSS3的text-decoration属性进行清除。
a {/* 完全清除超链接的下划线效果 */
text-decoration:none;
}
从用户体验的角度考虑，在取消默认的下划线之后，应确保浏览者可以识别所有超链接，如加粗显示、变色、缩放、高亮背景等。也可以设计当鼠标经过时增加下划线，因为下划线具有很好的提示作用。
a:hover {/* 鼠标经过时显示下划线效果 */
text-decoration:underline;
}
下划线样式不仅仅是一条实线，可以根据需要自定义设计。主要设计思路如下：
- 借助<a>标签的底边框线来实现。
- 利用背景图像来实现，背景图像可以设计出更多精巧的下划线样式。
【示例2】下面示例设计当鼠标经过超链接文本时，显示为下划虚线、字体加粗、色彩高亮的效果，如图2所示。
<style type="text/css">
a {/* 超链接的默认样式 */
text-decoration:none; /* 清除超链接下划线 */
color:#999; /* 浅灰色文字效果 */}
a:hover {/*鼠标经过时样式 */
border-bottom:dashed 1px red; /* 鼠标经过时显示虚下划线效果 */
color:#000; /* 加重颜色显示 */
font-weight:bold; /* 加粗字体显示 */
zoom:1; /* 解决IE浏览器无法显示问题 */
}
</style>
<ul class="p1">
<li><a href="#" class="a1">首页</a></li>
<li><a href="#" class="a2">新闻</a></li>
<li><a href="#" class="a3">微博</a></li>
</ul>
【示例3】也可以使用CSS3的border-bottom属性定义超链接文本的下划线样式。下面示例定义超链接始终显示为下划线效果，并通过颜色变化来提示鼠标经过时的状态变化，效果如图3所示。
<style type="text/css">
a {/* 超链接的默认样式 */
text-decoration:none; /* 清除超链接下划线 */
border-bottom:dashed 1px red; /* 红色虚下划线效果 */
color:#666; /* 灰色字体效果 */
zoom:1; /* 解决IE浏览器无法显示问题 */
}
a:hover {/* 鼠标经过时样式 */
color:#000; /* 加重颜色显示 */
border-bottom:dashed 1px #000; /* 改变虚下划线的颜色 */
}
</style>
图2 定义下划线样式
图3 定义下划线样式
【示例4】使用CSS3的background属性可以借助背景图定义更精致、个性的下划线样式。
第1步，使用Photoshop设计一个虚线（images/dashed.psd），设计图像高度为1像素，宽度为4像素、6像素或8像素。具体宽度可根据虚线的疏密确定。
第2步，在Photoshop中，选择颜色以跳格方式进行填充，最后保存为GIF格式图像。
第3步，把示例2另存为test3.html，使用背景图代替border-bottom:dashed 1px red;声明，主要样式代码如下。
<style type="text/css">
a {/* 超链接的默认样式 */
text-decoration:none; /* 清除超链接下划线 */
color:#666; /* 灰色字体效果 */
}
a:hover {/* 鼠标经过时样式 */
color:#000; /* 加重颜色显示 */
/* 定义背景图像，定位到超链接元素的底部，并沿x轴水平平铺 */
background:url(images/dashed1.gif) left bottom repeat-x;
}
</style>
第4步，在浏览器中预览，效果如图4所示。
图4 背景图像设计的下划线样式
光标样式
在默认状态下，鼠标指针经过超链接时显示为手形。使用CSS的cursor属性可以改变这种默认效果，cursor属性定义鼠标移过对象时的指针样式，取值说明如表1所示。
表1 cursor属性取值说明
| 取值 | 说明 |
|---|---|
| auto | 基于上下文决定应该显示什么光标 |
| crosshair | 十字线光标（+） |
| default | 基于平台的缺省光标。通常渲染为一个箭头 |
| pointer | 指针光标，表示一个超链接 |
| move | 十字箭头光标，用于标示对象可被移动 |
| e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize | 表示正在移动某个边，如se-resize光标用来表示框的移动开始于东南角 |
| text | 表示可以选择文本。通常渲染为I形光标 |
| wait | 表示程序正忙，需要用户等待，通常渲染为手表或沙漏 |
| help | 光标下的对象包含有帮助内容，通常渲染为一个问号或一个气球 |
| <uri>URL | 自定义光标类型的图标路径 |
如果自定义光标样式。使用绝对或相对URL指定光标文件（后缀为.cur或者.ani）。
【示例5】下面示例在内部样式表中定义多个鼠标指针类样式，然后为表格单元格应用不同的类样式，完整代码可以参考本节示例源代码，示例演示效果如图5所示。
<style>
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.pointer { cursor: pointer; }
.progress { cursor: progress; }
.wait { cursor: wait; }
.cell { cursor: cell; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.move { cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.e-resize { cursor: e-resize; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.w-resize { cursor: w-resize; }
.ew-resize { cursor: ew-resize; }
.ns-resize { cursor: ns-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.all-scroll { cursor: all-scroll; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.url { cursor: url(skin/cursor.gif), url(skin/cursor.png), url(skin/cursor.jpg), pointer; }
</style>
图5 比较不同光标样式效果
【提示】
使用自定义图像作为光标类型，IE和Opera只支持*.cur等特定的图片格式；而Firefox、Chrome和Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。
cursor属性值可以是一个序列，当用户端无法处理第一个图标时，它会尝试处理第二个、第三个等，如果用户端无法处理任何定义的光标，它必须使用列表最后的通用光标。例如，下面样式中就定义了3个自定义动画光标文件，最后定义了一个通用光标类型。
a:hover { cursor:url('images/1.ani'), url('images/1. cur'), url('images/1.gif'), pointer;}