如何在网页制作时使用CSS定义文本样式（三）-盈岚科技

如何在网页制作时使用CSS定义文本样式（三）

2019-07-31 14:45:06
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

定义水平对齐

在制作网页时，传统布局中，一般使用HTML的align属性来定义对象水平对齐，这种用法在过渡型文档类型中依然可以使用。CSS使用text-align属性来定义文本的水平对齐方式，该属性的用法如下：

text-align : left | right | center | justify

该属性取值包括4个：其中left表示默认值，左对齐；right表示右对齐；center表示居中对齐；justify表示两端对齐。

【示例】新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义居中对齐类样式。

.left{ text-align:left;} /*左对齐*/

.center { text-align:center; } /*居中对齐*/

.right{ text-align:right;} /*右对齐*/

.justify{ text-align:justify;} /*两端对齐*/

然后在<body>标签中输入两行段落文本，并分别使用传统的HTMLalign属性和标准设计中的CSS的text-align属性定义文本居中。

定义垂直对齐在传统布局中，一般元素不支持垂直对齐效果，不过在表格中可以实现。例如，在下面表格结构中使用td元素的valign属性定义单元格内包含的对象垂直居中显示。

<tr> <

td valign="middle">垂直对齐</td>

</tr>

</table>

CSS使用vertical-align属性来定义文本垂直对齐问题，该属性的用法如下：

vertical-align : auto | baseline | sub |

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%。

【示例】新建一个网页，保存为test.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，定义上标类样式。

.super { vertical-align:super;}

然后在<body>标签中输入一行段落文本，并应用该上标类样式。

<p>vertical-align表示垂直<span class="super">对齐</span>属性</p>

　在网站建设时，定义间距CSS使用letter-spacing属性定义字间距，使用word-spacing属性定义词距。这两个属性的取值都是长度值，由浮点数字和单位标识符组成，既可以是绝对数值又可以是相对数值，默认值为nor-mal，它表示默认间隔。定义词距时，以空格为基准进行调节，如果多个单词被连在一起，则被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（字间距）</p><p class="wspacing"> word spacing（词间距）</p>

注意：网页制作时字距和词距一般很少使用，使用时应慎重考虑用户的阅读体验和感受。对于中文用户来说，letter-spacing属性有效，而word-spacing:属性无效。