第三章节CSS的基本语法.pptVIP

第3章 CSS的基本语法 CSS语法中最基本的语法是选择器的概念和选择器的声明。本章将详述CSS的各种选择器，正确使用CSS选择器能为建立标准的XHTML页面带来很多的好处。本章还将讲述CSS的继承和层叠，理解和掌握这些概念是使用CSS样式表的重要基础。本章内容包括： 深入讲解CSS语句的基本组成部分：选择器和声明 讲解CSS的继承和层叠 3.1 选择器 选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。 3.1.1 标签选择器 一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。图3.1为标签选择器的结构。 3.1.2 类选择器 使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。图3.3为标签选择器的结构。 3.1.3 ID选择器 ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。图3.5为标签选择器的结构。 3.1.4 全局选择器 全局选择器是一个星号。它能作用于XHTML文档中的所有元素。图3.7为全局选择器的结构。 3.1.5 组合选择器 标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。 3.1.6 继承选择器 学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。以下通过实例来详细讲解这两个重要的CSS概念。 1．文档树 2．CSS的继承 3．继承选择器 3.1.7 伪类 伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：first-child、:link:、vistited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:active、vistited和:hover。 3.2 声明 声明是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则： 声明中属性和值之间用分号隔开； 声明中可以包含多个属性，详见3.2.1小节多重声明； 使用多重声明时，每个声明用分号隔开； 声明的大括号必须书写完整。 3.2.1 多重声明 多重声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。 3.2.2 集体声明 集体声明是指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。设置好网页中某个元素的CSS样式后，另外一个元素也要应用相同的样式。 3.3 CSS的层叠原理 CSS的全称为Cascading Style Sheets，中文翻译为层叠样式表。学习CSS的层叠（cascading）是深入学习CSS原理的基础。本节将详细讲解CSS的层叠原理。当出现多个样式共同作用于某个页面元素时，就需要决定哪一个会被应用。CSS的层叠就是一个决定CSS样式优先级的规则。在深入理解CSS的层叠规则前，先要理解以下相关的内容。 3.3.1 CSS样式来源 在之前的章节中，每个XHTML文档的外观都是由CSS样式表控制的。实际上除了网页设计师制作的CSS样式表外，还有其他样式表影响着网页文档的外观。在浏览器上运行的网页文档受以下三个CSS样式表控制外观： 浏览器的默认样式 用户自定义的样式 网页作者制作的样式 3.3.2 选择器的优先级 由于CSS的某些属性有继承性，一个页面元素往往应用了多个选择器定义的CSS样式。CSS的选择器具有优先级，用于决定哪个选择器定义的样式最终被应用到页面元素上。选择器的优先级可以用数