对于新手来说，链接的控制是很头疼的，刚刚在论坛又看到有人为这个事情而头疼。我总结了几种常用的CSS控制链接的方法，供大家学习参考。

以下内容只有回复后才可以浏览,请先登录！

一，整个网站的通用链接样式。

[replyview]

a:link,a:visited,a:active{ color:#777; text-decoration:none; font-size:12px;}
a:hover{ color:#f4f4f4; text-decoration:underline;font-size:12px;}

[/replyview]

一般只需要修改其中的color，也就是颜色。

上面是简写，如果是全部都写就是

[replyview]

a:link{ color:#777; text-decoration:none; font-size:12px;}

a:visited{ color:#777; text-decoration:none; font-size:12px;}

a:active{ color:#777; text-decoration:none; font-size:12px;}
a:hover{ color:#f4f4f4; text-decoration:underline;font-size:12px;}

[/replyview]

你可以根据你的需要搭配简写。一般我提供的简写就是OK的。

二，某个ID或者CLASS的链接控制。这里我们打个比方，控制链接ID为NAV的链接样式。

[replyview]

<a href="#" id="nav">链接内容</a>

#NAV:link,#NAV:visited,#NAV:active{ color:#777; text-decoration:none; font-size:12px;}
#NAV:hover{ color:#f4f4f4; text-decoration:underline;font-size:12px;}

[/replyview]

如果是class的话，只要将#替换成.即可。同样，这也是简写，如果你特殊要求，那么请参照第一个进行全部书写。

其实方法很简单，只是由原来的A替换成ID或者CLASS名。

三，控制某个ID或者CLASS内的链接样式。

看标题晕了？没关系，看个例子就知道了。

<div id="con"><a href="#">链接内容</a></div>

看明白了吗？

链接样式如下：

[replyview]

#con a:link,#con a:visited,#con a:active{ color:#777; text-decoration:none; font-size:12px;}
#con a:hover{ color:#f4f4f4; text-decoration:underline;font-size:12px;}

[/replyview]

明白了？在原来的A前面加上空格和ID或者class的名字。当然，class的话，请将#替换成.即可。

四，制作虚线的链接样式。

我们都知道，浏览器默认的链接样式为下划线为实线。虽然这无伤大雅，但对于个别要求比较特殊的朋友来说，实线不怎么样，能否用虚线呢？答案当然是可以的。

[replyview]

#con a:link,#con a:visited,#con a:active{ color:#777; text-decoration:none; font-size:12px;}
#con a:hover{ color:#f4f4f4; text-decoration:none;font-size:12px; border-bottom:1px dotted #ccc}

[/replyview]

了解CSS的应该看懂了。不了解的只要替换颜色代码即可。

需要特别注意的是IE和火狐等浏览器的显示效果不一致，或许为1像素颜色间隔1像素实线显示，而IE为2像素间隔4-5个像素实线显示。总而言之，IE的显示效果好一些。而不管怎么样，都是虚线。

五，制作方框的链接样式。

这个比较高阶一点了，通常用于友情链接处或者其他需要的地方。参考实例请看 志华红木家私家具 的友情链接。这个怎么样做呢？

[replyview]

#link a { display:block; width:85px; margin:6px 8px 0 0; height:22px; line-height:22px; float:left; text-align:center; overflow:hidden; padding:0 5px;}
    #link a:link,#link a:visited,#link a:active{ border:1px solid #200000; background:#600000}
    #link a:hover{border:1px solid #200000; background:#D1881B; color:#600000;text-decoration:none;}[/replyview]

看到了吗？这里，我们需要再引申一点，那就是，如果链接的四个状态表现形式一样的时候，可以统一的用 a {}这个来控制，而不一样的内容则需要分别书写。需要特别注意的是，用这种统一的方式来控制的话，字号大小是无法控制，尤其是链接的文字设置大小与默认的链接文字大小不一样的情况下，这样书写是无效的。灵活书写可以大大减少CSS的体积哦！

#link a{font-size:14px} 这样是无效的，除非你的默认的字体是14像素。但如果是默认的字体就是14像素，这个值就没必要写了。

最后，如果你的CSS里面已经总的控制了链接下划线的表现形式，而你其他的链接表现形式也是一样的时候，则可以不书写text-decoration:none值了。这样也可以给CSS减肥哦！

学习CSS不可一蹴而就，需要的是循序渐进。但总体来说，只要掌握了我在论坛撰写的这些教程并能灵活运用，称不上高手，但也能骄傲的对别人说你会div+css了。

2009年，祝大家一起努力，一起牛B~可千万别装B哦~

本文首发地址：http://www.hezewangzhan.com/wangluojishu/divcss/6733.html 转载请保留链接。

郁闷，不能编辑帖子。