带来一篇css技能之PDF、ZIP、DOC链接的标注

样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
翻译：http://www.176so.com/past/2007/3/17/pdf_links_labeling/
CSS技能之PDF、ZIP、DOC链接的标注
偶然候我们但愿能明白的用小图标来标明我们的超链接的范例。是一个zip文档仍是一个pdf文件。如许会见者就晓得他所要点击的这个链接是下载而不是翻开另外一个页面了。假如一切的人都利用IE7大概FF的话。我们完整可使用[att$=val]属性选择器，寻觅以特定值（好比.zip和.doc）开头的属性。
a[href$=".pdf"]{padding-right:19px;background:url(pdf.gif)no-repeat100%.5em;}
a[href$=".zip"]{padding-right:17px;background:url(zip.gif)no-repeat100%.5em;}
不幸的是IE6以下扫瞄器不撑持属性选择器。幸亏，能够经由过程在每一个元素中增加类，利用JavaScript和DOM完成类似的效果。
上面给出了一个办理举措:
functionfileLinks(){
varfileLink;
if(document.getElementsByTagName(a)){
for(vari=0;(fileLink=document.getElementsByTagName(a)[i]);i++){
if(fileLink.href.indexOf(.pdf)!=-1){
fileLink.setAttribute(target,_blank);
fileLink.className=pdfLink;
}
if(fileLink.href.indexOf(.doc)!=-1){
fileLink.setAttribute(target,_blank);
fileLink.className=docLink;
}
if(fileLink.href.indexOf(.zip)!=-1){
fileLink.setAttribute(target,_blank);
fileLink.className=zipLink;
}
}
}
}
window.onload=function(){
fileLinks();
}
固然，你必要在你的css文件中，增添这几个css类：
.pdfLink{padding-right:19px;background:url(pdf.gif)no-repeat100%.5em;}
.docLink{padding-right:19px;background:url(doc.gif)no-repeat100%.5em;}
.zipLink{padding-right:17px;background:url(zip.gif)no-repeat100%.5em;}
最初一点倡议，你的小图标不要太过夺目，这会分离扫瞄者的注重力。


不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。