在制作網(wǎng)頁(yè)時(shí)，傳統(tǒng)布局中，一般使用HTML的align屬性來(lái)定義對(duì)象水平對(duì)齊，這種用法在過(guò)渡型文檔類型中依然可以使用。CSS使用text-align屬性來(lái)定義文本的水平對(duì)齊方式，該屬性的用法如下：
text-align : left | right | center | justify
該屬性取值包括4個(gè)：其中l(wèi)eft表示默認(rèn)值，左對(duì)齊；right表示右對(duì)齊；center表示居中對(duì)齊；justify表示兩端對(duì)齊。
【示例】新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，定義居中對(duì)齊類樣式。
.left{ text-align:left;} /*左對(duì)齊*/
.center { text-align:center; } /*居中對(duì)齊*/
.right{ text-align:right;} /*右對(duì)齊*/
.justify{ text-align:justify;} /*兩端對(duì)齊*/
然后在<body>標(biāo)簽中輸入兩行段落文本，并分別使用傳統(tǒng)的HTMLalign屬性和標(biāo)準(zhǔn)設(shè)計(jì)中的CSS的text-align屬性定義文本居中。
<p align="left">左對(duì)齊</p>
<p class="center">居中對(duì)齊</p>
<p class="right">右對(duì)齊</p>
<p class="justify">兩端對(duì)齊</p>
定義垂直對(duì)齊在傳統(tǒng)布局中，一般元素不支持垂直對(duì)齊效果，不過(guò)在表格中可以實(shí)現(xiàn)。例如，在下面表格結(jié)構(gòu)中使用td元素的valign屬性定義單元格內(nèi)包含的對(duì)象垂直居中顯示。
<table border="1">
<tr> <
td valign="middle">垂直對(duì)齊</td>
</tr>
</table>
CSS使用vertical-align屬性來(lái)定義文本垂直對(duì)齊問(wèn)題，該屬性的用法如下：
vertical-align : auto | baseline | sub |
super | top | text-top | middle | bottom |
text-bottom | length
其中，auto屬性值將根據(jù)layout-flow屬性的值對(duì)齊對(duì)象內(nèi)容；baseline表示默認(rèn)值，表示將支持valign特性的對(duì)象內(nèi)容與基線對(duì)齊；sub表示垂直對(duì)齊文本的下標(biāo)；super表示垂直對(duì)齊文本的上標(biāo)；top表示將支持valign特性的對(duì)象的內(nèi)容對(duì)象頂端對(duì)齊；text-top表示將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊；middle表示將支持valign特性的對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊；bottom表示將支持valign特性的對(duì)象的內(nèi)容與對(duì)象底端對(duì)齊；text-bottom表示將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊；length表示由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值或者百分?jǐn)?shù)，可為負(fù)數(shù)，定義由基線算起的偏移量，基線對(duì)于數(shù)值來(lái)說(shuō)為0，對(duì)于百分?jǐn)?shù)來(lái)說(shuō)就是0%。
【示例】新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，定義上標(biāo)類樣式。
.super { vertical-align:super;}
然后在<body>標(biāo)簽中輸入一行段落文本，并應(yīng)用該上標(biāo)類樣式。
<p>vertical-align表示垂直<span class="super">對(duì)齊</span>屬性</p>
在網(wǎng)站建設(shè)時(shí)，定義間距CSS使用letter-spacing屬性定義字間距，使用word-spacing屬性定義詞距。這兩個(gè)屬性的取值都是長(zhǎng)度值，由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成，既可以是絕對(duì)數(shù)值又可以是相對(duì)數(shù)值，默認(rèn)值為nor-mal，它表示默認(rèn)間隔。定義詞距時(shí)，以空格為基準(zhǔn)進(jìn)行調(diào)節(jié)，如果多個(gè)單詞被連在一起，則被word-spacing:視為一個(gè)單詞；如果漢字被空格分隔，則分隔的多個(gè)漢字就被視為不同的單詞，word-spacing:屬性此時(shí)有效。
【示例】新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，定義兩個(gè)類樣式。
.lspacing { letter-spacing:1em;}
.wspacing { word-spacing:1em;}
然后在<body>標(biāo)簽中輸入兩行段落文本，并應(yīng)用上面兩個(gè)類樣式。
<p class="lspacing">letter spacing（字間距）</p><p class="wspacing"> word spacing（詞間距）</p>
注意：網(wǎng)頁(yè)制作時(shí)字距和詞距一般很少使用，使用時(shí)應(yīng)慎重考慮用戶的閱讀體驗(yàn)和感受。對(duì)于中文用戶來(lái)說(shuō)，letter-spacing屬性有效，而word-spacing:屬性無(wú)效。
當(dāng)前文章標(biāo)題：如何在網(wǎng)頁(yè)制作時(shí)使用CSS定義文本樣式（三）
當(dāng)前URL：http://americanwasteexpansions.com/news/wzzz/3064.html
