“链接”对于一个Web制作人员来说一点都不会陌生，我们在来时的制作中，我们碰到过的“链接”有很多种，比如说文字链接、图片链接，有时甚至是图片和文字的混合链接。而这些链接是Web页面中最佳功能之一，那如何让你的链接在Web页面中尽可能的方便使用，有些就需要一些小技巧来帮助你了。今天我就搜集了一些这方面的小技巧，你会发现这些小技巧的实用性，同时也能使你的链接更好看，更可用。

一、显示文件类型图标

大家在平时的制作中都或多或少的碰到过文件类型的链接，比如说下载“.pdf”文件之类的。我平时都直接给他链接到文件上就完事了，其实我们少做了些工作，那就是我们为什么不能让用户直接通过链接就能了解它呢？现在许多优秀的Web前端攻城师在处理这样的问题时都会加上相应的文件类型，如下图所示：

解决方法：

解决这样的问题其实很简单，我们只需要使用“a”元素的“属性选择器”。例如，如果你想在所有有外部链接显示一个“图标”，那你就可以使用“a[href^="http://"]”来实现：

		a[href^="http://"] {
			background:transparent url(../images/external.png) center right no-repeat;
			display:inline-block;
			padding-right:15px;
		}
	

其实这里就是使用了“属性选择器”的“E[attr^="value"]”：指定了属性名，并且有属性值，属性值是以value开头的；而我们这里就是所指的所有“a”链接的“href”属性以“http://”开头的会加上背景图片“external.png”

上面的代码是实现所有链接以“http://”开始(也就是我们所说的外部链接)设置icon，如果我们的链接是“压缩文件”，比如说“.zip”、“.rar”、“.gzip”文件，如果想给这类链接设置一个“icon”，那么我们只需这样操作：

		a[href$='.zip'], 
		a[href$='.rar'], 
		a[href$='.gzip'] {
			background:transparent url(../images/zip.png) center left no-repeat;
			display:inline-block;
			padding-left:20px;
			line-height:18px;
		}
	

其实这个实现原理也是相当的简单，上面的代码很快就能告诉称们答案，我们在这里也是使用的“属性选择器”，只不过我们运用了其中的“E[attr="value"]”，它表示的是“指定了属性名，并且有属性值，而且属性值是以value结束的；”。换句话说，只要“a”链接的“href”属性，其值是以“.zip”或者“.rar”或者“.gzip”三者中之一结尾，那都会给这样的链接加上“zip.pn”图标。这样一来，我们链接要是“.doc”的我们就可以使用“doc.png”；链接是“.pdf”的我们就可以使用“pdf.png”，依此类推，我们一起来看一下下面的一段代码：

		/* PDF document links */
		a[href$='.pdf'] {
			background:transparent url(../images/pdf.png) center left no-repeat;
			display:inline-block;
			padding-left:20px;
			line-height:15px;
		}

		/* Excel Documents links */
		a[href$='.xls'], 
		a[href$='.csv'], 
		a[href$='.xlw'], 
		a[href$='.xlt'] {
			background:transparent url(../images/excel.png) center left no-repeat;
			display:inline-block;
			padding-left:20px;
			line-height:15px;
		}

		/* Word Document Links */
		a[href$='.doc'], 
		a[href$='.rtf'], 
		a[href$='.wps'], 
		a[href$='.txt'] {
			background:transparent url(../images/word.png) center left no-repeat;
			display:inline-block;
			padding-left:20px;
			line-height:15px;
		}

		/* mailto: links */
		a[href^="mailto:"] {
			background:transparent url(../images/mailto.png) center left no-repeat;
			display:inline-block;
			padding-left:20px;
			line-height:15px;
		}
	

说的简单一点，我们就是使用CSS的属性选择器配合不同的“icon”来制作上图的链接效果。只是可惜的是这种方法在IE6下是不被支持的，所以使用时请慎用，特别是要针对ＩＥ6的用户。如果你想更了解这样的方法使用，可以先阅读本站的《CSS3 选择器——属性选择器》学习CSS属性选择器的用法，然后在参阅Jeeremie的《Add File Type Icons next to your links with CSS》一文。

二、显示目标页面的语言

这个在制作多语言的页面中运用就很方便了，比如说你需要制作一个多语言提示的Block,里面放置多个语言的链接，这时我们使用下面的方法来制作就是相当的方便了：

HTML Markup

		<a href="#" lang="fr">En Français</a><a href="#" lang="zh">中国</a>
	

CSS Code

		a[lang|='zh'] {
			background: url('lang.gif') no-repeat 0 50%;
			text-indent: 20px;
			display: inline-block;
		}
	

这个实现原理其实和第一种一样的，只不过使用了不同的属性选择器，这里我们使用了CSS的属性选择器中的“E[attr|="value"]——指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）”。具体的大家还可以参考CSS3.info的 《Using CSS 3 selectors to apply link icons》。

三、高亮显示microformats

常常在页面中有部分信息需要特别的突出显示，让其更具有视觉力，比如说您的联系方式或者个人信息等，使用高亮样式突出，用以改善您的网站的可用性，并让更多的人与您联系。如下图所示：

有关于这方面的讨论，大家可以点击Hicksdesign.co.uk的《Highlight Microformats with CSS 》

四、外部链接显示图标

我平时浏览一个网站，并点击站内的链接时，我总希望站长能告诉我，我点了这个链接会不会离开他的站点，或者能告诉我点了后会去哪里？所以各位站长在自己站内针对外部链接，在上面显示图片，就很清楚的告诉您的用户，点相关链接会不会离开你的站点。这样一来增强了用户的体验。具体制作的方法如下：

1、给外部链接一个类名

		<a class="external" href="#">sed diam nonummy</a>
	

2、加上外部链接去向说明

		<a class="external" href="#">sed diam nonummy<span> (external link)</span></a>
	

当然你会问，这部分内容我可以放在“a”链接中的“title”属性中。虽然title属性可以用在这里，一个最近的一项研究表明，Steve Faulkner的标题title属性是不是在任何浏览器中的设备独立的方式显示。相反，内外部链接添加描述性文字，以帮助确定目标。

3、隐藏文字说明

		a.external span	{
			position: absolute;
			left: -5000px;
			width: 4000px;
		}
	

此处不使用“display:none”主要是目前不支持许多屏幕阅读器。出于这个原因，使用绝对定位来隐藏这部分说明文字

4、给链接加上图标

		a.external:link	{
			background: url(icon.gif) no-repeat 100% 0;
			padding: 0 20px 0 0;
		}
		
		a.external:visited {
			color: purple;
			background: url(icon.gif) no-repeat 100% -100px;
			padding: 0 20px 0 0;
			}
			a.external:hover {
				color: red;
				background: url(icon.gif) no-repeat 100% -200px;
				padding: 0 20px 0 0;
			}	
	

最终得到下图所示的效果：

有关于这方面的说细介绍大家可以点击Russ Weakley的《Simple, accessible external links》学习这种制作方法。

五、Tooltips

大家在平时的制作中肯定碰到过鼠标多动到链接上会显示提示信息，我们一般把这个效果称作“ToolTips”。大多“Tooltips”教程都是使用js或者jQuery来实现的，那么可不可以只使用CSS来制作呢？不用我回答，大家都知道，肯定是可以的，比如：

HTML Markup

		<a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>
	

CSS Code

		a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
		a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
		a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
	

上面一个简单的实例，其效果如下所示：

有关于ToolＴips的教程，大家可以点击kollermedia的《Easy CSS Tooltip》或者参考本站的教程《CSS3 Tips》。

六、制作访问后的链接样式

一直以来不知道如何来设置站内已访问的样式，经过阅读maratz.com的《The ways to style visited links》，了解了几种好的实现方法：

1、Line-Through

这个很简单，使用css的“text-decoration”中的“line-through”来区分已访问的链接：

		a:visited { text-decoration: line-through; }
	

2、背景图片——background-image

这种方法也是常见的，就是给已访问后的链接加上一个背景图片：

		a:visited { padding-right: 12px; background: url(visitedLink.gif) no-repeat 100% 50%; color: #aaa; text-decoration: none; }
		a:visited:hover { background-image: url(visitedHoverLink.gif); color: #f00; }
	

下面展示一下使用背景图片的效果：

这里我只罗列出来常用的两种方法，如果大家对这个很感兴趣的话可以点击maratz.com的《The ways to style visited links》了解更详细的内容。

七、提高打印链接的显示

这个小技巧主要是针对打样链接的设置，具体效果如下：

有关于这方面的详细资料，大家可以点击 Aaron Gustafson的《Improving Link Display for Print》和David Walsh 写的《Optimize Your Links For Print Using CSS — Show The URL》。

八、图片替代链接

用图片替代链接，这样的使用方法越来越多，常见的就是用“logo”图片来替代对应的链接，也有的使用图片来替代submit button，如下图所示：

这种实现方式也是相当的简单，大家平时也应用不少，如果还不知道如何使用的话，我建议你阅读Chris Coyier写的《Nine Techniques for CSS Image Replacement》，里面详细介绍了九种图片替换技术，当然大家也可以看看ampsoft.net带来的图片替换button的教程——《CSS image replacement for submit buttons》。

上面主要搜集了八种设置链接的样式小技巧，希望对给大家平时的制作中带来些许的帮助，希望大家会喜欢此篇教程，如果您有更好的建议，可以直接给我留言。

如需转载，烦请注明出处：W3CPLUS