3.2 文本基本样式
文本样式主要涉及多个字符的排版效果。CSS在命名属性时，使用font前缀和text前缀来区分字体和文本属性。
3.2.1 定义水平对齐
视频讲解
CSS使用text-align属性来定义文本的水平对齐方式，用法如下。
text-align : left | right | center | justify
该属性取值包括4个：left表示左对齐，默认值；right表示右对齐；center表示居中对齐；justify表示两端对齐。CSS3新增了4个属性：start | end | match-parent | justify-all，由于浏览器支持不是很好，读者可以先暂时了解。
【示例1】本示例定义文档中段落文本居中显示。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义居中对齐类样式。
.center { text-align:center;}/* 居中对齐类样式 */
在<body>标签中输入两行段落文本，并分别使用传统的HTMLalign属性和标准设计中CSS的text-align属性定义文本居中。
<p align="center">昨夜西风凋碧树，独上高楼，望尽天涯路</p><!-- 传统居中对齐方式 -->
<p class="center">衣带渐宽终不悔，为伊消得人憔悴</p> <!-- 标准居中对齐方式 -->
<!-- 标准居中对齐方式 -->
<p class="center">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处</p>
在浏览器中预览，可以看到使用传统方式和标准方式设计文本居中的效果是相同的。
【示例2】当text-align属性取值为justify时，可以结合text-justify属性实现更多对齐样式。本示例定义第一段文本两端对齐，第二段文本保持默认对齐方式，效果如图3.5所示。
图3.5 两端对齐和默认对齐显示
3.2.2 定义垂直对齐
视频讲解
CSS使用vertical-align属性来定义文本垂直对齐方式，用法如下。
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
取值简单说明如下。
☑ auto：表示将根据layout-flow属性的值对齐对象内容。
☑ baseline：默认值，表示将支持valign特性的对象内容与基线对齐。
☑ sub：表示垂直对齐文本的下标。
☑ super：表示垂直对齐文本的上标。
☑ top：表示将支持valign特性的对象的内容对象顶端对齐。
☑ text-top：表示将支持valign特性的对象的文本与对象顶端对齐。
☑ middle：表示将支持valign特性的对象的内容与对象中部对齐。
☑ bottom：表示将支持valign特性的对象的内容与对象底端对齐。
☑ text-bottom：表示将支持valign特性的对象的文本与对象底端对齐。
☑ length：表示由浮点数字和单位标识符组成的长度值或者百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%。
【示例1】本示例将演示如何设置字体垂直对齐。新建一个网页，保存为test1.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义上标类样式。
.super {vertical-align:super;}
在<body>标签中输入一行段落文本，并应用该上标类样式。
<p>vertical-align表示垂直<span class=" super ">对齐</span>属性</p>
在浏览器中预览，则显示效果如图3.6所示。
图3.6 文本上标样式效果
【示例2】本示例演示了不同垂直对齐方式的比较效果。
vertical-align属性提供的值很多，但是IE浏览器与其他浏览器对于解析它们的效果却存在很大的分歧。一般情况下，不建议广泛使用这些属性值，实践中主要用到vertical-align属性的垂直居中样式，偶尔也会用到上标和下标效果。
新建一个网页，保存为test2.html，在<body>标签内输入如下结构。
<p>valign:
<span class="baseline"><img src="images/box.gif" title="baseline" /></span>
<span class="sub"><img src="images/box.gif" title="sub" /></span>
<span class="super"><img src="images/box.gif" title="super" /></span>
<span class="top"><img src="images/box.gif" title="top" /></span>
<span class="text-top"><img src="images/box.gif" title="text-top" /></span>
<span class="middle"><img src="images/box.gif" title="middle" /></span>
<span class="bottom"><img src="images/box.gif" title="bottom" /></span>
<span class="text-bottom"><img src="images/box.gif" title="text-bottom" /></span>
</p>
在<head>标签内添加<style type="text/css">标签，定义内部样式表。然后定义如下类样式。
body {font-size:48px;}
.baseline {vertical-align:baseline;}
.sub {vertical-align:sub;}
.super {vertical-align:super;}
.top {vertical-align:top;}
.text-top {vertical-align:text-top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
在浏览器中预览测试，则显示效果如图3.7所示。用户可以通过效果图直观地比较这些取值的效果。
图3.7 垂直对齐取值效果比较
3.2.3 定义字距和词距
视频讲解
CSS使用letter-spacing属性定义字距，使用word-spacing属性定义词距。这两个属性的取值都是长度值，由浮点数字和单位标识符组成，默认值为normal，表示默认间隔。
定义词距时，以空格为基准进行调节，如果多个单词连在一起，则被word-spacing:视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
【示例】本示例演示了如何定义字距和词距样式。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义内部样式表，然后输入下面样式，定义两个类样式。
.lspacing {letter-spacing:1em;} /* 字距类样式 */
.wspacing {word-spacing:1em;} /* 词距类样式 */
在<body>标签中输入两行段落文本，并应用上面两个类样式。
<p class="lspacing">letter spacing word spacing（字间距）</p>
<p class="wspacing">letter spacing word spacing（词间距）</p>
在浏览器中预览，则显示效果如图3.8所示。从图中可以直观地看到，所谓字距就是定义字母之间的间距，而词距就是定义西文单词的距离。
图3.8 字距和词距演示效果比较
注意：字距和词距一般很少使用，使用时应慎重考虑用户的阅读体验和感受。对于中文用户来说，letter-spacing属性有效，而word-spacing属性无效。
3.2.4 定义行高
视频讲解
行高也称为行距，是段落文本行与文本行之间的距离。CSS使用line-height属性定义行高，用法如下。
line-height : normal | length
其中，normal表示默认值，一般为1.2em；length表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值。
【示例1】本示例演示了如何定义段落文本行高样式。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义两个行高类样式。
在<body>标签中输入两行段落文本，并应用上面两个类样式。
在浏览器中预览，则显示效果如图3.9所示。
【示例2】本示例演示了不同取值下，行高样式的比较效果。行高取值单位一般使用em或百分比，很少使用像素，也不建议使用。
☑ 当line-height属性取值小于一个字大小时，就会发生上下行文本重叠的现象。在上面的示例基础上，修改定义的类样式。
.p1 { line-height:0.5em;}
.p2 { line-height:0em;}
在浏览器中预览，显示效果如图3.10所示，说明当取值小于字体大小时，多行文本会发生重叠现象。
图3.9 段落文本的行高演示效果
图3.10 段落文本重叠演示效果
☑ 一般行高的最佳设置范围为1.2em～1.8em，当然对于特别大的字体或者特别小的字体，可以特殊处理。因此，用户可以遵循字体越大、行高越小的原则来定义段落行高。例如，如果段落字体大小为12px，则行高设置为1.8em比较合适；如果段落字体大小为14px，则行高设置为1.5em～1.6em比较合适；如果段落字体大小为16px～18px，则行高设置为1.2em比较合适。一般浏览器默认行高为1.2em左右。例如，IE默认为19px，如果除以默认字体大小（16px），则约为1.18em；而Firefox默认为1.12em。
【示例3】本示例演示了如何设置更灵活的行高样式。
用户可以给line-height属性设置一个数值，但是不设置单位。例如：
body { line-height:1.6;}
这时浏览器会把它作为1.6em或者160%，也就是说页面行高实际为19px。利用这种特殊的现象，可以解决多层嵌套结构中行高继承出现的问题。
新建一个网页，保存为test2.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面的样式，设置网页和段落文本的默认样式。
body {
font-size:12px;
line-height:1.6em;
}
p { font-size:30px;}
在<body>标签中输入如下标题和段落文本。
上面示例定义body元素的行高为1.6em。由于line-height具有继承性，因此网页中的段落文本的行高也继承body元素的行高。浏览器在继承该值时，并不是继承“1.6em”这个值，而是把它转换为精确值（即19px）之后再继承，换句话说，p元素的行高为19px，但是p元素的字体大小为30px，继承的行高小于字体大小，就会发生文本行重叠现象。如果在浏览器中预览，则演示效果如图3.11所示。
图3.11 错误的行高继承效果
解决方法如下。
在定义body元素的行高时，不为其设置单位，即直接定义为line-height:1.6，这样页面中其他元素所继承的值为1.6，而不是19px，则内部继承元素就会为继承的值1.6附加默认单位em，最后页面中所有继承元素的行高都为1.6em。
body {
font-size:12px;
line-height:1.6;
}
p { font-size:30px;}
3.2.5 定义缩进
视频讲解
CSS使用text-indent属性定义首行缩进，用法如下。
text-indent : length
length表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值。建议在设置缩进单位时，以em为设置单位，它表示一个字距，这样比较精确确定首行缩进效果。
【示例1】本示例演示了如何为段落文本定义首行缩进效果。新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义段落文本首行缩进两个字距。
p {text-indent:2em;} /* 首行缩进两个字距 */
在<body>标签中输入如下标题和段落文本。
在浏览器中预览，则可以看到文本缩进效果。
【示例2】使用text-indent属性可以设计悬垂缩进效果。新建一个网页，保存为test1.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义段落文本首行缩进负的两个字符，并定义左侧内部补白为两个字符。
text-indent属性可以取负值，定义左侧补白，是为防止取负值缩进导致首行文本伸到段落的边界外边。
在<body>标签中输入如下标题和段落文本。
<h1>《人间词话》节选</h1>
<h2>王国维</h2>
<p>古今之成大事业、大学问者，必经过三种之境界："昨夜西风凋碧树。独上高楼，望尽天涯路。"此第
一境也。"衣带渐宽终不悔，为伊消得人憔悴。"此第二境也。"众里寻他千百度，蓦然回首，那人却在，灯火
阑珊处。"此第三境也。此等语皆非大词人不能道。然遽以此意解释诸词，恐为晏欧诸公所不许也。</p>
在浏览器中预览，则可以看到文本悬垂缩进效果，如图3.12所示。
图3.12 悬垂缩进效果