菏泽网站建设

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

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

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

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

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

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;}

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

二，某个D或者CASS的链接控制。这里我们打个比方，控制链接D为NA的链接样式。

< 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;}

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

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

三，控制某个D或者CASS内的链接样式。

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

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

看明白了吗？

链接样式如下：

#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;}

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

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

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

#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}

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

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

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

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

#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;}

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

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

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

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

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

• ·07/12地方工作室 文章内容CSS炫酷效果公布
• ·05/10如何为您的网站寻找合适的友情链接？
• ·04/14将写程序代码视为一种享受！
• ·02/28平价接DIV+CSS重构网站的活
• ·12/31谷歌广告又一平台社交链接纳入广告功能
• ·10/29CSS DIV网页布局与TABLE布局的区别
• ·10/29css技巧批量保存div+css图片方法
• ·10/26HTML的SPAN和DIV的区别
• ·10/25div+css网站布局设计常见错误大全
• ·10/25网页设计中CSS十大应该注意的问题