使用CSS控制超链接样式的注意事项

在网页设计中我们经常使用CSS控制超级链接样式。但是我们必须注意标签的先后顺序,否则可能达不到预期的效果。

笔者在制作网页的时候曾按下列顺序排列这几个标签:

a:link{font-size:18px;color:#0000FF;text-decoration:underline}

a:hover{font-size:18px;color:#0000FF;text-decoration:none;font-style:italic}

a:visited{font-size:18px;color:#0000FF;text-decoration:none}

第一次用浏览器打开时一切正常,鼠标未放上去时为蓝色,放上鼠标时为绿色斜体,单击链接到目的地址再返回该页时,链接变为红色(同visited中所 设),再次放上鼠标时,文本仍然保持visited样式,hover样式却失效。笔者百思不得其解,经反复试验发现问题出在三行标签的顺序上,只要把 visited放在hover前面,就一切正常了。

同样道理,active和link的位置也会对最终效果产生影响。

通过反复试验,笔者总结了一条经验:只要保证visited在前,hover在后,active在两者中间,link位置任意,都能够保证四种样式互不影响,正常显示。



再谈超级链接技巧
  在缺省的情况下,鼠标是一个向左上方翘起的箭头,下载页面时是一个沙漏的形状而当鼠标移动到超级链接上时则是一个手的形状,在许多Windows的应用程序中鼠标的样子可以说是千变万化,新鲜而有趣,我们的网页中一样也做到了这一点。先看一个例子:
  现在许多网站上都有“帮助”这样一个链接,目的是让浏览者更好的浏览网站,当我们让浏览者把鼠标移动到帮助链接的时候,鼠标指针就会变成表示帮助的左上方箭头加上一个问号的形状,下面是代码:
  <a style="cursor:help" href=help.htm>帮助</a>
  结构如下:<target style= "attribute1:value1;attribute2:value2;…">
  在这里属性是cursor(光标),属性值是help。借助不同的属性值光标还会有很多的形状:当属性值为text的时候,鼠标会变成一个“I”形; 当属性值为move的时候是一个带四方箭头的十字形;属性值为hand时是一个手形;属性值为crosshair表示十字形;属性值为e-resize表 示向右箭头;属性值为ne-resize则表示向右上方箭头;属性值为nw-resize表示向左上方箭头;属性值为n-resize表示向上方箭头;属 性值为se-resize表示向右下方箭头;属性值为Wait表示沙漏。
  Web页默认的链接方式(未访问过的链接是蓝色文字带蓝色的下划线,访问过的超级链接变为深紫色的文字带深紫色的下划线)千篇一律,并且很有可能与你的背景色不搭配。下面介绍一下超级链接标签<a>在CSS方面的一些比较常见的应用,代码如下:
  在HTML文件的<head>……</head>之间加入
  <style type=“text/css”>
  <!--
  A:link {text-decoration: none; color:blue}
  A:visited {color:red; text-decoration:line-through}
  A:active {color:white; text-decoration:underline}
  A:hover {text-decoration:none;color:yellow;background-color:black}
  -->
  </style>
  这里 说明是内嵌式的网页样式表单,它一般在<HEAD>……</HEAD>中申明,它只对本网页起作用,同时如果你已经使用了外部样式表单,那么它将被内嵌式的网页样式表单屏蔽。
  A:link {text-decoration: none; color:blue}是说明了超级链接还没有被访问,它没有下划线,颜色为蓝色。
  A:visited {color:red; text-decoration:line-through}说明了超级链接被访问后,它的颜色变成了红色,有了一根删除线。
  A:active {color:white; text-decoration:underline}说明超级链接处于活动状态的时候,它的颜色变成了白色,有了下划线。
  A:hover {text-decoration:none;color:#FF0000;background-color:black}说明鼠标移动到超级链接后,它没有下划线,文字颜色变成了黄色,背景颜色是黑色。
  采取以上的办法你就可以随心所欲控制你的链接了,而你的主页是不是也有了自己的风格呢?

 

 

转载自:http://hi.baidu.com/h007ming/blog/item/c37568b7a70683fe30add1c3.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值