广告：
网页制作参考
千千学园
雨路开发频道
雨路技术文档
技术问答
编程技术

　　用css可以很方便地动态改变文本的属性，从而可制作出动态地使文字变大、缩小、改变文字颜色、改变文本的背景、字间距、行间距等等网页特效，一切都在你的掌握之中。是不是有点玄？事实就是如此。那一定很复杂吧？不！看完本文，你就会明白，原来这么简单。
　　原理：利用css的属性值可动态改变的特点。
　　思路：定义文本的多种属性值，再用一个事件来触发，一旦事件发生，则改变文本属性值，从而达到预期目的。请看下面的示例：

一、动态改变文字大小
　　这个例子的效果是：一段文本，当鼠标在这段文本上，文字变大，鼠标离开时又恢复原样。
　　制作方法：
　　1、在dreamweaver3中，用css面板定义两个css的class，一个取名为“style1”定义为大号字（18px）；另一个取名为“style2”，定义为小号字（12px）。获得的css代码如下：
〈style type="text/css"〉
〈!--
.style1 { font-size:18px}
.style2 { font-size:12px}
--〉
〈/style〉
　　不使用dreamweaver的网友可把上述代码直接复制到网页代码的〈head〉与〈/head〉之间。
　　2、在这段文字的〈p〉标记中加入这段代码：onmouseover="this.classname=style1" onmouseout= "this.classname=style2"。至此，制作完成，能产生效果的那段文字的源代码是这样的： 〈p onmouseover="this.classname=style1" onmouseout="this.classname=style2"〉〈font color="#ff0000"〉鼠标在这段文字上，文字变大，鼠标离开时变小。〈/font〉〈/p〉
　　不使用dreamweaver的网友只要把代码改成上面这样就行了，预览一下就可看到实际效果了。

二、同时动态地改变文字的大小、颜色、加粗
　　这个例子的效果是：鼠标在文字上，文字的大小、颜色发生改变且加粗，鼠标离开时恢复原样。
　　这个例子的制作方法与例一相同，不同的只是在css中定义了不同的文字属性，所以制作方法不再重复。在〈head〉与〈/head〉之间增加的css代码为：
〈style type="text/css"〉
〈!--
.style1 { font: bold 16px ; color: #0000ff}
.style2 { font-size:12px; color:#00ff00}
--〉
〈/style〉
　　制作完成，能产生效果的那段文字的源代码是这样的：
〈p class="style4" onmouseover="this.classname=style1" onmouseout="this.classname=style2"〉 　　鼠标在这段文字上，改变文字的大小、颜色、加粗，鼠标离开时恢复原样。〈/p〉

三、动态改变部分文本的背景
　　这个例子的效果是：当鼠标移到某行文本上，这行一部分文本的背景改变了，而本行的另一段背景却不变。
　　这个例子与上面的例子在制作方法上有点改变，上面的例子都是对整段文本的属性进行改变，所以把触发事件加载在“p”标记上；而本例是只改变一段文本的一部分的背景颜色，所以应先用"span"标记把要改变背景的文本括起来，然后把触发事件加载到“span”标记上。
　　本例在〈head〉与〈/head〉之间增加的css代码为：
〈style type="text/css"〉
〈!--
.style1 { background: #99ccff}
.style2 { background: #ffffff}
--〉
〈/style〉
　　制作完成，能产生效果的那段文字的源代码是这样的：
〈p〉〈span class="style6" onmouseover="this.classname=style1" onmouseout="this.classname=style1"〉当鼠标移到这段文本上，背景改变了，〈/span〉而本行的另一段背景却不变。〈/p〉

四、给超级链接动态加图标
　　这个例子的效果是：当鼠标移到某个超级链接上，它的左边会出现一个图象，鼠标移开，图象消失。如下图所示：（下图是屏幕截图，并不是实际代码演示。）

　　鼠标不在链接上

　　鼠标在链接上

　　本例在制作方法上与上例相同，都是改变文本的背景，但在制作时要注意几点：
　　1、在设置css的背景时是选择图象背景，并在设置图象背景的“repeat”参数时要选择“no-repeat”（不平铺）；
　　2、在设置超级链接时，在其左边要预留出图象的位置；
　　3、触发事件要加载在超级链接上。
　　本例在〈head〉与〈/head〉之间增加的css代码为：
〈style type="text/css"〉
〈!--
.style1 { background: url(image/dot.gif) no-repeat; }
.style2 { background: #ffffff}
--〉
〈/style〉
　　制作完成，能产生效果的那个超级链接的源代码是这样的：
〈a href="#" onmouseover="this.classname=style1" onmouseout="this.classname=style2"〉   试试看〈/a〉
　　通过动态改变文本的css属性，还可以做出许多特效，但方法基本相同，不再一一例举了，掌握了方法，你就可以发挥想象力去创作了。

（）