網(wǎng)頁設(shè)計中CSS2包含一個屬性來為文本增加陰彩,不過這個屬性并沒有在CSS2.1中保留,因為在CSS2.1完成前沒有一個瀏覽器對此提供了充分的支持。可以考慮一下,如果要讓網(wǎng)站設(shè)計師確定一個元素中文本的輪廓,再計算一個或多個陰影——所有這些陰影還必須混合在一起而不與文本本身重疊——想想看這需要做多少工作,這樣看來,規(guī)范中去掉陰影也是情有可原的。
顯然,默認(rèn)情況是文本沒有陰影。否則,理論上可以定義一個或多個陰影。每個陰影都由一個顏色和3個長度值來定義。這個顏色當(dāng)然設(shè)置了陰影的顏色,所以可以定義綠色,紫色甚至白色陰影。
前兩個長度值確定了陰影與文本的偏移距離,第三個長度值可選,定義了陰影的“模糊半徑”。要定義一個相對于文本向右偏移5像素向下偏移0.5em的綠色陰影,而且不模糊,可以寫作:
text-shadow: green 5px 0.5em;
負(fù)長度值會使陰影落在原文本的左上方。
模糊半徑定義為從陰影輪廓到模糊效果邊界的距離。如果半徑為2像素,模糊效果就會作用于陰影輪廓到模糊邊界之間的空間。具體的模糊方法并未定義,所以不同的網(wǎng)頁設(shè)計可能會有不同的效果。舉例來說,以下樣式可能得到如圖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生成的,因為寫作本書時Web瀏覽器不支持text-shadow.
圖6-31:到處都是陰影
我們已經(jīng)介紹了很多對文本應(yīng)用樣式的方法,下面來討論屬性white-space,它會影響用戶代理對源文檔中的空格、換行和tab字符的處理。
white-space
使用這個屬性,可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講,默認(rèn)的XHTML處理已經(jīng)完成了空白符處理:它會把所有空白符合并為一個空格。所以給定以下標(biāo)記,它在Web瀏覽器中顯示時,各個字之間只會顯示一個空格,而且忽略元素中的換行。
<p>This paragraph has many
spaces in it.</p>
可以用以下聲明顯式地設(shè)置這種默認(rèn)行為:
p {white-space: normal;}
這個規(guī)則告訴瀏覽器按平常的做法去做:丟掉多余的空白符。給定這個值,換行字符(回車)會轉(zhuǎn)換為空格,一行中多個空格的序列也會轉(zhuǎn)換為一個空格。
不過,如果將white-space設(shè)置為pre,受這個屬性影響的元素中,空白符的處理就有所不同,就好像元素是XHTML pre元素一樣;空白符不會被忽略,如圖6-32所示:
p {wnice-space: pre;}
<p>This paragraph has many
spaces in it.</p>
圖6-32:保留標(biāo)記中的空格
不過,如果white-space值為pre,瀏覽器將會注意額外的空格,甚至回車。在這個方面,而且僅在這個方面,任何元素都可以相當(dāng)于一個pre元素。
與之相對的值是nowrap,它會防止元素中的文本換行,除非使用了一個br元素。在CSS 網(wǎng)頁設(shè)計中使用nowrap非常類似于HTML 4中用<td nowrap>將一個表單元格設(shè)置為不能換行,不過white-space值可以應(yīng)用到任何元素,以下標(biāo)記的效果如圖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來替換表單元格上的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中是沒有的。這些值的作用是允許創(chuàng)作人員更好地控制空白符處理。
如果一個元素的white-space被設(shè)置為pre-wrap,那么該元素中的文本會保留空白符序列,但是文本行會正常地?fù)Q行。如果設(shè)置為這個值,源文本中的行分隔符以及生成的行分隔符也會保留。pre-line與pre-wrap相反,會像正常文本中一樣合并空白符序列,但保留換行符。例如,考慮以下標(biāo)記,其效果如圖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總結(jié)了white-space屬性的行為。
表 6-1: white-space屬性
如果你讀的是本書英文版或其他語言的版本,就會從左到右、從上到下地閱讀,這就是英語的流方向。不過,并不是所有語言都是如此。還有許多從右向左讀的語言,如希伯來語和阿拉伯語等,CSS2引入了一個屬性來描述其方向性。
direction屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內(nèi)容水平填充其元素框的方向,以及兩端對齊元素中最后一行的位置。對于行內(nèi)元素,只有當(dāng)unicode-bidi屬性設(shè)置為embed或bidi-override時才會應(yīng)用direction屬性(見以下關(guān)于unicode-bidi 的描述)。
注意:在CSS3之前,CSS規(guī)范中沒有涵蓋從上到下讀的語言。在寫作本書時,CSS3 Text Module 還是一個候選推薦,它解決了這個問題。引入了一個新屬性writing-mode。
盡管ltr是默認(rèn)值,但可以想見,如果瀏覽器在顯示從右向左讀的文本,默認(rèn)值會改為rtl。因此,瀏覽器可能會有以下內(nèi)部規(guī)則:
*:lang(ar),*:lang(he){direction:rtl;}
實際的規(guī)則可能更長一些,將涵蓋所有從右向左讀的語言,而不只是阿拉伯語和希伯來語,不過這也能說明問題。盡管CSS試圖處理書寫方向,但Unicode有一種更健壯的方法來處理方向性。利用屬性unicode-bidi, 網(wǎng)頁設(shè)計創(chuàng)作人員可以充分利用Unicode的某些功能。
在此我們將簡要地引用網(wǎng)頁設(shè)計中CSS2.1規(guī)范中關(guān)于這些值的描述,這些描述很好地說明了各個值的實質(zhì)。
normal
元素不會對雙向算法打開附加的一層嵌套。對于行內(nèi)元素,順序的隱式重排會跨元素邊界進行。
embed
如果是一個行內(nèi)元素,這個值對于雙向算法會打開附加的一層嵌套。這個嵌套層的方向由direction屬性指定。會在元素內(nèi)部隱式地完成順序重排。這對應(yīng)于在元素開始處增加一個LRE (對于direction: ltr: U+202A)或RLE (對于direction: rtl: U+202B),并在元素的最后增加一個PDF (U+202C)。
bidi-override
這會為行內(nèi)元素創(chuàng)建一個覆蓋。對于塊級元素,將為不在另一塊中的行內(nèi)后代創(chuàng)建一個覆蓋。這說明,順序重排在元素內(nèi)部嚴(yán)格按direction屬性進行,忽略了雙向算法的隱式部分。這對應(yīng)于在元素開始處增加一個LRO (對于direction: ltr: U+202D)或RLO (對于direction: rtl: U+202E),并在元素最后增加一個PDF (U+202C).
即使不改變所用的字體,還是有很多方法來改變文本的外觀。除了一些經(jīng)典的效果(如加下劃線)外,CSS還允許在文本上面畫線,或穿越文本畫線,改變單詞和字母間的間隔大??;將段落(或其他塊級元素)的首行縮進;將文本左對齊或右對齊,等等。甚至可以修改文本行間的間隔大小,不過這個操作太過復(fù)雜,在第7章再詳細(xì)說明。
這些行為有些得到了很好的支持,有些則根本不被支持。文本兩端對齊就是一個沒有得到充分支持的行為,20世紀(jì)發(fā)布的大多數(shù)用戶代理在文本裝飾和垂直對齊方面都存在bug,另外在行高計算上也存在問題。另一方面,如果用戶代理支持單詞和字母間隔,則總能正常工作,另外文本縮進也只是有很少的一些小bug。改變大小寫也是如此,用戶代理總能正確地支持這個方面。
在本章中我提到過,行布局比我們談到的還要復(fù)雜,下一章將介紹這個過程的詳細(xì)內(nèi)容,同時還將介紹很多其他知識。
【注釋】
[1] 注1: 網(wǎng)頁設(shè)計CSS中沒有說明如何處理連字符,因為不同的語言有不同的連字符規(guī)則。規(guī)范沒有嘗試去調(diào)合這樣一些很可能不完備的規(guī)則,而是干脆不提這個問題。