第三章 DIV+CSS 布局基础

第三章 DIV+CSS 布局基础学习要点：

• CSS 的基本语法• DIV+CSS 布局基础

3.1 CSS 的基本语法 CSS （ Cascading Style Sheet ）的

中文译名是层叠样式表。 CSS 用于控制网页元素的外观， CSS 提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。使用 DIV+CSS 的布局方式改变了传统 html+table 的布局方式。

DIV+CSS 的布局方法简单来说就是使用 div 标签作为容器，使用 CSS 技术来排布 div 标签的布局方法。

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 文档的外观都

是由 CSS 样式表控制的。实际上除了网页设计师制作的 CSS 样式表外，还有其他样式表影响着网页文档的外观。在浏览器上运行的网页文档受以下三个 CSS 样式表控制外观：

浏览器的默认样式用户自定义的样式网页作者制作的样式

（ 2 ）选择器的优先级由于 CSS 的某些属性有继承性，一个页面元素往往应用了多个选择器定义的 CSS 样式。 CSS 的选择器具有优先级，用于决定哪个选择器定义的样式最终被应用到页面元素上。选择器的优先级可以简单由高到低排列如下：• !important 最高 • inline style • id selector • class selector • element selector • * universal selector

（ 2 ）选择器的优先级<style type="text/css"> p {font-size:22px;} .name {font-size:22px;} #idname {font-size:30px;}</style> </head> <body> <p> 上海 <span class="name" id="idname"> 理工 </span> 大学 </p> </body>

（ 3 ） !important 语句 CSS2.0 中使用重要规则提升声明中某个属性

设置的优先级。重要规则就是 !important 语句。在声明的属性设置中使用了 !important 语句，其优先级最高。

如： p{font-size:24px !important;}

p{font-size:30px;}

（ 4 ）顺序优先级当出现多个相同的选择器设置相同的属性时，后定义

的选择器优先级较高。如： p{font-size:24px;}

p{font-size:30px;}

1>. 定义样式通常定义样式有 4 种方法：（ 1 ）、内联定义样式：内联定义样式是混合在 HTML 标记里使用的样式，即使用标记的 Style 属性定义的适用于该标记的样式，例如：<TD style=“background-color:green;font-size:12px;

line-height:20px;”> 样式实例 </TD>

就是定义表格的单元格背景为绿色，单元格字体大小为 12px ，行距为 20px 。

4. 样式

（ 2 ）、定义内部样式块对象：定义内部样式快就是针对页面中某些公共元素的样式比较类似，如果使用内联定义方法逐个元素地定义比较繁琐，而且维护麻烦，此时就可以在网页的 <html> 和 <body> 标记之间插入一个 <style>…</style> 块对象来统一定义，页面运行时会自动引用。例如：<head>

<style type=“text/css”>

body {color:#333333;background-image:url(“image/bg.gif”)}

</style>

</head>

（ 3 ）、导入外部样式表：导入外部样式表是指在 HTML 文件头部的 <style>…</style> 标记之间，利用 CSS的 @import 声明引入外部样式表。例如：<head><style type="text/css">h2 {color:green}</style> 注意：导入外部样式表必须在样式表的开始部分，即在其他内部样式表上面。

（ 4 ）、链入外部样式表：链入外部样式表是指在 HTML 文件的头信息标记 <head>…</head> 之间，利用 <link> 标记连接到外部样式表文件。例如：<head runat="server"><link href="stylefile/style1.css" rel="stylesheet" type="text/css" /></head> 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑。

2>. 样式的优先级依照后定义的优先原则，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。

5. 实例：简单的竖型菜单本实例讲解如何制作一个简单的竖型菜单。本

例子中的菜单选项在静态时是褐色，当鼠标滑过菜单选项时文字会放大变色，并且显示灰色底色。

3.2 DIV+CSS 布局基础在对 CSS 技术的基础知识有了一定的掌握后就

可以开始学习 DIV+CSS 的布局的方法。 DIV+CSS的布局方法简单来说就是使用 div 标签作为容器，使用 CSS 技术来排布 div 标签的布局方法。常用的CSS 布局方式有浮动、定位等。本节内容包括：

• 了解 DIV+CSS 布局的流程• 学习盒模型以及盒模型的基本元素• 学习页面元素的布局方式

1. DIV+CSS 布局的流程使用 DIV+CSS的布局方法制作标准的 XHTML页面的一般流程如下：

• 首先确定网页的布局结构。• 根据结构，设定好 XHTML 文档中用于排版的 div

标签。• 使用 css 样式排布 div 标签。• 重复上述步骤细分 div 标签内的内容。

2. 了解盒模型盒模型是 DIV+CSS 布局的基础，要实现 DIV+CSS 布

局必须了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如， p 标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用 DIV+CSS 布局， div 标签就是布局中所用到的容器。大部分人认为只有 div 标签能作为容器来安排布局。其实在 XHTML 页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，从而形成一个页面的布局。

（ 1 ） div 标签的盒模型例子以下以 div 标签的盒模型为例子，说明盒模型的基本概念。 div

{width:200px;height:200px;background:#ccc;padding:10px;border:10px solid red;margin:10px;}

（ 2 ）基本盒模型下图所示为基本盒模型。在页面中的所有元素

都遵循该模型的设置方式。

（ 3 ）边距边距用于设置页面元素与其他元素的距离。 C

SS 的 margin 属性用于设置边距距离。1 ．用长度单位设定 margin 的值，如： margin:20p

x;

2 ．用百分比设定 margin 的值，如： margin:10%;

3 ．边距值的缩写4 ．单边距值5 ．边距重叠

（ 4 ）补白补白用于增加页面元素边框与内容之间的空间。 CSS 的 padding 属性用于设置补白。

1 ．用长度单位设定 padding 的值2 ．用百分比设定 padding 的值

（ 5 ）边框边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。CSS 中提供了 border-width 、 border-color 、border-style三个设置边框的属性：

1 ．边框样式2 ．边框宽度3 ．边框颜色4 ．边框缩写

3. 页面元素的布局在了解基本盒模型后，就要开始进入页面

元素布局的学习。页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别。掌握了这些内容就能对 DIV+CSS 布局的原理有相当清晰的理解。

(1) 块级元素与行内元素• 所有的 XHTML 页面元素只有两种，一是块级元素一是行内元素。块级元素一般都从新行开始，它可以容纳行内元素和块级元素。行内元素只能容纳文本或其他行内元素。

• 使用 CSS 的 display 属性（的 block 和 inline 值）能使行内元素和块级元素相互转换。

p {background:#ccc;display:inline;}… <p> 第一行文段 </p> <p> 第二行文段 </p> …

(2) CSS 布局方式：常规流 CSS 有三种基本的布局方式，分别是常

规流、浮动和定位。所谓常规流（ normal flow ）是指页面元素按照所在 XHTML 文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。

(3) CSS 布局方式：浮动• 使用浮动布局是目前网页制作中较为常用的

方式。应用了浮动的元素脱离原来的常规流模式。浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。

• CSS 提供 float 属性用于设置元素的浮动，它包含三个值，分别是 left 、 right 和 none 。设置浮动为 left 值，元素向页面左边浮动；设置浮动为 right ，元素向页面右边浮动；设置浮动为 none ，元素不浮动。

① 两个元素的浮动应用• 在页面布局中，很

多时候会使用两个元素的浮动应用。例如，页面为两分栏的结构、图文混排都应用了两个元素的浮动。

② 多个元素的浮动应用• 在页面布局中，多

个元素的浮动常用于相册排版、列表排版等。本例子有四个 div 标签，其中最外侧的 div 标签是父元素，其余三个元素是子元素。

③ 清除浮动使用浮动后，常产生很多意外的结果，因为浮动的元素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元素，这时需要使用 CSS 的 clear属性来清除浮动。 clear 属性有四个值，分别是 none 、 left 、 right 和 both ，以下是四个值的意义。

none ：允许两边都可以有浮动对象； both ：不允许有浮动对象； left ：不允许左边有浮动对象； right ：不允许右边有浮动对象。

（ 4 ） CSS 布局方式：相对定位除了使用浮动布局外，常用的布局方式还有定位。 CSS 提供 position 属性用于定位。使用 position 定位可以定义元素相对其父元素或者其他元素的精确位置。 Position 属性共有四个关键字值，分别是 static 、 absolute 、 relative 和 fixed 。

其中 static 为默认值，表示无定位，即块保持在原来的位置上，通常不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用 position:static 取消继承，即还原元素定位的默认值。

absolute代表绝对定位， relative代表相对定位，这两种定位方式是最常用的。首先讲述相对定位。

① 单个元素的相对定位

使用相对定位，就是子元素相对于自身偏移的位置。要确定子元素相对于自身偏移了多少，就要使用 top 、 bottom 、 left 和 right 属性来确定。这四个属性能使用长度单位或者关键字 auto 来设置。例如设定子元素的 position 属性为 relative ，然后设置 top 为 10像素，则子元素会相对于自身的顶部边界下移 10像素。

② 两个元素的相对定位• 当子元素增加到两个

的时候，使用相对定位的情况就变得较为复杂。本例子有三个 div 标签，其中一个命名为“ father” 的 div标签是父元素，另外两个个元素是子元素。设置第一个子元素的 position 属性为 relative ，top 属性为 10像素。

（ 5 ） CSS 布局方式：绝对定位使用绝对定位的子元素，其移动是相对于已经定位的父元素。若其父元素并未定位，那么使用绝对定位的子元素就会相对最初的包含块来定位。通常这个最初的包含块是 html 标签。

① 单个元素的绝对定位使用绝对定位同样有 top 、 bottom 、

left 和 right四个用于移动的属性。示例示范了父元素没有定位的情况。本例子有两个 div 标签，其中一个命名为“ father” 的 div 标签是父元素，另外一个元素是子元素。设置子元素的 position 属性为 absolute ， top 属性为 5像素。

② 两个元素的绝对定位• 当子元素增加到两

个的时候，使用绝对定位的情况就变得较为复杂。使用绝对定位的元素会脱离原来的常规流，位置停留在父元素的左上角。

Documents

第三章 DIV+CSS 布局基础