现在的位置: 首页 >> 网页设计 >> CSS >> CSS动态改变样式
添加时间:2006-4-6 来源:网教中国 作者:
CSS动态改变样式

  CSS与JavaScript结合起来产生的特效,进一步领略到CSS的强大功能。

  动态改变样式

  我们先来看一个较简单的特效,这里只是用到了属性和鼠标事件。

  我们使用“class”类属性来改变文档的样式。 放大这段文本。

  这个例子的代码是这样的:

  <html>
  <head>
  <title>change style</title>
  <style>
  <!--
  .bigchange{color:blue;font-weight:bolder;font-size:225%;
  letter-spacing:4px;background:yellow;}
  //*定义bigchange类的字体的颜色、粗细、大小,字间距,背景色*//
  .start{color:yellow;background:navy;}
  //*定义start类的字体的颜色和背景色*//
   -->
  </style>
  </head>
  <body>
  <h1>动态改变样式</h1>
  <p>请把鼠标移到蓝色背景的文字下面。</p>
  <p>我们使用"class"类属性来改变文档的样式。
  <span onmouseover="this.className='bigchange'"
  onmouseout="this.classname='start'" class="start"
        style="cursor:hand">
  放大这段文本。 </span> </p> </body>
  //*定义鼠标触发事件,当鼠标放上去的时候,区域内以bigchange类的格式显示,
  当鼠标离开的时候,以start类显示*//
  </html>

  这个例子很简单,容易理解,就不多说什么了。

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


上一篇:超强,用CSS构建iframe效果 下一篇:CSS样式表应用技巧两则
大部分文章摘自网上,如有侵犯您的权益请与我们联系,我们会第一时间进行处理,谢谢! [ 打印文章 ] [ 关闭窗口 ]
推荐文章
·利用CSS改善网站可访问性
·用CSS控制网页总体风格
·DropShadow属性、Chroma属性和bl
·CSS字型的设定
·CSS应用基础教程(1) 基本认识
·为打印输出创建一个CSS样式
·WEB设计中CSS样式表应用小技巧十
·XHTML+CSS的静态页面实现多风格
·实例详解CSS滤镜(5)DropShadow属
·实例详解CSS滤镜(10)Xray属性
相关文章
·如何在网页中动态改变样式
·巧用CSS动态控制文本的属性
最新文章
·CSS制作11种风格不同的特效文字
·利用CSS改善网站可访问性
·显示/隐藏引出的CSS Bug
·网页技巧之怎样编写CSS
·CSS快速入门
·有关表格边框的css语法整理
·巧用CSS控制鼠标样式变换
·CSS实例:横线样式的输入框
·巧用CSS滤镜做图案文字
·CSS自定义属性Expression
Google