下载掌阅APP，畅读海量书库
立即打开
微视频
CSS+DIV是Web标准中常用术语之一，与早期的表格定位方式比较，CSS+DIV可以非常灵活地布局页面，可以制作出漂亮而又充满个性的网页。
使用DIV进行网页排版，是现在流行的一种趋势。<div>标记作为一个容器标记被广泛地应用在<html>语言中。利用这个标记，加上CSS对其控制，可以很方便地实现各种效果。<div>标记早在HTML 3.0时代就已经出现，但那时并不常用，直到CSS的出现，才逐渐发挥出它的优势。
<div>标记可以理解为一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会因此而改变。
下面给出一个实例，通过设置<div>标记，绘制了一个div容器，容器中放置了一段文字。打开记事本，在其中输入如下代码：
运行效果如图3-16所示，可以看到一个矩形方块的div层，居中显示，字体显示为红色，边框为浅红色，背景为浅黄色。
图3-16 div层显示
CSS指层叠样式表（Cascading Style Sheets），对于设计者来说，CSS是一个非常灵活的工具，使用户不必再把复杂的样式定义编写在文档结构当中，而将有关文档的样式内容全部脱离出来。这样做的最大优势就是在后期维护中只需要修改代码即可。
CSS样式表是由若干条样式规则组成的，这些规则可以应用到不同的元素或文档，来定义它们显示的外观。每一条样式规则由三部分构成：选择符（selector）、属性（property）和属性值（value），基本格式如下：
selector{property: value}
（1）selector：选择符可以采用多种形式，可以为文档中的HTML标签，例如，<body><table><p>等，但是也可以是XML文档中的标签。
（2）property：属性则是选择符指定的标签所包含的属性。
（3）value：指定了属性的值。如果定义选择符的多个属性，则属性和属性值为一组，组与组之间用分号（；）隔开。基本格式如下：
selector{property1: value1;
property2: value2; ...}
例如，下面就给出一条样式规则：
p{color: red}
该样式规则的选择符是p，即为段落标签<p>提供样式，color为指定文字颜色属性，red为属性值。此样式表示标签<p>指定的段落文字为红色。
如果要为段落设置多种样式，可以使用如下语句：
p{font-family:"隶书"; color:red;
font-size:40px; font-weight:bold}
下面给出一个实例，通过设置CSS样式，来制作一个产品销售统计表。打开记事本，在其中输入如下代码：
运行效果如图3-17所示。
图3-17 产品销售统计表最终效果
要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
CSS的灵活性首先体现在选择器上，选择器类型的多少决定着应用样式的广度和深度。精美的网页效果需要有更强大的选择器来精准控制对象的样式。根据所获取页面中元素的不同，可以把CSS选择器分为五大类。
（1）基本选择器；
（2）复合选择器；
（3）伪类选择器；
（4）属性选择器。
其中，复合选择器包括：子选择器、相邻选择器、兄弟选择器、包含选择器和分组选择器。伪类选择器包括：动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。
如果想要一个页面中所有HTML标签使用同一种样式，可以使用全局选择器。其语法格式为：
*{property:value}
其中，*表示对所有元素起作用，property表示CSS3属性名称，value表示属性值。使用示例如下：
*{margin:0; padding:0;}
下面给出一个实例，通过设置CSS选择器，来定义网页元素显示方式。打开记事本，在其中输入如下代码：
运行效果如图3-18所示，可以看到<body>标签中的段落和标题都是以黑色字体显示，大小为20px。
图3-18 全局选择器效果显示
将网页上每个HTML元素都认为是长方形的盒子，是网页设计上的一大创新。在控制页面方面，盒子模型有着至关重要的作用，熟练掌握盒子模型及其各个属性，是控制页面中每个HTML元素的前提。
CSS3中，所有的页面元素都可以包含在一个矩形框内，这个矩形框称为盒子。盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成的。此外在盒子模型中，还具备高度和宽度两个辅助属性，盒子模型如图3-19所示。
图3-19 盒子模型
从图3-19中可以看出，盒子模型包含如下4部分。
（1）content（内容）：内容是盒子模型中必需的一部分，内容可以是文字、图片等元素。
（2）padding（空白）：也称内边距或补白，用来设置内容和边框直接的距离。
（3）border（边框）：可以设置内容边框线的粗细、颜色和样式等，前面已经介绍过。
（4）margin（边界）：外边距，用来设置内容与内容之间的距离。
一个盒子的实际高度（宽度）是由content+padding+border+margin组成的。在CSS3中，可以通过设定宽度和高度来控制内容的大小，并且对于任何一个盒子，都可以分别设定4条边的空边框、空白和边界。
通过CSS3中的弹性盒子可以创建响应式页面。所谓响应式页面，就是能够智能地根据用户行为及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局所形成的网页。
下面通过一个案例来学习如何使用弹性盒子创建响应式页面。打开记事本，在其中输入如下代码：
运行效果如图3-20所示。按住浏览器的右边框拖曳，增加浏览器的宽度，效果如图3-21所示。继续增加浏览器的宽度，效果如图3-22所示，可见该网页是一个简单的响应式页面。
图3-20 程序运行结果
图3-21 增加浏览器的宽度
图3-22 再次增加浏览器的宽度