7.5 使用CSS样式美化超链接

人们浏览网页时，会发现网页中超链接的样式是各种各样的，本节使用CSS样式来美化超链接。

7.5.1 定义按钮式超链接样式

本案例是将超链接设计成按钮的样式，具体的CSS样式请参考案例中的代码以及其中的注释。

【例7-6】（实例文件：ch07\Chap7.6.html）按钮式链接样式。

相关的代码实例请参考Chap7.6.html文件，在IE浏览器中运行的结果如图7-10所示。

7.5.2 定义立体超链接样式

对于链接样式，把超链接的外观设计成立体的，给人一种忍不住想点击的感觉。本案例是通过设计边框的不同颜色来实现的。

【例7-7】（实例文件：ch07\Chap7.7.html）立体链接样式。

相关的代码实例请参考Chap7.7.html文件，在IE浏览器中运行的结果如图7-11所示。

7.5.3 定义文章中的超链接样式

在浏览一些网页时，有时会出现不一样颜色字体的文字，这些文字都可以超链接。本案例在诗歌中的一些关键词上加了超链接，并美化了超链接的样式。

【例7-8】（实例文件：ch07\Chap7.8.html）定义文章中的超链接。

相关的代码实例请参考Chap7.8.html文件，在IE浏览器中运行的结果如图7-12所示。当把鼠标指针悬浮到“李清照”超链接上时，样式变化效果如图7-13所示。

7.5.4 定义图像交换超链接样式

在浏览页面时，有时当把鼠标指针悬浮到超链接上面时，会发现换了一张背景图片，和精灵图很像。本案例是给超链接设置一张大的背景，通过background-position来定位图片位置。

【例7-9】（实例文件：ch07\Chap7.9.html）图片交换链接样式。

相关的代码实例请参考Chap7.9.html文件，在IE浏览器中运行的结果如图7-14和图7-15所示。