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

因?yàn)槲谋救绱酥匾?，所以有很?/span>CSS屬性以這樣或那樣的方式影響文本。文本和字體之間有什么不同呢？簡(jiǎn)單地講，文本是內(nèi)容，而字體用于顯示這個(gè)內(nèi)容。使用文本屬性，可以控制文本相對(duì)于該行余下內(nèi)容的位置、使其作為上標(biāo)、加下劃線，以及改變大小寫等。甚至還可以有限地模擬打字機(jī)的Tab鍵的使用。

下面先來(lái)討論如何影響文本在行中的水平定位。寫一個(gè)時(shí)事通訊或做一份報(bào)告時(shí)，你可能會(huì)采取一些步可以把這些基本動(dòng)作看作是這些步驟的一部分。

縮進(jìn)文本

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

計(jì)算值：

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

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

p {text-indent: 3em;}

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

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

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

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

p {text-indent:-4em;}

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

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

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

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>

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

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

水平對(duì)齊

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

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

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

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

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

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

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

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

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

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