突出显示不同类型的链接
在许多站点上很难看出链接是指向本站点上的另一个页面，还是指向另一个站点。我们都曾经有这样的经历；单击一个链接，期望浏览器转到当前站点上的另一个页面，却被带到了别处。为了解决这个问题，许多站点在心窗口中打开外部链接。但是，这部是好办法，因为它使用户失去了控制能力，而且这些多余的窗口可能会弄连用户的桌面。
最好的解决办法是让外部链接看其来不一样，让用户自己选择是离开当前站点，还是在心窗口或新的标签页中打开这个链接。为此，可以在外部链接旁加以个小图标。wikipedia.com 等站点就是这么做的，而且对于离站链接的图标已经出现了一种约定：一格框加一个箭头（如图）
实现这种效果最容易的方法是在所有外部链接上加一个类，然后将图标作为背景图像应用。在下面的示例中，给链接设置少量的右填充，从而给图标留出空间，然后将图标作为背景图像应用于链接的右上角
.urlgoimg {
background:url(images/goimg.gif) no-repeat right top;
padding-right:10px;
}
尽管这个方法是有效的，但是他不太优雅，因为必须手工地在每个外部链接上添加类。有办法让CSS判断链接是否是外部链接吗?实际上,确实有办法,这就是使用属性选择器.
注:属性选择器允许根据特定属性是否存在或属性值来寻找元素.
这种技术的工作方式是使用[att^=val]属性选择器寻找以文本http:开头的所有链接;
a[href^="http:"] {
background:url(images/goimg.gif) no-repeat right top;
padding-right:10px;
}
这应该会突出显示所有外部链接.但是,它也会选中使用绝对URL而不时相对URL的内部链接.为了避免这个问题,需要重新设置指向自己站点的所有链接,删除它们的外部链接图标.方法是匹配指向自己域名的链接,删除外部链接图标.重新设定右填充
a[href^="http://www.ydsky.cn"],a[href^="http://ydsky.cn"] {
background-image:none;
padding-right:0;
}
大多数符合标准的浏览器都支持这种技术,而老式浏览器(比如IE6和更低版本)会忽略它.IE7不知道是不是支持.IE7已经出来很长时间了.我还没装过测试呢.有兴趣的朋友可以测试一下.
哎,我们国家China 绝大多数的人都是用的microsoft的IE浏览器.
如果愿意还可以扩展这种技术,对邮件链接也进行突出显示.在下面的的示例中,在所有的mailto 链接上添加一个小的邮件图标; 
a[href^="mailto:"] {
background: url(images/email.png) no-repeat right top;
paddinf-right:10px;
}
突出显示可下载的文档和提要
另一种烦人的常见情况时,单击一个链接,本以为会进入另一个页面,却开始下载一个PDF或Microsift Word 文档.幸运的是,CSS也可以帮出区分这些类型的链接.这要使用[att$=val]属性选择器,他寻找以特定值(比如,pdf或doc)结尾的属性;
a[href$=".pdf"] {
background: url(images/pdflink.gif) no-repeat right top;
padding-right:10px;
}
a[href$=".doc"] {
background: url(images/doclink.gif) no-repeat right top;
padding-right:10px;
}
所有这些技术都有助于改进用户在站点上的浏览体验.通过提醒用户注意离站链接或可下载的文档,让他们明确地了解在单击链接时会发生的情况,避免了不必要的取消操作和烦恼.
苦恼的是IE6和更低的版本不支持属性选择器.好在,可以通过在每个元素中添加类,使用JavaScript 和 Dom 实现相似的效果,最好的方法就是使用 Simon Willison 编写的 getElementBySelector 函数,在http://tinyurl.com/dmao4上可以找到更多细节
现在不都是在讲什么网站亲和力吗?这就是亲和力!!
以此类推,发挥你的想象,继续创造吧
本文摘自 《Css Mastery 精通Css》 有对Css有兴趣的朋友可以常联系 yedsky@msn.com
