CSS对网页文字链接的设置_动易Cms教程

　　在当今的网页制作中，几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，有些书上把它译为 “层叠样式表”。有了CSS的控制，我们的网页便会给人一种心旷神怡、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。

一、看下面的样式：

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 指鼠标放上去链接出现的情况

　　hover是一个经常会被混淆的属性，一般大家都认为链接是三个属性：link,active,visited，而且一般的网页制作软件里也只有这三个设置，但是hover其实也是一个非常重要的属性，它还可以在链接上加上背景色（BACKGROUND:#ccffcc;），其它的设置与上面三个一样，所以大家现在可以记住，链接上可以做四个属性设置，分别是：link,active,visited,hover

　　text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。假如讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线。还有一个是blink参数，顾名思义是闪烁效果，但是他要在NetScape浏览器上才能显示。

二、使粗体文字加上删除线。

　　粗体文字使用的代码是：B { text-decoration: line-through }

　　使粗体文字中所有的字母大写。使用代码： B { text-transform: uppercase }（这个在NS中才显示出来，IE没有相应效果显示）

　　产生既大写，又有颜色，又有删除线的效果的代码是：b { text-decoration: line-through; text-transform: uppercase; color: #66FFFF} 。另外，用lowercase使所有字母小写显示，capitalize 使每个单词的首字母大写显示。

三、产生链接变色效果：

　　经过在对链接的几个属性进行颜色设置后，可以使具有link,active,visited属性的链接显示不同的颜色，但是却不会产生鼠标覆盖变色效果。
a:link { text-decoration: none ; color: green } //正常链接文字显示绿色
a:active { text-decoration: none ; color: yellow } //点击瞬间的链接显示黄色
a:visited { text-decoration: none ; color: red } //已经访问过的链接显示红色

　　要想产生鼠标放上去产生变色效果，就要用到另一个属性了,这就是 hover。如：a:hover { text-decoration: none ; color: yellow；background:white; } 表示鼠标移动到链接文字上时，文字修饰风格为“无”，同时链接文字显示黄色，链接文字的底色显示为白色。

四、看一下下面链接设置的总体运用情况：

a:link { text-decoration: none ; color: blue ; font-size: 9pt }
a:active { text-decoration: underline ; color: yellow;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; }

查看更多 动易Cms教程  动易Cms模板