华东15选5近30期开奖结果查询

当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

巧用CSS动态控制文本的属性

时间:2008-10-6 10:42:00 ?#25913;?网页制作 点击: 来源:不详

 [网页制作]-本文简要:用CSS可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大、缩小、改变文字颜色、改变文本的背景、字间距、行间距等等网页特效,一切都在你的掌握之?#23567;?#26159;不是有点玄?事实就是如此。那一定很复杂吧?不!看完本文,你就会明白,原来这么简单。 原理:利用CSS的属性值可动态改变的特点。 思路:定义文本...
D6电脑网 (d6pc.com): 巧用CSS动态控制文本的属性-网页制作
CSS可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大、缩小、改变文字颜色、改变文本的背景、字间距、行间距等等网页特效,一切都在你的掌握之?#23567;?#26159;不是有点玄?事实就是如此。那一定很复杂吧?不!看完本文,你就会明白,原来这么简单。
原理:利用CSS的属性值可动态改变的特点。
思路:定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的。请看下面的示例:

一、动态改变文字大小
这个例子的效果是:一段文本,当鼠标在这段文本上,文字变大,鼠标离开时又恢复原样。
制作方法:
1、在Dreamweaver3中,用CSS面板定义两个CSS的class,一个取名为“style1”定义为大号字(18px);另一个取名为“style2?#20445;?#23450;义为小号字(12px)。获得的CSS代码如下:
<style type="text/css">
<!--
.style1 { font-size:18px}
.style2 { font-size:12px}
-->
</style>
不使用Dreamweaver的网友可把?#40092;?#20195;码直接复制到网页代码的<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的网友?#28784;?#25226;代码改成上面这样就行了,预览一下就可看到实际效果了。

二、同时动态地改变文字的大小、颜色、加粗
这个例子的效果是:鼠标在文字上,文字的大小、颜色发生改变且加粗,鼠标离开时恢复原样。
这个例子的制作方法与例一相同,不同的只是在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”标?#24039;希?#32780;本例是只改变一段文本的一部分的背景颜色,所以应先用"Span"标?#21069;?#35201;改变背景的文本括起来,然后把触发事件加载到“Span”标?#24039;稀?
本例在<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”?#38382;?#26102;要选择“no-repeat?#20445;?#19981;平铺);
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属性,还可以做出许多特效,但方法基本相同,不再一一例举了,掌握了方法,你就可以发挥想象力去创作了。



D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等?#25913;俊8行?#24744;的支持!
?#25913;浚?a href="../Class.asp?ID=45">网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.ewdddb.tw) © 2019 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵?#25913;?#30340;利益请联系我?#24039;?#38500;.谢谢!
    关于D6电脑学习网 广告合作 [email protected] 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0
  • 华东15选5近30期开奖结果查询
    足球指数什么意思 何仙姑中特网四肖中特 生活好苦 赚钱好累 山东时时彩平台 湖北快3开奖结果实时查询 中版四柱预测 人人巴士司机赚钱么 哪能看足彩胜平负概率 福建快3走势图手机版 网络赌场