第九章JavaScript控制页面样式.ppt

JavaScript程序设计教程 软件学院 胡 沛 2016年11月 第九章 JavaScript控制页面样式 9.1 CSS基础 CSS（Cascading Style Sheets）层叠样式表。 它是W3C组织定义和维护的标准，其目的是为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）。 可以使用CSS来控制文件的颜色、字体、排版等显示特性。 CSS将网页的结构与呈现分隔开来，它带来了许多好处： （1）页面代码的可读性增强； （2）页面代码结构更加灵活； （3）作者和读者都可以控制网页的显示样式； （4）代码文件的组织结构简化。 每一条样式规则具有3个必备的要素： （1）选择器：它决定了哪些页面元素受到样式规则的影响。 （2）样式属性：如color，background； （3）样式值：如red，white。 样式属性和样式值是成对出现的，它们指定了元素的呈现样式。 p { color: red; background: white; } 这条样式规则所表达的含义就是：页面中所有的p元素，其背景色为白色，前景色为红色。 9.1.1 选择器 1．常用选择器 （1）类型选择器 类型选择器用来寻找特定类型的元素，例如： p { color: red; background: white; } /* 段落元素p */ a { font-family: Verdana; color: Aqua; } /* 链接或锚a */ 在类型选择器中只需指定希望应用样式的元素名称。类型选择器又叫做为元素选择器或简单选择器。 （2）后代选择器 后代选择器可用来寻找特定元素或元素组的后代。后代选择器由多个选择器构成，之间用空格分隔。 div p{backgroud:yellow} 其中的“div p就是关联选择器，它表示div中的p/p标签对的背景为黄色，而其它地方出现的p/p标签对则不受影响。 （3）class选择器 class属性用来定义一组有共同功能或格式的HTML元素。 要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。 p class=stopparagraph1/p p class=warningparagraph2/p p class=normalparagraph3/p （4）ID选择器 ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，ID selector就是为样式规则定义语句选择具有某一ID属性值的HTML元素。 span id=yellowonetext here/span style #yellowone{color:yellow} /style （5）伪元素选择器 伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。 如：对于超链接的正常状态，访问过的状态，选中状态、光标移动到超链接文本上的状态；段落的首字母和首行，都可以使用伪元素选择器来定义。 HTML元素:伪元素{属性:值} A:active{属性:值} 选中超链接时的状态 A:hover{属性:值} 标移动到超链接上的状态 A:link{属性:值} 超链接时的正常状态 A:visited{属性:值} 访问过超链接时的正常状态 （6）组合选择器 为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号隔开。 H1,H2,H3,TD{color:red;} 2．高级选择器 （1）通用选择器 通用选择器可能是所有选择器中最强大而使用频率却是最低的。 * {margin:0 0 0 0; color: black;} （2）子选择器 子选择器与后代选择器比较类似，不同之处在于：后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。 ul li {background-color : red;} （3）相邻同胞选择器 如果希望根据一个元素与另一个元素的相邻关系对它应用样式，则可以使用相邻同胞选择器。 h1 + p {font-style : italic;} （4）属性选择器 属性选择器可以根据某个属性是否存在或属性的值来寻找元素，它能够实现一些非常有趣的效果。 div[title] {border-bottom-style : dashed;} div[title]:hover {cusor:help;} 9.1.2 继承 应用样式的元素的后代会继承样式的某些属性，比如颜色或字号。 继承是CSS中非常有用的概