15年来,为全国50万+企业提供互联网数字化基础应用服务。
微网小程序
电商运营
关于我们
付款方式
荣誉资质
业务提交
代理合作
知 识
400-1100-266
9:00-24:00(工作日)
首 页
企业400电话
Hot
网站建设
商标✡知产
网络优化推广
热
AI电话机器人
呼叫中心
彩铃•短信
增值拓展业务
新
主页
>
知识库
> 用CSS动态控制文本属性
用CSS动态控制文本属性
热门标签:
美图手机
铁路电话系统
呼叫中心市场需求
智能手机
检查注册表项
服务器配置
银行业务
网站文章发布
本篇详细介绍了用CSS动态控制文本属性的文章主题,利用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属性,还可以做出许多特效,但方法基本相同,不再一一例举了,掌握了方法,你就可以发挥想象力去创作了。
您可能感兴趣的文章:
使用JavaScript和CSS实现文本隔行换色的方法
CSS小例子(只显示下划线的文本框,像文字一样的按钮)
css文本框与按钮美化效果代码
CSS 美化段落文本之首字下沉
文本框css关闭输入法
CSS渐变文本效果的两种方法比较
用css实现隐藏文本框
CSS控制文本自动换行的问题
详解CSS不定宽溢出文本适配滚动
标签:
乐山
长治
河南
上海
沈阳
新疆
红河
沧州
巨人网络通讯声明:本文标题《用CSS动态控制文本属性》,本文关键词 ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
相关文章
电销机器人到底如何运作的?
很多人对 电销 机器人到底如何运作存在着巨大的好奇心,那么今天,小编就带大家看一下机器人的运作流程! 电销...
10-24
电话机器人的兴起对电销行业来说是“惊喜”还
随着互联网 大数据 的普及,许多 电销 行业如雨后春笋般争先恐后地冒出来。而今电销行业的混乱,让各位涉足电销...
10-24
百应电话机器人有哪些功能?百应电话机器人好
百应 智能 电话机器人 能够协助企业进行呼入接待、 外呼 回访等服务场景,能够经过不断的培训学习,逐步完善成专...
10-24
客服外呼系统都有哪些优势?
当前呼叫中心电话系统被企业用于业务 电销 以及客户服务,然而随着企业需求不断扩大,原来传统的自建 呼叫中心...
10-24
电销机器人效果怎么样?智能电话机器人可行吗
几百数千年后,或许没人会记得卡斯帕罗夫曾是世界第一的围棋高手,但人们会记得,他败给了电脑深蓝。那虽算不...
10-24
百应智能外呼系统,贷后管理科技升级
去年底开始,接连出台政策和法规加强对消费 金融 等金融形态进行 规范 。强 监管 下,行业走向规范发展,行业竞...
10-24
百应智能外呼系统引领外呼行业新风向
电话销售: 您好,我这边是XX地产,给您推荐一下精装酒店式公寓,有兴趣了解一下吗? 客户: 具体位置在哪里啊?...
10-24
小贷企业为什么需要电销机器人?
随着信贷行业逐步进入我们的生活中,越来越多人选择借款来处理资金难题。信贷企业不断涌现,业务开展迅猛,行...
10-24
雷霆电话机器人是如何转接人工的?
当我们在拨通移动、联通或电信 运营商 的客服电话时,总会要先经过一些机械化的选择,然后成功连接人工坐席反馈...
10-24
米卡迪电话机器人效果怎么样?
外呼 电话机器人 ,之所以能智能的与客户无忧交流,因为运用了下面这么多高技术。 ASR 语音识别 米卡迪电话机器人...
10-24
灵声电话机器人效果怎么样?好用吗
外呼 电话机器人 ,之所以能智能的与客户无忧交流,因为运用了下面这么多高技术。 灵声 电话机器人 效果怎么样?...
10-24
电销机器人要想效果好,话术定制有多重要
电话机器人 是基于智能语音技术的智能营销工具。它会像真人一样主动拨打客户的电话,介绍产品并回答客户的咨询...
10-24
智能电话机器人的实现原理,使用安全吗?
随着科学技术的进步和 人工智能 的发展,越来越多的智能产品已经进入我们的工作和生活。智能手机、智能电视、智...
10-24
福州哪里有电话机器人研发公司?
人工智能 再次成为各行各业关注的焦点,自从这个概念首次提出以来,60年已经过去了。自从AlphaGo以巨大优势击败人...
10-24
电销机器人销售能力怎么样?
自从 电话机器人 一出现,在 电销 行业火爆了起来。面对电话机器人的各种优势,企业跃跃欲试,但又害怕效果不理...
10-24
推荐文章
一个文义性品牌定义的提出与讨论
谈数据库营销
语音智能电话机器人
laravel与thinkphp之间的区别与优缺点
uniqueidentifier转换成varchar数据类型的sql语句
【干货】实用的网站空间购买指南
win7右下角的网络连接显示红叉,但可以正常上网是怎么回事?如何解决?
centos安装xenserver xe命令行的方法
上一篇:
CSS编辑工具Topstyle轻松打造网页风格
下一篇:
深入探讨CSS中字体元素
一起分享吧
版权所有:巨人网络(扬州)科技有限公司——拥有网站建设十年经验,具备独立网站开发能力,能够提供完善的网站设计及相关的网站制作服务! 全国统一服务热线:400-1100-266
展开
收缩
QQ咨询
在线咨询
客服小董
客服小张
客服小刘
客服小李
客服小王
招商加盟
财务查询
微信客服
电话咨询
400-1100-266