当前位置:  编程技术>WEB前端

用CSS动态控制文本属性

    来源: 互联网  发布时间:2014-09-06

    本文导语:  本篇详细介绍了用CSS动态控制文本属性的文章主题,利用CSS的属性值可动态改变的特点,定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的。     用CSS可以很方便地动态改变...

本篇详细介绍了用CSS动态控制文本属性的文章主题,利用CSS的属性值可动态改变的特点,定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的。

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

一、动态改变文字大小
这个例子的效果是:一段文本,当鼠标在这段文本上,文字变大,鼠标离开时又恢复原样。
制作方法:
1、在Dreamweaver3中,用CSS面板定义两个CSS的class,一个取名为“style1”定义为大号字(18px);另一个取名为“style2”,定义为小号字(12px)。获得的CSS代码如下:



不使用Dreamweaver的网友可把上述代码直接复制到网页代码的与之间。
2、 在这段文字的

标记中加入这段代码:onmouseover="this.className=''style1''" onmouseout= "this.className=''style2''"。至此,制作完成,能产生效果的那段文字的源代码是这样的:

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


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

二、同时动态地改变文字的大小、颜色、加粗
这个例子的效果是:鼠标在文字上,文字的大小、颜色发生改变且加粗,鼠标离开时恢复原样。
这个例子的制作方法与例一相同,不同的只是在CSS中定义了不同的文字属性,所以制作方法不再重复。在与之间增加的CSS代码为:



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

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



三、动态改变部分文本的背景
这个例子的效果是:当鼠标移到某行文本上,这行一部分文本的背景改变了,而本行的另一段背景却不变。
这个例子与上面的例子在制作方法上有点改变,上面的例子都是对整段文本的属性进行改变,所以把触发事件加载在“P”标记上;而本例是只改变一段文本的一部分的背景颜色,所以应先用"Span"标记把要改变背景的文本括起来,然后把触发事件加载到“Span”标记上。
本例在与之间增加的CSS代码为:



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

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



四、给超级链接动态加图标
这个例子的效果是:当鼠标移到某个超级链接上,它的左边会出现一个图象,鼠标移开,图象消失。
本例在制作方法上与上例相同,都是改变文本的背景,但在制作时要注意几点:
1、在设置CSS的背景时是选择图象背景,并在设置图象背景的“repeat”参数时要选择“no-repeat”(不平铺);
2、在设置超级链接时,在其左边要预留出图象的位置;
3、触发事件要加载在超级链接上。
本例在与之间增加的CSS代码为:



制作完成,能产生效果的那个超级链接的源代码是这样的:
将鼠标移动过来

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

    
 
 

您可能感兴趣的文章:

  • CSS3 box-flex-group 属性
  • CSS属性 - white-space 空白属性使用说明
  • CSS3 rotation 属性
  • CSS教程之css选择器 、属性、值
  • CSS empty-cells 属性
  • jQuery设置CSS属性(示例)
  • CSS table-layout 属性
  • jQuery 设置 CSS 属性示例介绍
  • CSS3 grid-rows 属性
  • CSS属性搜索 Browser Support
  • CSS border-spacing 属性
  • jquery控制css的display属性(显示与隐藏)
  • CSS caption-side 属性
  • CSS 关于网页图片的属性
  • CSS3 target-new 属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • CSS3 box-lines 属性
  • jQuery修改CSS伪元素属性的方法
  • CSS3 grid-columns 属性
  • jquery控制css元素的display(显示与隐藏)属性
  • CSS3 text-outline 属性
  • css white-space:nowrap属性用法(可以强制文字不换行输出)
  • html5/css3文本阴影(text-shadow)详解及示例
  • 用css实现隐藏文本框
  • CSS控制长文本内容显示(截取的地方用省略号代替)
  • 文本框css关闭输入法
  • CSS控制文本自动换行的问题
  • 用css截取字符的几种方法详解(css排版隐藏溢出文本)
  • CSS渐变文本效果的两种方法比较
  • CSS也能控制表格的交替颜色 iis7站长之家
  • css文本框与按钮美化效果代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • CSS控制图片大小-适应宽度
  • 用css来控制图片大小显示的实现方法与代码
  • css pointer控制在firefox下显示手型的代码
  • asp.net css控制打印功能的方法分享
  • 用CSS来控制图片显示大小的代码
  • css Hspace 和vspace的图片控制实例
  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • 利用CSS控制SELECT中的OPTION是否不允许选
  • CSS也能控制表格的交替颜色
  • 让用户自己控制网页字体的大小的css书写方法
  • 用CSS控制的闪烁效果
  • 教你如何用CSS来控制网页字体的显示样式
  • 用js控制css的不错的方法
  • 用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3