9 设计超链接样式

9 设计超链接样式 在HTML定义的众多元素中，img和a都是比较特殊的却又非常重要的元素。 a元素是互联网三大核心技术的超链接技术具体应用。它犹如可以自由拉伸、变形和复制的桥梁，把互联网上无数个孤立的数据岛（网页或网站）串联在一起，编织成一个无形的蜘蛛网。当然，a元素内部封装了实现这种桥梁功能的底层机制和逻辑代码，这些被封装的技术对于普通读者来说只能够是一个谜，如href（ hyper reference，，用来指定URL，即桥的另一端，它也是互联网的另一个核心技术）、target（定义行人过桥的方式，即如何打开另一个页面）等。本章将重点研究超链接样式的基本规律和各种设计技巧，以及如何更精确、更人性的控制超链接，以提高用户的操作体验。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.1 超链接基本样式 9.1.1 简单认识超链接 • 根据路径（URL）不同，网页中的超链接一般可以分为3种类型： • 内部链接 • 锚点链接 • 外部链接 • 例如：http://www.css8.cn/web2_nav/index.html，其中http是传输协议，www.css8.cn表示网站地址，后面跟随字符是站点相对地址。 • http://www.css8.cn/navi/index.html#anchor，就表示跳转到index.htm页面中标记为anchor的锚点位置。 • 另外，如果根据使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等，具体使用这里就不再展开介绍了。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.1 超链接基本样式 9.1.2 伪类和伪对象 • 所谓伪类就是根据一定的特征对元素进行分类，而不根据元素的名称、属性或内容。原则上特征是不能够根据HTML文档的结构（DOM）推断得到的。在直观上来分析，伪类可以是动态的，当用户与HTML文档进行交互时，一个元素可以获取或者失去某个伪类（特定的特征）。 • 伪对象与伪类都是抽象的事务，但是伪对象是页面中可以直观的具体内容或区域，只不过这个具体内容或区域所限定的内容是不固定的。 • 在CSS中，伪类和伪对象是以冒号为前缀的特定名词，它们表示一类选择器。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.1 超链接基本样式 9.1.2 伪类和伪对象《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.1 超链接基本样式 9.1.2 伪类和伪对象 • 比较实用的是伪类中的:link、:hover、:active、:visited和:focus，以及伪对象中的:first-letter和:first-line。其中IE6及其以下版本浏览器不支持:hover伪类在非a元素上的应用。 • 示例：9-1、2、3、4.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.1 超链接基本样式 9.1.3 超链接基本样式 • 在伪类和伪对象中，与超链接相关的4个伪类选择器应用比较广泛，且不同浏览器都完成支持。这几个伪类定义了超链接的四种不同状态。简单说明如下： • a:link：定义超链接的默认样式。 • a:visited：定义超链接被访问过之后的样式。 • a:hover hover：定义鼠标经过超链接时的样式。 • a:active：定义超链接被激活时的样式，如鼠标单击之后，到鼠标被松开之间的这段时间的样式。 • 示例：9-5~9.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.1 超链接基本样式 9.1.3 超链接基本样式 • 在为超链接定义样式时，请注意如下几个问题： • 第一，超链接的四种状态样式的排列顺序是有要求的，一般不能随意调换。先后顺序应该是：link、visited、hover和active，快速记忆就是：L-V-H-A，意译就是LoVe & Hate（爱与恨）。 • 第二，超链接的四种状态并非都必须要定义，你可以定义其中的两个或三个。当要把未访问的和已经访问的链接定义成相同的样式，则可以link、hover和active三种状态。 • 示例：9-10~12.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 • 在网页中，超链接字体默认显示为蓝色，文字下面有一条下划线，当鼠标指针移到超链接上时，鼠标指针就会变成手形。如果超链接已被访问，那么这个超链接的文本颜色就会发生改变，默认显示为紫色，这就是经典的超链接默认样式。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.1 下划线样式 • a {/* 完全清除超链接的下划线效果 */ • text-decoration:none; • } • 下划线的效果当然不仅仅是一条实线，你可以根据需要进行订制。订制的主要思路如下： • 一方面可以借助超链接元素a的底部边框线来实现。 • 另一方面可以利用背景图像来实现，而背景图像可以设计出更多精巧的下划线样式。 • 示例：9-14~17.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.2 立体样式 • 立体样式的设计核心是：借助边框样式的变化（主要是颜色的深浅变化）来模拟一种凸凹变化的过程，即营造一种立体变化效果。 • 示例：9-18、19.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.2 立体样式 • 经过上面示例练习，我们不妨总结一下设计立体效果的一般方法： • 第一，利用边框线的颜色变化来制造视觉错觉。可以把右边框和底部边框结合，把顶部边框和左边框结合，利用明暗色彩的搭配来设计立体变化效果。 • 第二，利用超链接背景色的变化来营造凸凹变化的效果。超链接的背景色可以设置相对深色效果，以营造凸起效果，当鼠标移过时，再定义浅色背景来营造凹下效果。 • 第三，利用环境色、字体颜色（前景色）来烘托这种立体变化过程。《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.3 动态样式 • 动态样式的设计核心是：借助大小和位置来产生一种动态感。由于a元素是行内元素，无法定义超链接的宽和高，因此需要定义a元素浮动显示、块状显示、或绝对定位显示。如果希望多个超链接并列显示，则只能够使用浮动显示，或者绝对定位显示。当然仅希望超链接字体大小发生变化，则保持默认的行内显示即可。 • 示例：9-20、21.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.4 图像样式 • 图像样式的设计核心是：利用相同大小但不同效果的背景图像进行轮换。因此，图像样式的关键是背景图像的设计，以及几种不同效果的背景图像是否能够过渡自然、切换吻合。 • 示例：9-22、23.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.5 鼠标样式 • cursor属性，专门用定义鼠标经过元素时的样式。 • 示例：9-24.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.5 鼠标样式《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.5 鼠标样式 • 使用cursor属性应该注意几个问题： • 第一，上面所列都是W3C推荐的标准光标类型，但是IE也自定义了不少专有属性值。 • <style type="text/css"> • P {/* 段落样式 */ • cursor:pointer; /* 鼠标经过时手形样式 */ • cursor:hand; /* 兼容IE6以下版本浏览器 */ • } • </style> • 第二，读者可以自定义光标样式。使用绝对或相对URL指定光标文件（后缀为.cur或者.ani）。 • 示例： 9-25.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9.2 设计超链接样式 9.2.5 鼠标样式 • cursor属性可以定义一个URL列表，这犹如定义字体类型一样，当用户端无法处理一系列光标中的第一个，那么它应尝试处理第二个、第三个等，如果用户端无法处理任何定义的光标，它必须使用列表最后的通用光标。 • 示例：9-26.html 《网页制作与网站开发从入门到精通》配套视频样吧视频教室（www.css8.cn）

9 设计 超链接 样式