11.3.2 段落

在 word 中，一般都是通过段落来组织文本，段落是十分重要的组成部分。而 word 中的段落，主要有字体和段落两大属性。本节重点介绍字体和段落属性，在CSS中的对应属性及应用方法。

字体属性

word中的字体属性包括字体、字形、字号、字体颜色、下划线、效果等，如图 11‑11 所示：

字体通过 font-family属性进行设置，为属性设置两个值，并把英文字体写在前面，中文字体写在后面，实现中文和英文使用不同字体。如：

p  {
    font-family:  "Arial", "SimSun";
}

字形的可选值有常规、加粗、倾斜、加粗 倾斜，共 4 个选项。默认情况下，就是常规字形。把 font-weight属性设置为bold，可实现加粗效果。把 font-style属性设置为 italic 或 oblique，则可实现倾斜效果。而要实现加粗 倾斜的效果，单一属性就无法实现，就需要定义两个类选择器，一个用于定义加粗，一个用于定义倾斜。CSS代码如下：

.bold  {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

然后，为段落应用这两个类，类名称之间用空格隔开即可。HTML代码如下：

<p class="bold italic ">…</p>

默认情况下，字体颜色为黑色，通过 color属性来改变字体颜色。可以使用预定义颜色名、或RGB颜色的十六进制表示法、数字表示法、百分比表示法，也可以使用RGBA、HSL、HSLA颜色。如：

p  {
    color:  black;
}

文本的下划线，可以通过 text-decoration: underline 来实现。但是，word 中的下划线种类繁多，而CSS的下划线就是一条线，类型单一，目前还无法模拟这么多的下划线类型，期待 text-decoration属性支持自定义线条或图像后，才能通过CSS实现该功能。

效果中的删除线，可以通过 text-decoration: line-through 来实现，而双删除线目前还无法实现。上标和下标无需CSS，可以分别通过HTML的标记 sup 和 sub 来实现。阴影、空心、阳文、阴文效果，都可以通过 text-shadow属性实现，在5.2.2节已经详细介绍，这里就不再赘述。

段落属性

word中的段落属性包括对齐方式、大纲级别、缩进、间距、行距等，如图 11‑12 所示：

对齐方式通过 text-align属性进行设置，可以设置为左、中、右、两端对齐等，最常用的是左对齐，也是默认的对齐方式。

大纲级别的作用是修改段落的级别，可以把段落修改为标题 h1 ~ h6，设置为标题后，段落文本会加粗显示，同时字体大小也会发生变化。在网页设计中，如果纯纯为了应用标题的样式，而把段落修改为标题，是笔者极力反对的作法，推荐使用CSS来控制样式。

缩进通过 text-indent属性进行设置，对于中文，最常用的就是首行缩进两个字符，文本到达容器边界而自动换行后，首行文本相对于其他行，会缩进两个字符。当然，也可以设置为悬挂缩进，它跟普通缩进正好相反，首行文本相对于其他行，会突出两个字符。设置缩进时，建议使用 em 单位，这样，无论字体大小是多少，首行始终缩进 n个字符的宽度。如：

p  {
   text-indent: 2em;
}

间距用来设置两个段落之间的垂直距离，通过段落的上下外边距来设置，margin-top 用来设置段前间距，marging-bottom属性用来设置段后间距。默认情况下，段落为块级元素，两个相邻的垂直外边距相遇后，会发生外间距合并。所以，要给段前、段后分别设置 1 倍的行间距，就可以这么写：

p  {
   maigin: 1em;
}

行距用来设置段落内发生换行后，两行文本基线间的垂直距离，实际上就是CSS中的行高，使用 line-height属性来设置。Word中的行间距是直接使用数字，而不是长度单位，因为这样会更灵活。在CSS中，也建议直接使用数字。如：

p  {
   line-height: 2;
}

在CSS中，段落默认是块级元素，盒模型中的 width、height、padding、border、margin属性，都适用于段落。除了这些属性外，还可以设置段落的文字方向、背景、边框、多列等属性，也可以为段落应用鼠标特性、动画等属性。具体的细节，读者可以参阅相关章节，限于篇幅，不再赘述。