[第三章与任奇课件.pptVIP

第3章 DIV + CSS布局基础 3.1 CSS的基本语法 CSS（Cascading Style Sheet）的中文译名是层叠样式表。CSS用于控制网页元素的外观，CSS提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。使用DIV+CSS的布局方式改变了传统html+table的布局方式。 CSS语法中最基本的语法是选择器的概念和选择器的声明。正确使用CSS选择器能为建立标准的XHTML页面带来很多的好处。本章还将讲述CSS的继承和层叠，理解和掌握这些概念是使用CSS样式表的重要基础。 1 选择器 选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。 （1）标签选择器 一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。下图为标签选择器的结构。 （2）类选择器 使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。下图为类选择器的结构。 （3）ID选择器 ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。下图为ID选择器的结构。 （4）全局选择器 全局选择器是一个星号。它能作用于XHTML文档中的所有元素，即用全局选择器声明的CSS 样式可以应用于整个XHTML文档的任何标签。下图为全局选择器的结构。 （5）组合选择器 标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。 （6）继承选择器 学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。 1．文档树 2．CSS的继承 3．继承选择器 （7）伪类 伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的，伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。但是有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:active、vistited和:hover。 2. 声明 声明是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则： 声明中属性和值之间用冒号隔开； 声明中可以包含多个属性； 使用多重声明时，每个声明用分号隔开； 声明的大括号必须书写完整。 （1）多重声明 多重声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。 如： h1{color:blue;font-size:24px;font-weight:bold;} （2）集体声明 集体声明是指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。设置好网页中某个元素的CSS样式后，另外一个元素也要应用相同的样式。 如：.one,#two,p{color:red;} 3. CSS的层叠原理 CSS的全称为Cascading Style Sheets，中文翻译为层叠样式表。学习CSS的层叠（cascading）是深入学习CSS原理的基础。当出现多个样式共同作用于某个页面元素时，就需要决定哪一个会被应用。CSS的层叠就是一个决定CSS样式优先级的规则。 （1）CSS样式来源 在之前的实例中，每个XHTML文档的外