CSS 设置超链接格式

超链接是万维网的基础，是它让整个Web成为一个整体，并获得生命。可以毫不夸张地说，整个Internet就是由超链接连接而成的。word也不例外，它也需要通过超链接实现各章节之间的互联，甚至链接到本文档之外的资源。

在前面，已经介绍了链接的动态样式和根据文件类型显示相应文件类型的图标，来提高网站的可访问性。本节主要介绍如何区分一个链接是指向本站点的另一个页面，还是指向另一个站点上的页面，并为指向站外的链接应用不同的样式。

对于站外链接，一个惯用的方法，就是在链接旁边添加一个小图标，让外部链接看起来不一样。而外部链接的小图标，大家已经约定俗成，基本都使用一个框加一个向外的箭头。这种图标随处可见，百度百科的外部链接都使用了这个图标。放大后的图标如图 11‑16 所示：

图11-16 外部链接小图标

要在一个链接后面添加这个图标很简单，只需把这个小图标作为外部链接的背景图像，放在链接文本的右侧，并让它不平铺即可。同时，为了防止链接文本覆盖背景图像，还要为链接设置适当的右内边距，为图片腾出空间。

重点不是如何添加小图标，而是如何判断一个链接是外部链接，还是内部链接。幸运的是，CSS3 的属性选择器能够解决这个问题。可以使用 E[ attribute ^= val ] 属性选择器，来寻找所有以 http: 开头的链接，在右侧添加外部链接的小图标。

1. a[href ^= "http://"] {
2.    padding-right: 20px;
3.    background: url(img/external.gif) no-repeat right top;
4. }

但是，对于指向本站的链接，即便是以 http: 开头，也不能添加外部链接图标。仍然使用属性选择器，来删除外部链接图标，并重置右侧的内边距。

1. a[href ^= "http://www.waibo"],
2. a[href ^= "http://www.www.waibo"] {
3.    padding-right: 0;
4.    background-image: none;
5. }

现在，在页面上定义链接后，浏览器便自动区分站内链接和站外链接，并自动在站外链接的旁边添加站外链接小图标。

1. <a href="http://www.www.waibo/">歪脖网</a>
2. <a href="http://www.yangxin.wang/">养心网</a>

上述代码的运行结果如图 11‑17 所示：

图11-17 站内链接和站外链接使用不同样式

同理，也可以使用同样的方法，对邮件链接、FTP链接、javascript链接等进行突出显示，让用户清楚地了解到点击链接后会发生的情况，来避免不必要的回溯，提高用户体验。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。