在制作網頁時，傳統(tǒng)布局中，一般使用HTML的align屬性來定義對象水平對齊，這種用法在過渡型文檔類型中依然可以使用。CSS使用text-align屬性來定義文本的水平對齊方式，該屬性的用法如下：
text-align : left | right | center | justify
該屬性取值包括4個：其中l(wèi)eft表示默認值，左對齊；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>標簽中輸入兩行段落文本，并分別使用傳統(tǒng)的HTMLalign屬性和標準設計中的CSS的text-align屬性定義文本居中。
<p align="left">左對齊</p>
<p class="center">居中對齊</p>
<p class="right">右對齊</p>
<p class="justify">兩端對齊</p>
定義垂直對齊在傳統(tǒng)布局中，一般元素不支持垂直對齊效果，不過在表格中可以實現。例如，在下面表格結構中使用td元素的valign屬性定義單元格內包含的對象垂直居中顯示。
<table border="1">
<tr> <
td valign="middle">垂直對齊</td>
</tr>
</table>
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%。
【示例】新建一個網頁，保存為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，它表示默認間隔。定義詞距時，以空格為基準進行調節(jié)，如果多個單詞被連在一起，則被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:屬性無效。
當前文章標題：如何在網頁制作時使用CSS定義文本樣式（三）
當前URL：http://iy5y368.cn/news/wzzz/3064.html
