如何在同一页面设置不同文字链接效果的样式

作者：杨青青时间：2012-05-18 阅读数：人阅读

很多人也许学会了怎样使链接文字随鼠标点击状态改变而改变的效果，这是css的使用效果，也许你只懂得设置一种状态，比如鼠标放在文字上方，文字变为红色。但这样是整个页面都是如此的统一效果，但有没办法在一个页面中有多种效果呢?比如页面中有两个文字链接，我们想其中一个当鼠标放上去的时候是红色，另一个则是黄色。答案是肯定的。如果手写代码，也只是几行而已。考虑到现在大多数人都在使用，下面我们以在Dreamweaver4中谈谈如何做这种效果。

1：打开Dreamweaver，新建一文件，做两个带链接的文字。

2：SHIFT+F11，打开cssstyles控制面板，新建一usecssselector，需要注意的是，你选择Usecssselector再选择a:hover，并没有出现上图的效果，其实技巧就是在这里!我们手动把a:hove改成a.one:hove，也就是在a的后面加上一个点与名字(可任意英文，不能是数字)。设置好后点ok

3：在弹出的styledefinitionforone.a:hover面板中设置你要的效果，这里我们选择字体的颜色为红色。设置完后点ok

4：重复第2、3步，第2步需要修改的地方就是把a.one:hover该回a:hover(就是直接选中a:hover就可。第3步需要改的就是字体的颜色了，我们设置为黄色。

5：现在预览还没有效果，我们还需要动点小手术，我们来看看设置完后的cssstyles控制面板，如下图，里面会出现个one

6：在页面中选中其中你想要当鼠标放上去的时候是红色的链接文字，再在cssstyles控制面板中用鼠标选中one

7：现在你的页面已经有两种效果了。

总结：按照以上逻辑，我们可以做出无限个文字链接效果，关键是在于a:hovera:activea:linka:visited的修改而已，前面介绍的只是a:hover，其实三个一样可以。只要参照第2步的设置就可以轻松的搞定。


<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>技术探讨 -杨青个人博客网站</title>
<style>
a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}
a:link { font-size: 9pt; color: #006699; text-decoration: underline}
a:visited { font-size: 9pt; color: #006699; text-decoration: underline}
a:active { font-size: 9pt; color: #FF0000; text-decoration: none}
a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}
a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}
a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}
a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#">下划线链接 </a>
<a href="#" class="r1">双下划线链接</a>
</body>
</html>

补充说明：

a:hover 表示鼠标划过时的样式.

a:link 表示链接的样式.

a:active 表示当前活动连接的样式.

a:visited 表示已经访问过的连接的样式.

很赞哦！ ()

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：dacesmiling@qq.com