不錯，很多網(wǎng)頁設(shè)計都需要選擇適當(dāng)?shù)念伾岉撁嬗凶羁岬耐庥^，不過在真正的網(wǎng)頁設(shè)計中，可能更多的時間都花在這樣一些問題上：文本放在哪里，文本的外觀是怎樣的。由于存在這些問題，出現(xiàn)了一些HTML標(biāo)記（如<FONT>和<CENTER>）允許你對文本的外觀和放置有所控制。

因為文本如此重要，所以有很多CSS屬性以這樣或那樣的方式影響文本。文本和字體之間有什么不同呢？簡單地講，文本是內(nèi)容，而字體用于顯示這個內(nèi)容。使用文本屬性，可以控制文本相對于該行余下內(nèi)容的位置、使其作為上標(biāo)、加下劃線，以及改變大小寫等。甚至還可以有限地模擬打字機的Tab鍵的使用。

下面先來討論如何影響文本在行中的水平定位。寫一個時事通訊或做一份報告時，你可能會采取一些步可以把這些基本動作看作是這些步驟的一部分。

縮進(jìn)文本

將Web頁面上一個段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果（去除段落之間的空行是第二常用的方法，這個內(nèi)容將在第7章討論）。有些網(wǎng)站在段落的第一個字母前放一個很小的透明圖像，這些圖像將文本推到后面來制造一種縮進(jìn)文本的感覺.另外一些網(wǎng)站則使用完全非標(biāo)準(zhǔn)的SPACER標(biāo)記。在CSS網(wǎng)站制作中，有一種更好的方法實現(xiàn)文本縮進(jìn)，即 text-indent 屬性。

計算值：

對于百分?jǐn)?shù)值，要根據(jù)指定確定，對于長度值，則為絕對長度

通過使用text-indent屬性，所有元素的第一行都可以縮進(jìn)一個給定長度，甚至該長度可以是負(fù)值。當(dāng)然，這個屬性最常見的用途是將段落的首行縮進(jìn)：

p {text-indent: 3em;}

這個規(guī)則會使所有段落的首行縮進(jìn)3em。

一般地，可以為所有塊級元素應(yīng)用text-indent,但無法將這個屬性應(yīng)用到行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用text-indent屬性。不過，如果一個塊級元素（如段落）的首行中有一個圖像，它會隨著該行的其余文本移動。

注意：如果想把一個行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。

text-indent還可以設(shè)置為負(fù)值，利用這種技術(shù)，可以實現(xiàn)很多有意思的效果。最常見的用途是一種“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：

p {text-indent:-4em;}

在為text-indent設(shè)置負(fù)值時要當(dāng)心：上例中前3個詞（“This is a”）可能會超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對負(fù)縮進(jìn)再設(shè)置一個外邊距或一些內(nèi)邊距：

p {text-indent:-4em; padding-left: 4em;}

不過，負(fù)縮進(jìn)也可以得到充分利用?？紤]下面的例子，如圖6-2所示，這里增加了一個浮動圖像：

p.hang {text-indent:-25px;}

<img src="star.gif" style="width: 60px; height: 60px;

float: left; alt="An image of a five-pointed star."/>

<p> This paragraph has a negatively indented first

line, which overlaps the floated image that precedes the text. Subsequent

lines do not overlap the image, since they are not indented in any way.</p>

使用這個簡單的技術(shù)可以實現(xiàn)很多有意思的設(shè)計。

text-indent可以使用所有長度單位（包括百分?jǐn)?shù)值）。在下面的例子中，百分?jǐn)?shù)要相對于縮進(jìn)元素父元素的寬度。換句話說，如果將縮進(jìn)值設(shè)置為10%,所影響元素的第一行會縮進(jìn)其父元素寬度的10%。

水平對齊

與text-indent相比，text-align是一個更基本的屬性，它會影響一個元素中的文本行相互之間的對齊方式。前3個值相當(dāng)直接，不過第4個和第5個則略有些復(fù)雜。

要理解這些值是如何工作的，最快的辦法就是查看圖6-5。

顯然，值left，right和center會導(dǎo)致元素中的文本分別左對齊、右對齊和居中。因為text-align只應(yīng)用于塊級元素（如段落），所以無法將行內(nèi)的一個錨居中而不影響行中的其余部分（你可能也不想這么做.因為這很可能導(dǎo)致文本重疊）。

西方語言都是從左向右讀，所以text-align的默認(rèn)值是left。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對于希伯來語和阿拉伯語之類的語言，text-align則默認(rèn)為right，因為這些語言從右向左讀。不出所料，center會使每個文本行在元素中居中。

注意：將塊級元素或表元素居中，這要通過在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來實現(xiàn).詳細(xì)內(nèi)容見第7章。

雖然你可能認(rèn)為text-align: center與<CENTER>元素的作用一樣，但實際上二者大不相同。<CENTER>不僅影響文本，還會把整個元素居中，如表。text-align不會控制元素的對齊，而只影響其內(nèi)部內(nèi)容。圖6-5很清楚地展示了這一點。實際元素沒有從一端移到另一端。只是其中的文本受影響。

警告：IE6之前的IE/Win有一個危害較大的bug:它確實會把text-align: center處理為<CENTER>元素，不僅將文本居中，還會將元素居中。在IE6和更高版本IE的標(biāo)準(zhǔn)模式中就不會這樣了，但在IE5.X和較早版本中仍是如此。

最后一個水平對齊屬性是：justify，它會帶來自己的一些問題。在兩端對齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上，如圖6-6所示。然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等。兩端對齊文本在打印領(lǐng)域很常見（例如，本書就使用了兩端對齊文本），不過在CSS網(wǎng)頁設(shè)計中，還需要多做些考慮。

要由用戶代理（而不是CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會平均分布字母間的額外空間（不過CSS規(guī)范特別指出，如果letter-spacing屬性指定為一個長度值，“用戶代理不能進(jìn)一步增加或減少字符間的空間”）。還有一些用戶代理可能會減少某些行的空間，使文本擠得更緊密。所有這些做法都會影響元素的外觀，甚至改變其高度，這取決于用戶代理的對齊選擇影響了多少文本行。

CSS也沒有指定應(yīng)當(dāng)如何處理連字符（注1）[1]。大多數(shù)兩端對齊文本都使用連字符將長單詞分開放在兩行上，從而縮小單詞之間的間隔，改善文本行的外觀。不過，由于CSS沒有定義連字符行為，用戶代理不太可能自動加連字符。因此，在CSS中，兩端對齊文本看上去沒有打印出來好看，特別是元素可能太窄，以至于每行只能放下幾個單詞。當(dāng)然，使用窄設(shè)計元素是可以的，不過要當(dāng)心相應(yīng)的缺點。