- CSS3网页设计从入门到精通（微课精编版）
- 前端科技
- 1930字
- 2021-03-26 03:49:45
3.2 设计文本样式
文本样式主要用于设计正文的排版效果，属性名以text为前缀进行命名，下面分别进行介绍。
3.2.1 定义文本对齐
使用CSS3的text-align属性可以定义文本的水平对齐方式，用法如下：
text-align: left | right | center | justify
其中left为默认值，表示左对齐；right为右对齐；center为居中对齐；justify为两端对齐。
【示例】新建test.html文档，在内部样式表中定义3个对齐类样式。
然后在<body>标签中输入3段文本，并分别应用这3个类样式。
在浏览器中预览，比较效果如图3.6所示。
图3.6 比较3种文本对齐效果
提示：CSS3为text-align属性新增多个属性值，简单说明如下。
justify：内容两端对齐（CSS2曾经支持过，后来放弃）。
start：内容对齐开始边界。
end：内容对齐结束边界。
match-parent：与inherit（继承）表现一致。
justify-all：效果等同于justify，但还会让最后一行也两端对齐。
由于大部分浏览器对这些新属性值支持不是很友好，读者可以暂时忽略。
【拓展】
text-align属性仅对行内对象有效，如文本、图像、超链接等，如果想让块元素对齐显示，如设计网页居中显示，设计<div>标签右对齐等，则需要特殊方法，感兴趣的读者可以扫码深入阅读。
3.2.2 定义垂直对齐
使用CSS3的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%。
【示例】新建test1.html文档，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义上标类样式。
.super {vertical-align:super;}
然后在<body>标签中输入一行段落文本，并应用该上标类样式。
<p>vertical-align表示垂直<span class=" super ">对齐</span>属性</p>
在浏览器中预览，则显示效果如图3.7所示。
图3.7 文本上标样式效果
【拓展】
vertical-align属性仅对行内对象有效，如文本、图像、超链接等，如果想让块元素对齐显示，需要特殊方法，感兴趣的读者可以扫码深入阅读。
3.2.3 定义文本间距
使用CSS3的letter-spacing属性可以定义字距，使用CSS3的word-spacing属性可以定义词距。这两个属性的取值都是长度值，由浮点数字和单位标识符组成，默认值为normal，表示默认间隔。
定义词距时，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。
【示例】下面示例演示如何定义字距和词距样式。
新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义两个类样式。
然后在<body>标签中输入两行段落文本，并应用上面两个类样式。
在浏览器中预览，则显示效果如图3.8所示。从图中可以直观地看到，所谓字距就是定义字母之间的间距，而词距就是定义西文单词的距离。
图3.8 字距和词距演示效果比较
注意：字距和词距一般很少使用，使用时应慎重考虑用户的阅读体验和感受。对于中文用户来说，letter-spacing属性有效，而word-spacing属性无效。
3.2.4 定义行高
使用CSS3的line-height属性可以定义行高，用法如下：
line-height : normal | length
其中normal表示默认值，一般为1.2em；length表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值。
【示例】新建test.html文档，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，输入下面样式，定义两个行高类样式。
然后在<body>标签中输入两行段落文本，并应用上面两个类样式。
在浏览器中预览，则显示效果如图3.9所示。
图3.9 段落文本的行高演示效果
【拓展】
line-height属性的用法比较复杂，灵活使用该属性，可以设计很多特殊效果，感兴趣的读者可以扫码深入阅读。
3.2.5 定义首行缩进
使用CSS3的text-indent属性可以定义文本首行缩进，用法如下：
text-indent: length
length表示百分比数字或者由浮点数字和单位标识符组成的长度值，允许为负值。建议在设置缩进单位时，以em为设置单位，em表示一个字距，这样可以比较精确地确定首行缩进效果。
【示例1】使用text-indent属性设计首行缩进效果。
新建test.html文档，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，输入下面样式，定义段落文本首行缩进2个字距。
p {text-indent:2em;} /*首行缩进2个字距*/
然后在<body>标签中输入如下标题和段落文本。
在浏览器中预览，则可以看到文本缩进效果，如图3.10所示。
图3.10 首行缩进效果
【示例2】使用text-indent属性设计悬垂缩进效果。
新建一个网页，保存为test1.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。输入下面样式，定义段落文本首行缩进负的2个字距，并定义左侧内部补白为2个字距。
text-indent属性可以取负值，定义左侧补白，防止取负值缩进导致首行文本伸到段落的边界外边。
然后在<body>标签中输入如下标题和段落文本。
在浏览器中预览，则可以看到文本悬垂缩进效果，如图3.11所示。
图3.11 悬垂缩进效果