css不能控制文字属性有什么,巧用CSS动态控制文本的属性_css

用css可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大、缩小、改变文字颜色、改变文本的背景、字间距、行间距等等网页特效,一切都在你的掌握之中。是不是有点玄?事实就是如此。那一定很复杂吧?不!看完本文,你就会明白,原来这么简单。

原理:利用CSS的属性值可动态改变的特点。

思路:定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的。请看下面的示例:

一、动态改变文字大小

这个例子的效果是:一段文本,当鼠标在这段文本上,文字变大,鼠标离开时又恢复原样。

制作方法:

1、在Dreamweaver3中,用CSS面板定义两个CSS的class,一个取名为“style1”定义为大号字(18px);另一个取名为“style2”,定义为小号字(12px)。获得的CSS代码如下:

.style1 { font-size:18px}

.style2 { font-size:12px}

–>

不使用Dreamweaver的网友可把上述代码直接复制到网页代码的

与之间。

2、在这段文字的

标记中加入这段代码: οnmοuseοut= “this.className=’style2′”。至此,制作完成,能产生效果的那段文字的源代码是这样的:

鼠标在这段文字上,文字变大,鼠标离开时变小。

不使用Dreamweaver的网友只要把代码改成上面这样就行了,预览一下就可看到实际效果了。

二、同时动态地改变文字的大小、颜色、加粗

这个例子的效果是:鼠标在文字上,文字的大小、颜色发生改变且加粗,鼠标离开时恢复原样。

这个例子的制作方法与例一相同,不同的只是在CSS中定义了不同的文字属性,所以制作方法不再重复。在

与之间增加的CSS代码为:

.style1 { font: bold 16px ; color: #0000FF}

.style2 { font-size:12px; color:#00ff00}

–>

制作完成,能产生效果的那段文字的源代码是这样的:

鼠标在这段文字上,改变文字的大小、颜色、加粗,鼠标离开时恢复原样。

三、动态改变部分文本的背景

这个例子的效果是:当鼠标移到某行文本上,这行一部分文本的背景改变了,而本行的另一段背景却不变。

这个例子与上面的例子在制作方法上有点改变,上面的例子都是对整段文本的属性进行改变,所以把触发事件加载在“P”标记上;而本例是只改变一段文本的一部分的背景颜色,所以应先用”Span”标记把要改变背景的文本括起来,然后把触发事件加载到“Span”标记上。

本例在

与之间增加的CSS代码为:

.style1 { background: #99CCFF}

.style2 { background: #FFFFFF}

–>

制作完成,能产生效果的那段文字的源代码是这样的:

当鼠标移到这段文本上,背景改变了,而本行的另一段背景却不变。

四、给超级链接动态加图标

这个例子的效果是:当鼠标移到某个超级链接上,它的左边会出现一个图象,鼠标移开,图象消失。

本例在制作方法上与上例相同,都是改变文本的背景,但在制作时要注意几点:

1、在设置CSS的背景时是选择图象背景,并在设置图象背景的“repeat”参数时要选择“no-repeat”(不平铺);

2、在设置超级链接时,在其左边要预留出图象的位置;

3、触发事件要加载在超级链接上。

本例在

与之间增加的CSS代码为:

.style1 { background: url(image/dot.gif) no-repeat; }

.style2 { background: #FFFFFF}

–>

制作完成,能产生效果的那个超级链接的源代码是这样的:

将鼠标移动过来

通过动态改变文本的CSS属性,还可以做出许多特效,但方法基本相同,不再一一例举了,掌握了方法,你就可以发挥想象力去创作了。

欢迎大家阅读《巧用CSS动态控制文本的属性_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码

搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权

转载请注明原文链接:巧用CSS动态控制文本的属性_css

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值