账号通
    

账号  

密码  

152857

查看

241

回复
主题:■CSS菜鸟必看■CSS控制链接的多种方法技巧 [收藏主题] 转到:  
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2009/1/16 14:24:00   | 只看该作者 查看该作者主题 楼主 
科汛在线网校系统

对于新手来说,链接的控制是很头疼的,刚刚在论坛又看到有人为这个事情而头疼。我总结了几种常用的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哦~



 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
uaidc888 当前离线

330

主题

0

广播

0

粉丝
添加关注
级别:三年级

用户积分:1425 分
登录次数:1 次
注册时间:2010/6/12
最后登录:2010/6/19
uaidc888 发表于:2010/6/15 22:38:00   | 只看该作者 查看该作者主题 沙发 
科汛在线网校系统
好贴~我顶,以前没看到
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
hotoyo 当前离线

46

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:250 分
登录次数:42 次
注册时间:2009/9/4
最后登录:2012/10/12
hotoyo 发表于:2010/6/14 13:53:00   | 只看该作者 查看该作者主题 藤椅 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
xs525138997 当前离线

25

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:100 分
登录次数:1 次
注册时间:2010/6/13
最后登录:2010/6/13
xs525138997 发表于:2010/6/13 22:45:00   | 只看该作者 查看该作者主题 板凳 
科汛智能建站系统
 谢楼主~~~顶  呵呵
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
pwucong 当前离线

20

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:48 分
登录次数:10 次
注册时间:2010/4/25
最后登录:2012/4/16
pwucong 发表于:2010/6/11 3:08:00   | 只看该作者 查看该作者主题 报纸 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
feidian 当前离线

14

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:94 分
登录次数:7 次
注册时间:2010/6/7
最后登录:2010/7/6
feidian 发表于:2010/6/8 14:08:00   | 只看该作者 查看该作者主题 地板 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
feidian 当前离线

14

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:94 分
登录次数:7 次
注册时间:2010/6/7
最后登录:2010/7/6
feidian 发表于:2010/6/7 17:39:00   | 只看该作者 查看该作者主题 7楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
c529268689 当前离线

10

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:104 分
登录次数:5 次
注册时间:2010/5/28
最后登录:2010/6/4
c529268689 发表于:2010/6/1 17:16:00   | 只看该作者 查看该作者主题 8楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
wenshan 当前离线

29

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:249 分
登录次数:23 次
注册时间:2010/1/15
最后登录:2010/10/15
wenshan 发表于:2010/5/31 17:27:00   | 只看该作者 查看该作者主题 9楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
fdik 当前离线

395

主题

3

广播

0

粉丝
添加关注
级别:三年级

用户积分:1124 分
登录次数:278 次
注册时间:2010/3/27
最后登录:2018/5/18
fdik 发表于:2010/5/30 23:36:00   | 只看该作者 查看该作者主题 10楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.42188秒 powered by KesionCMS 9.0