[javascript特效代码.docVIP

第4章 CSS样式特效 课程目标 会使用style样式属性动态改变边框颜色 会使用className类名属性动态改变按钮背景图片 会使用display显示属性实现层或图片的隐藏/显示和切换特效 教学过程 在第3章中，已学习了window对象下一个非常重要的对象——document，使用该对象能控制页面中所有的元素。不过，在第3章中我们使用document对象主要用来控制页面中的层和表单元素，从而实现浮动广告窗口和复选框全选或反选的功能。 本章将介绍另一种比较特别的特效——CSS样式特效。通过定义CSS样式，就可以制作出绚丽多彩的页面。不过为了能动态地改变页面或局部区域的显示外观，还需要学习如何使用Javascript控制CSS样式，也就是CSS样式特效。样式特效非常多，本章主要讲解一些在商业网站中见得比较多的经典的常用的样式特效，如改变按钮背景图片特效，层的显示/隐藏特效、图片的显示/隐藏特效等。下面开始CSS样式特效的制作之旅吧！ 4.1、回顾已学的CSS样式表 4.1.1 CSS简介 CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。简单地说，CSS就是用于设置网页样式的一套规范，他和HTML都是一个共同的组织W3C负责制定和发布的。 下面说下CSS和HTML之间的关系，HTML是用于定义一个网页的内容和结构，CSS用于定义这个网页的形式。因为对一个网页而言，他既要求有清晰的结构和丰富的内容，同时也要求有良好的外观，非常美观的、漂亮的页面表现形式。这样使用两套规范可以实现这个目标，而且也有利于对网页进行维护。因此就发布了两套规范，HTML和CSS，分别用于定义网页的内容和形式。 为什么使用CSS样式表呢？ （1）、HTML标签的外观样式比较单一，颜色只有黑白而且字体类型和大小无变化。 （2）、样式表的作用相当于华丽的衣服 （3）、样式表能实现内容与样式的分离，方便团队开发 4.1.2、样式表的基本语法 样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式（STYLE）的基本语法由3部分构成：selector(选择器)，属性(property)和属性值(value)。 2.1 样式表的基本结构 CSS定义可以是一个独立的文件也可以放入HTML文档中，这就和我们后面要将的样式表的嵌入方式有关，在这里不多讲，后面会重点讲解。不管是独立的文件还是HTML文档所有的样式规则都必须放在STYLE/STYLE标签对之间。如果是嵌入ＨＴＭＬ文档中，一般位于HTML文件的头部，即HEAD/HEAD标签之间定义的规则就可应用到当前的页面中了。关于这些规则的具体意思，下面我们来重点讲解。 2.2 样式规则 刚才我们也说了，CSS的具体语法是由3部分组成，选择器，属性和属性值。 这里重要的就是选择器，首先来了解下什么是选择器。实际上是这样的，网页上有很多的元素，由各种标记定义，像我们已经学过的有文本、段落、图像、表格等，当我需要对其中的某些元素进行设置的时候，我必须先指定哪些元素要进行设置，那么就需要选择，CSS选择器就是这样的概念来选择需要定义设置的页面标记。在CSS中，选择器可以有多种形式。基本上包括三种标记选择器，类选择器和ID选择器。 （1）标记选择器 标记选择器中前面是选择器的名称，后面大括号内表示声明的内容，也就是说，前面的选择器用于定义你选中的网页中的哪些元素，后面的声明用于说明这些元素以什么样的形式显示。属性和值要用冒号隔开，如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。举例说明。 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义: h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素，每个标题元素的文字都为绿色) p, table{ font-size: 9pt } (段落和表格里的文字尺寸为9号字) 效果完全等效于: p { font-size: 9pt } table { font-size: 9pt } （2）类选择符 用类选择符你能够把相同的元素分类定义不同的样式，而且也可以把不同的元素定义相同的样式。定义类选择符时，在自定类的名称前面加一个点号。然后用不在不同的段落里，只要在HTML标记里加入你定义的c