第14章　DIV与CSS结合

本章介绍DIV+CSS布局方法，DIV只不过是个层而已，并不会给网页添加什么。CSS（Cascading Style Sheet）是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。DIV通过与CSS的结合，使CSS能够控制DIV的外观、大小等。在网页中可通过外接方式链接CSS文件，也可以通过内接方式写CSS文件，还可以在＜div＞中加入style方式结合样式文件。

学习本章，将会了解以下内容：

❑用CSS控制DIV；

❑CSS文件链接；

❑内联样式；

❑内部样式表示；

❑链接外部样式；

❑DIV+CSS实例。

14.1　用CSS控制DIV

HTML中的＜div＞＜/div＞标记对是放在＜body＞＜/body＞中的标记对，每个＜div＞＜/div＞标记对代表一个层，＜div＞里面有很多属性，有id、class、align和style等，对层进一步描述，这几个属性都比较常用。

用CSS来控制DIV，即用样式表来控制DIV，在前面章节提到过，最基本的是在＜div＞标记里用style表示，用来描述里面的样式，语法形式如下。

＜div style=#＞＜/div＞

“#”代表样式的内容，每个样式都以名值对（一个属性名称对应一个值，在CSS代码中都是这种形式）出现，中间用冒号间隔开来，如下面代码。

＜div style="width：760px；height：200px；"＞这表示一个层＜/div＞

以上代码中表示一个层，层中被样式表控制着，样式表内容是宽度为760像素（px），高度为200像素，其中宽度和高度都是名称，数值表示数据再加单位，分号代表名值对结束，所以一个名值对表示样式表的一个动作或效果，代码14.1表示了设置一个层的边框、背景颜色和高度。

代码14.1　源代码\第14章\用CSS控制DIV.html

——————————————文件名：用CSS控制DIV.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞CSS控制DIV＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！-设置内联样式—＞

07 ＜div style="background：blue；border：1px solid#cccccc；height：100px；"＞这是一个层！

08 ＜/div＞

09 ＜/body＞

10 ＜/html＞

【代码解析】在代码第7行的＜div＞中有样式属性，即用style表示，双引号里面是名值对形式的样式表内容，background表示背景，为蓝色，即blue（也可以用#0000ff，前面提到过颜色值的两种表示方法），效果如图14.1所示。

图　14.1　用CSS控制DIV

在＜div＞的style中，可以包含很多样式名值对，样式内容越多，对层的控制越多，那么写起来的长度也越长，为了解决这个问题，可以把所有的样式表内容写到一个文件中，详情请看14.2节。

注意　style的样式中有分号，这个分号是不能省略的，代表本语句（名值对）结束。