风舞残阳 2008-4-1 11:21
CSS对页面文字链接的设置大全
如何使有超级链接的文字不出现下划线？
如何使[wiki]鼠标[/wiki]移动到超连上产生变色的效果？
如何使鼠标移动到超连上产生文字大小变化的效果？
如何使访问过的链接变成不同的颜色？......
这些问题经常会困扰刚做网页的网友，其实这些问题解决起来是非常简单的，使用CSS的控制就可以非常轻松地做到，而且可以在整个页面上进行设置，不用一个一个链接改的，怎么样，很方便是吧，看完下面的这些，你的问题就会迎刃而解，不多废话了，跟我来吧...
一、看下面的样式：
在%26lt;head%26gt;和%26lt;/head%26gt;之间加上如下的CSS语法控制：
%26lt;style[wiki]type[/wiki]="text/css"%26gt;//也可以直接就写%26lt;style%26gt;
%26lt;!--
a:link{text-decoration:none}//a:link指正常的未被访问过的链接
a:active{text-decoration:none}//a:active指点击链接的瞬间出现的链接情况
a:visited{text-decoration:none}//a:visited指已经访问过的链接
a:hover{text-decoration:none;}//a:hover指鼠标放上去链接出现的情况
--%26gt;
%26lt;/style%26gt;
hover是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,active,visited，而且一般的网页制作[wiki]软件[/wiki]里也只有这三个设置，但是hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（BACKGROUND:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,active,visited,hover
text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成line-through给超连文字加上删除线。还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape[wiki]浏览器[/wiki]上才能显示。
二、使粗体文字加上删除线。
粗体文字使用的代码是：B{text-decoration:line-through}
使粗体文字中所有的字母大写。使用代码：B{text-transform:uppercase}（这个在NS中才显示出来，IE没有相应效果显示）
产生既大写，又有颜色，又有删除线的效果iloveyou!
以上的代码是：b{text-decoration:line-through;text-transform:uppercase;color:#66FFFF}
另外，用lowercase使所有字母小写显示，capitalize使每个单词的首字母大写显示。
三、产生链接变色效果：
经过在对链接的几个属性进行颜色设置后，可以使具有link,active,visited属性的链接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。
%26lt;styletype="text/css"%26gt;
%26lt;!--
a:link{text-decoration:none;color:green}//正常链接文字显示绿色
a:active{text-decoration:none;color
[img]http://bbs.jokcn.com/images/smilies/82.gif[/img]
llow}//点击瞬间的链接显示黄色
a:visited{text-decoration:none;color:red}//已经访问过的链接显示红色
--%26gt;
%26lt;/style%26gt;
要想产生鼠标放上去产生变色效果，就要用到另一个属性了,这就是hover（上面提到过的）。
a:hover{text-decoration:none;color
[img]http://bbs.jokcn.com/images/smilies/82.gif[/img]
llow；background:white;}表示鼠标移动到链接文字上时，文字修饰风格为“无”，同时链接文字显示黄色，链接文字的底色显示为白色。
四、看一下下面链接设置的总体运用情况：
%26lt;styletype="text/css"%26gt;
%26lt;!--
a:link{text-decoration:none;color:blue;font-size:9pt}
a:active{text-decoration:underline;color
[img]http://bbs.jokcn.com/images/smilies/82.gif[/img]
llow;font-size:10pt}
a:visited{text-decoration:none;color:red;font-size:10.5pt}
a:hover{text-decoration:underline;color:green;font-size:11pt;background:white;}
--%26gt;
%26lt;/style%26gt;
上面这样设置的总体解释为：
1，链接文字没有下划线，蓝色（blue）显示，字为9pt大小；
2，鼠标点击链接的瞬间文字再现下划线，颜色变成黄色（yellow），并且文字大小变成10pt；
3，访问过的链接没有下划线，文字变成红色（red），同时文字大小变成10.5pt；
4，鼠标放到链接上时出现下划线，颜色为绿色（green），字符大小11pt，同时文字上出现一个白色（white）的背景区域。
这就是链接显示(如果你已经访问过http://www.jzzy.com，这里将显示红色)
