HTML页面布局和排版是CSS的主要功能。虽然HTML标签都有默认的样式，但是为了丰富页面的内容，我们仍需要使用CSS重新设置页面的样式。

6.5.1　设置字体

CSS字体属性用于定义文本的字体系列、大小、加粗、风格和变形。CSS中设置了两种类型的字体系列名称，一种是拥有相似外观的字体系列组合，称为通用字体系列，总共有5种，包括Serif字体、Sans-serif字体、Monospace字体、Cursive字体和Fantasy字体；另一种是具体的字体系列，称为特定字体系列，如Times或Courier。

在CSS中使用font-family属性设置字体，例如下面这段代码：

在这段代码中，我们为标题h1设置字体为Cambria。通常情况下，这样设置是没有问题的，但是如果用户的电脑上没有安装Cambria字体，系统可能会使用通用自体中比较接近的一种字体替代Cambria字体。为了避免出现这种不确定的情况，我们在设置字体的时候可以指定一系列类似的字体，例如下面这段代码：

当系统找不到Cambria字体时，就会继续匹配后面一种字体，以此类推。这里还需要说明的一点是，有些字体的名称可能由多个单词组成，例如Hoefler Text，在设置这种字体时需要使用引号，因为这类字体名称中间有一个空格。某些字体名称可能包含#或者$之类的字符，也需要使用引号。

6.5.2　文字排版

文本是HTML页面中的主要内容，CSS中使用font属性设置文本的样式。font是一系列关于语法和如何使用CSS调整文字的概述。下面我们详细地进行介绍。

（1）font-size：设置文字的大小。

不同大小的文字可以让网页看起来更有层次感。HTML标签也有默认的文字大小，例如HTML标题标签，从<h1>到<h6>文本的大小逐渐减小，而<p>标签表示的段落也有默认的大小。这些标签都不用特别设置文字的大小，除非有特殊的需要。

例如下面这段代码：

在这段代码中有两个<h1>标签，它们本来应该有相同的文字大小，但是通过CSS样式将第2个<h1>标题文字大小设置为20px，所以运行这段代码后，效果如图6.10所示。

（2）font-weight：设置文本的粗细。

在HTML标签中，<b>标签和<strong>标签用于显示粗体的文本。除此之外，我们还可以通过设置font-weight属性控制文本的粗细。在CSS中，从100～900指定了9个级别的文本粗细，100表示最细的文本，900表示最粗的文本。另外还有几种预定义选项，如normal相当于设置字体粗细为400，bold相关于700，bolder相当于比所继承值更粗的一个字体，lighter相当于比继承值更细的一个字体。例如下面这段代码：

在这段代码中有4个段落标记，每个段落都设置了不同的字体粗细，运行这段代码后，效果如图6.11所示。

虽然我们设置了4种不同的字体粗细，但是只能看到正常和加粗两种效果，这是因为大部分浏览器只能显示这两种效果。

（3）text-transform：设置文本的大小写状态。

text-transform属性的值总共有5个，capitalize表示首字母大写，uppercase表示全部大写，lowercase表示全部小写，none表示正常没有变化（默认值），inherit表示继承其父级对象的属性。该属性对中文没有效果。例如下面这段代码：

在这段代码中总共有5个段落，分别设置了不同的text-transform属性值，前3种都对应各自的效果，最后两种效果相同，因为最后一个段落应用的样式中，inherit对应的父级元素body并没有设置text-transform属性，所以采用默认的none值，这样它们的效果就一样了。运行这段代码后，效果如图6.12所示。

（4）text-decoration：设置文本的修饰效果。

CSS中text-decoration的属性值有6个，详细说明如表6.2所示。

例如下面这段代码：

运行这段代码后的效果如图6.13所示。闪烁效果因为使用的很少，目前已经没有浏览器支持这个效果。而HTML中的超链接在默认情况下都有一个下划线的效果，为了让页面文本有一个统一的效果，通常会使用text-decoration:none取消超链接的下划线效果。

（5）font-variant：设置小型的大写字母。

font-variant属性值有3个，normal表示标准的字体，small-caps表示显示小型大写字母的字体，而inherit表示从父元素继承font-variant属性的值，该属性对中文无效。

例如下面这段代码：

运行这段代码后，效果如图6.14所示。虽然都是<h2>标记的内容，但是第2行文本都是大写字母，除首字母外，其他字母明显小了很多。

（6）letter-spacing和word-spacing：添加空白。

这两个属性都用来添加对应元素的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。由于word-spacing修饰的对象是单词，所以对中文无效。例如下面这段代码：

运行这段代码后，效果如图6.15所示。

（7）font缩写：使用font属性描述以上所有的属性。

以上介绍的这些文字排版属性，都可以使用font属性缩写，这样可以有效提高CSS的书写效率。使用缩写的时候，可以参照以下顺序。

如果不设置line-height，元素的line-height将会默认为1，而不会从父级元素或body元素继承。使用缩写的时候，某些选项可以省略不写，但是font-size和font-family是必须的。

6.5.3　通栏排版

通栏排版是文字排版中常见的一种排版形式，主要应用于新闻、法律以及文字为主的对象。通栏排版经常使用<p>标签、<h1>到<h6>标签、<span>标签等。将文字作为这些标签的内容，然后再对段落文字应用间距、行距、字号等样式控制，例如下面这段代码：

在这段代码中，我们使用了<h2>和<p>标签通栏排版文字，<h2>标签用于排版标题内容，<p>标签用于排版段落内容，并对<p>标签设置了样式，包括首行缩进、字体大小和行高，运行这段代码后的效果如图6.16所示。

6.5.4　分栏排版

分栏排版是指将文字内容排列成两栏或多栏进行显示，常见于报纸的排版形式。在HTML中常用<div>元素来表示某一个区域，如果要分两栏排版，可以使用两个并排显示的<div>元素表示两个分栏，每个<div>元素中的内容就是分栏显示的内容。例如下面这段代码：

在这段代码中，我们先略去分栏的内容，看一下用<div>元素组织的分栏结构，代码如下所示：

这是一个<div>元素内嵌了两个<div>元素，内嵌的两个<div>元素就是分栏的结构。通过id选择器设置了外层<div>元素的宽度和高度，margin:0px auto表示上下外边距为0，左右外边距自动分配，并设置了背景颜色。通过class选择器设置了内层<div>元素的宽度，padding:10px 25px表示上下内边距为10px，左右内边距为25px。最后一个至关重要的属性float:left表示这两个<div>元素向左浮动，这样就形成了分栏效果。运行这段代码后，效果如图6.17所示。

6.5.5　图文混合排版

图像和文本是HTML页面中经常会同时出现的两个内容，处理图像和文本的排版也是CSS的功能之一。例如，我们将图像放在一个<div>元素中，然后插入到页面中，代码如下所示：

这段代码只是对插入的图片大小进行了缩放，其他样式都没有改变，运行这段代码后的效果如图6.18所示。

如果要将插入的图片显示在中间位置，可以添加以下样式：

刷新页面后的效果如图6.19所示。

另外，图文混排效果还可以将文字环绕在图像周围，这就需要添加以下代码：

刷新页面后，效果如图6.20所示。

6.5.6　不规则文字环绕

CSS中的float属性可以影响周围元素的排列方式，使用这一特性，我们就可以制作出图像和文字不规则的环绕效果。例如下面这段代码：

在这段代码中，外层的<div>元素作为一个大容器，内嵌了很多<div>元素和文字。首先在样式中通过通配符选择器设置所有内外边距为0，并设置颜色、字号和加粗效果，然后通过id选择器设置外层<div>的背景图像，最后通过class选择器设置内嵌的<div>元素向左浮动，并及时清理浮动。设置<div>元素的右边距为25px，字号大小为9px，高度为16px，这样设置后，所有内嵌的<div>元素与图像就会浮动起来。最后也是关键的一步，通过行间样式表设置每个内嵌<div>的宽度，这样就可以控制环绕文字距离左边距的距离，达到不规则的效果。运行这段代码后的效果如图6.21所示。

6.5.7　全图混排

全图混排通常会应用于相册类的页面中，将很多张图像在一个页面内集中展示，在设置全图混排效果时，我们仍然需要用float这个属性。例如以下HTML页面代码：

在这段代码中，最外边的<div>元素作为主容器，内嵌的<div>元素中又分别内嵌了图像<img>、标题<h2>和段落<p>元素，没有设置任何样式的效果如图6.22所示。

首先为内嵌的<div>元素设置样式，相关代码如下：

在这段代码中，首先设置了<div>元素的边框，使用float属性让<div>元素向左浮动，然后设置内外边距，以及<div>元素的宽度和高度，使用text-align:center属性设置内容居中显示，并使用overflow:hidden属性设置隐藏超出的内容。刷新页面后效果如图6.23所示。

下面设置<div>元素中的图像样式，相关代码如下，刷新页面后的效果如图6.24所示。

最后设置<div>元素中段落的样式，相关代码如下：

这里设置段落中的字号为10px，首行缩进两个字符，并让段落文本居左对齐，刷新页面后的效果如图6.25所示。

6.5.8　表格和边框

如今大家都习惯了使用DIV+CSS布局页面，其实Table+CSS曾经也是流行的页面布局方式。下面我们详细介绍CSS样式如何美化表格和边框的外观。

（1）表格边框：使用border属性可以设置表格的边框。例如下面这段代码，使用border属性设置了<table>、<th>和<td>的边框属性，效果如图6.26所示。

（2）折叠边框：使用border-collapse属性设置是否将表格边框折叠为单一边框。如图6.26所示，虽然给表格添加了边框，但是显示的是多个边框，其中包括了表格边框、表头边框和单元格边框。如果为表格添加下面的样式，就可以将表格的边框显示为单一的边框，效果如图6.27所示。

（3）表格的宽度和高度：通过width和height属性设置表格的宽度和高度。

（4）表格文本对齐：使用text-align和vertical-align属性设置表格中文本的对齐方式。使用text-align属性设置水平对齐方式，如左对齐、右对齐或者居中；使用vertical-align属性设置垂直对齐方式，如顶部对齐、底部对齐或居中对齐。

（5）表格内边距：使用padding属性可以设置表格内边距。例如下面这段代码，表头内边距为5px，单元格内边距为10px，效果如图6.28所示。

（6）表格的颜色：表格中边框的颜色通过border属性进行设置，表格中文本的颜色通过color属性进行设置，表格中背景的颜色通过background-color属性进行设置。例如下面这段代码：在这段代码中，分别对表头的背景色、单元格的背景色、表头字体颜色和单元格字体颜色，以及边框颜色进行了设置。运行后的效果如图6.29所示。

（7）边框样式：样式是边框最重要的一个方面，因为如果不设置边框样式，将无法显示边框。在CSS中可以通过border-style属性设置10种不同的边框样式，这10种边框样式如表6.3所示。

如图6.30所示为部分边框样式效果。