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　悬垂缩进效果

上一章目录下一章