網(wǎng)頁(yè)設計中CSS2包含一個(gè)屬性來(lái)為文本增加陰彩，不過(guò)這個(gè)屬性并沒(méi)有在CSS2.1中保留，因為在CSS2.1完成前沒(méi)有一個(gè)瀏覽器對此提供了充分的支持?？梢钥紤]一下，如果要讓網(wǎng)站設計師確定一個(gè)元素中文本的輪廓，再計算一個(gè)或多個(gè)陰影——所有這些陰影還必須混合在一起而不與文本本身重疊——想想看這需要做多少工作，這樣看來(lái)，規范中去掉陰影也是情有可原的。

顯然，默認情況是文本沒(méi)有陰影。否則，理論上可以定義一個(gè)或多個(gè)陰影。每個(gè)陰影都由一個(gè)顏色和3個(gè)長(cháng)度值來(lái)定義。這個(gè)顏色當然設置了陰影的顏色，所以可以定義綠色，紫色甚至白色陰影。

前兩個(gè)長(cháng)度值確定了陰影與文本的偏移距離，第三個(gè)長(cháng)度值可選，定義了陰影的“模糊半徑”。要定義一個(gè)相對于文本向右偏移5像素向下偏移0.5em的綠色陰影，而且不模糊，可以寫(xiě)作：

text-shadow: green 5px 0.5em;

負長(cháng)度值會(huì )使陰影落在原文本的左上方。

模糊半徑定義為從陰影輪廓到模糊效果邊界的距離。如果半徑為2像素，模糊效果就會(huì )作用于陰影輪廓到模糊邊界之間的空間。具體的模糊方法并未定義，所以不同的網(wǎng)頁(yè)設計可能會(huì )有不同的效果。舉例來(lái)說(shuō)，以下樣式可能得到如圖6-31所示的顯示：

p.cl1 {color: black; text-shadow: silver 2px 2px 2px;}

p.cl2 {color: white; text-shadow: 0 0 4px black;}

P.cl3 {color: black; text-shadow: 1em 1em 5px gray,-1em -1em silver;}

注意：圖6-31是用Photoshop生成的，因為寫(xiě)作本書(shū)時(shí)Web瀏覽器不支持text-shadow.

圖6-31：到處都是陰影

處理空白符

我們已經(jīng)介紹了很多對文本應用樣式的方法，下面來(lái)討論屬性white-space，它會(huì )影響用戶(hù)代理對源文檔中的空格、換行和tab字符的處理。

white-space

使用這個(gè)屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的XHTML處理已經(jīng)完成了空白符處理：它會(huì )把所有空白符合并為一個(gè)空格。所以給定以下標記，它在Web瀏覽器中顯示時(shí)，各個(gè)字之間只會(huì )顯示一個(gè)空格，而且忽略元素中的換行。

<p>This　　 paragraph 　　has 　　many

spaces　　in it.</p>

可以用以下聲明顯式地設置這種默認行為：

p {white-space: normal;}

這個(gè)規則告訴瀏覽器按平常的做法去做：丟掉多余的空白符。給定這個(gè)值，換行字符（回車(chē)）會(huì )轉換為空格，一行中多個(gè)空格的序列也會(huì )轉換為一個(gè)空格。

不過(guò)，如果將white-space設置為pre，受這個(gè)屬性影響的元素中，空白符的處理就有所不同，就好像元素是XHTML pre元素一樣；空白符不會(huì )被忽略，如圖6-32所示：

p {wnice-space: pre;}

<p>This　　paragraph 　　has 　　many

spaces　　in it.</p>

圖6-32：保留標記中的空格

不過(guò)，如果white-space值為pre，瀏覽器將會(huì )注意額外的空格，甚至回車(chē)。在這個(gè)方面，而且僅在這個(gè)方面，任何元素都可以相當于一個(gè)pre元素。

與之相對的值是nowrap，它會(huì )防止元素中的文本換行，除非使用了一個(gè)br元素。在CSS 網(wǎng)頁(yè)設計中使用nowrap非常類(lèi)似于HTML 4中用<td nowrap>將一個(gè)表單元格設置為不能換行，不過(guò)white-space值可以應用到任何元素，以下標記的效果如圖6-33所示：

<p style="white-space: nowrap">This paragraph is not allowed to wrap, which means that the only way to end a. line is to insert a line-break element. If no such element is inserted, then the line will go forever, forcing the user to scroll horizontally to read whatever can't be initially displayed <br/>in the browser window.</p>

圖6-33：用white-space屬性防止換行

還可以使用white-space來(lái)替換表單元格上的nowrap屬性：

td (white-space: nowrap;}

<table><tr>

<td>The contents of this cell are not wrapped.</td>

<td>Neither are the contents of this cell.</td>

<td>Nor this one, or any after it, or any other cell in this table</td>

<td>CSS prevents any wrapping from happening.</td>

</tr></table>

CSS2.1引入了值pre-wrap和pre-line，這在以前版本的CSS中是沒(méi)有的。這些值的作用是允許創(chuàng )作人員更好地控制空白符處理。

如果一個(gè)元素的white-space被設置為pre-wrap，那么該元素中的文本會(huì )保留空白符序列，但是文本行會(huì )正常地換行。如果設置為這個(gè)值，源文本中的行分隔符以及生成的行分隔符也會(huì )保留。pre-line與pre-wrap相反，會(huì )像正常文本中一樣合并空白符序列，但保留換行符。例如，考慮以下標記，其效果如圖6-34所示：

<p style="white-space: pre-wrap;">

This paragraph has a great many spaces within its textual content, but their preservation will not prevent line wrapping or line breaking.

</p>

<p styles="white-space: pre-line;">

This paragraph has a great many spaces within its textual content, but their collapse will not prevent line wrapping or line breaking.

</p>

圖6-34：處理空白符的兩種不同方法

表6-1總結了white-space屬性的行為。

表 6-1: white-space屬性

文本方向

如果你讀的是本書(shū)英文版或其他語(yǔ)言的版本，就會(huì )從左到右、從上到下地閱讀，這就是英語(yǔ)的流方向。不過(guò)，并不是所有語(yǔ)言都是如此。還有許多從右向左讀的語(yǔ)言，如希伯來(lái)語(yǔ)和阿拉伯語(yǔ)等，CSS2引入了一個(gè)屬性來(lái)描述其方向性。

direction屬性影響塊級元素中文本的書(shū)寫(xiě)方向、表中列布局的方向、內容水平填充其元素框的方向，以及兩端對齊元素中最后一行的位置。對于行內元素，只有當unicode-bidi屬性設置為embed或bidi-override時(shí)才會(huì )應用direction屬性（見(jiàn)以下關(guān)于unicode-bidi 的描述）。

注意：在CSS3之前，CSS規范中沒(méi)有涵蓋從上到下讀的語(yǔ)言。在寫(xiě)作本書(shū)時(shí)，CSS3 Text Module 還是一個(gè)候選推薦，它解決了這個(gè)問(wèn)題。引入了一個(gè)新屬性writing-mode。

盡管ltr是默認值，但可以想見(jiàn)，如果瀏覽器在顯示從右向左讀的文本，默認值會(huì )改為rtl。因此，瀏覽器可能會(huì )有以下內部規則：

*:lang(ar),*:lang(he){direction:rtl;}

實(shí)際的規則可能更長(cháng)一些，將涵蓋所有從右向左讀的語(yǔ)言，而不只是阿拉伯語(yǔ)和希伯來(lái)語(yǔ)，不過(guò)這也能說(shuō)明問(wèn)題。盡管CSS試圖處理書(shū)寫(xiě)方向，但Unicode有一種更健壯的方法來(lái)處理方向性。利用屬性unicode-bidi, 網(wǎng)頁(yè)設計創(chuàng )作人員可以充分利用Unicode的某些功能。

在此我們將簡(jiǎn)要地引用網(wǎng)頁(yè)設計中CSS2.1規范中關(guān)于這些值的描述，這些描述很好地說(shuō)明了各個(gè)值的實(shí)質(zhì)。

normal

元素不會(huì )對雙向算法打開(kāi)附加的一層嵌套。對于行內元素，順序的隱式重排會(huì )跨元素邊界進(jìn)行。

embed

如果是一個(gè)行內元素，這個(gè)值對于雙向算法會(huì )打開(kāi)附加的一層嵌套。這個(gè)嵌套層的方向由direction屬性指定。會(huì )在元素內部隱式地完成順序重排。這對應于在元素開(kāi)始處增加一個(gè)LRE （對于direction: ltr: U+202A）或RLE （對于direction: rtl: U+202B)，并在元素的最后增加一個(gè)PDF (U+202C)。

bidi-override

這會(huì )為行內元素創(chuàng )建一個(gè)覆蓋。對于塊級元素，將為不在另一塊中的行內后代創(chuàng )建一個(gè)覆蓋。這說(shuō)明，順序重排在元素內部嚴格按direction屬性進(jìn)行，忽略了雙向算法的隱式部分。這對應于在元素開(kāi)始處增加一個(gè)LRO （對于direction: ltr: U+202D）或RLO （對于direction: rtl: U+202E)，并在元素最后增加一個(gè)PDF (U+202C).

小結

即使不改變所用的字體，還是有很多方法來(lái)改變文本的外觀(guān)。除了一些經(jīng)典的效果（如加下劃線(xiàn)）外，CSS還允許在文本上面畫(huà)線(xiàn)，或穿越文本畫(huà)線(xiàn)，改變單詞和字母間的間隔大??；將段落（或其他塊級元素）的首行縮進(jìn)；將文本左對齊或右對齊，等等。甚至可以修改文本行間的間隔大小，不過(guò)這個(gè)操作太過(guò)復雜，在第7章再詳細說(shuō)明。

這些行為有些得到了很好的支持，有些則根本不被支持。文本兩端對齊就是一個(gè)沒(méi)有得到充分支持的行為，20世紀發(fā)布的大多數用戶(hù)代理在文本裝飾和垂直對齊方面都存在bug，另外在行高計算上也存在問(wèn)題。另一方面，如果用戶(hù)代理支持單詞和字母間隔，則總能正常工作，另外文本縮進(jìn)也只是有很少的一些小bug。改變大小寫(xiě)也是如此，用戶(hù)代理總能正確地支持這個(gè)方面。

在本章中我提到過(guò)，行布局比我們談到的還要復雜，下一章將介紹這個(gè)過(guò)程的詳細內容，同時(shí)還將介紹很多其他知識。

　　【注釋】

　　[1]　注1： 網(wǎng)頁(yè)設計CSS中沒(méi)有說(shuō)明如何處理連字符，因為不同的語(yǔ)言有不同的連字符規則。規范沒(méi)有嘗試去調合這樣一些很可能不完備的規則，而是干脆不提這個(gè)問(wèn)題。