用CSS为外链添加图标

2009年7月22日 | 分类: | 标签:

  把博客外部链接加上小图标,让访客更加容易的分辨外部链接,而且也美观好看。这种例子像维基百科就是一个很好的例子,在外部链接旁边加一个小图标,而且对于离站链接的图标已经出现了一种约定:一个框加一个箭头。

实现这种效果最容易的方法是在所有外部链接上加一个类,然后将图标作为背景图像应用。
.external{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px
}


如上面的示例中,给链接设置少量的右填充,从而给图标留出空间,然后将图标作为背景图像应用于右上角。尽管这个方法是有效的,但必须手工地在每个外部链接上添加类,有办法让 CSS 判断链接是否是外部链接吗?确实有办法,我们可以用属性选择器。

CSS3 扩展了属性选择器的功能,提供了子字符串匹配属性选择器,这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接:
a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

这应该会突出显示所有的外部链接,但也会选中使用绝对 URL 而不是相对 URL 的内部链接,为了避免这个问题,需要重新设置指向自己站点的所有链接。
a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none;
padding-right:0;
}

大多数符合标准的浏览器都支持这种技术,而老式浏览器(比如 IE6 和更低版本)会忽略它。
当然,我们还可以扩展这种技术,如对邮件也进行突出显示。
a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top;
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接,如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器,它寻找以特定值结尾的属性:
a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top;
padding-right:10px;
}a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right top;
padding-right:10px;
}

类似的还有 RSS(feec) 链接:
a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top;
padding-right:10px;
}

本博客的写法:
/* external links START */
.post .content a[href^="http:"]{
background: url(external.png) no-repeat right;
padding-right:12px;
}
.post .content a[href^="http://hillboy.org"],.post .content a[href^="http://hillboy.org"],.post .content a[href^="http://picasaweb.google.com"]{
background-image:none;
padding-right:0;
}
.post .content a[href$=".jpg"],.post .content a[href$=".gif"]{
background-image:none;
padding-right:0;
}
/* external links END */

这些技术都有助于改进用户在站点上的浏览体验,让用户明确地了解单击链接时会发生的情况,避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果,而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果,就必须用到 JavaScript 和 DOM 。
以上内容转自:用 CSS 突出显示不同类型的链接,区分网站内链和外链

声明: 本文遵循 BY-NC-SA 3.0 协议. 转载请注明转自: 用CSS为外链添加图标
支持本博发展,请勿过滤广告。

1 trackbacks

XHTML: 您可以使用这些标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。请务必注意user必须和评论者名相匹配(大小写一致)。