第9章j如avascript控制页面样式课件.pptVIP

第9章 JavaScript控制页面样式  本章将介绍如何在网页中使用JavaScript控制页面呈现的样式，在阅读本章之前读者应当具备一定的CSS基础知识，本章第1节也将对CSS的基础知识进行简要介绍。 第2节则对样式编程的相关知识进行讲解，最后结合多个应用示例，说明样式编程在Web开发中的具体应用。 本章是本书中关于DOM部分的最后一章，因此将有相当一部分示例对第7章和第8章介绍的DOM基础和事件的知识进行综合运用。 9.1 CSS基础 CSS的全称是Cascading Style Sheets，中文名称为层叠样式表。 它是W3C组织定义和维护的标准，其目的是为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。 CSS有多种版本（Level），了解要使用的CSS版本是很重要的。 CSS 1在1996年成为推荐标准，包括字体、颜色等基本属性，CSS 2在其基础上新增了浮动、定位等高级概念，以及更高级的选择器。 目前CSS的最新版本是CSS 2.1，为W3C的候选推荐标准，下一版本CSS 3仍然在开发过程中。 在实际应用中使用CSS必须考虑到各种操作系统、各种浏览器及其版本对CSS支持程度的差异。 网页的读者和作者都可以使用CSS来控制文件的颜色、字体、排版等显示特性。 CSS将网页的结构与呈现分隔开来，它带来了许多好处： （1）页面代码的可读性增强； （2）页面代码结构更加灵活； （3）作者和读者都可以控制网页的显示样式； （4）代码文件的组织结构简化。 CSS由多个样式规则组成，以下是一个简单的样式规则定义： p { color: red; background: white; } 每一条个样式规则具有3个必备的要素： （1）选择器：它决定了哪些页面元素受到样式规则的影响，如前面样式规则中的p，它表示样式规则将对页面中所有的p元素起作用； （2）样式属性：如color，background； （3）样式值：如red，white。 样式属性和样式值是成对出现的，它们指定了元素的呈现样式。 前面的样式规则所表达的含义就是：页面中所有的p元素，其背景色为白色，前景色为红色。 9.1.1 选择器 1．常用选择器 最常用的选择器包括是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，例如： p { color: red; background: white; } /* 段落元素p */ a { font-family: Verdana; color: Aqua; } /* 链接或锚a */ 在类型选择器中只需指定希望应用样式的元素名称。类型选择器又叫做为元素选择器或简单选择器。 后代选择器可用来寻找特定元素或元素组的后代。后代选择器由多个选择器构成，之间用空格分隔。 类型选择器和后代选择器通常用于定义一般性样式，使页面内的同类型元素具有相同的呈现风格。 如果希望对特定的元素指定样式，可以使用ID选择器或类选择器。 另一种常用的选择器是伪类，通常用于链接进行动态样式设置。 2．高级选择器 （1）通用选择器 通用选择器可能是所有选择器中最强大而使用频率却是最低的。 （2）子选择器 子选择器与后代选择器比较类似，不同之处在于：后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。 （3）相邻同胞选择器 如果希望根据一个元素与另一个元素的相邻关系对它应用样式，则可以使用相邻同胞选择器。 （4）属性选择器 属性选择器可以根据某个属性是否存在或属性的值来寻找元素，它能够实现一些非常有趣的效果。 9.1.2 层叠与特殊性 在同一个页面上应用多个样式规则，那么就有可能有两个或者更多的样式规则应用与同一个元素，那么就需要一种机制来决定这些样式规则的优先级。 这种机制在CSS中称作层叠（Cascade），它为每个样式分配了一个重要度。作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。 为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。 因此，层叠采用以下的重要度次序：