前面已經(jīng)介紹了對(duì)齊，下面來(lái)看如何處理網(wǎng)頁(yè)設(shè)計(jì)中字間隔和字母間隔。同樣地，這些屬性存在一些不太直觀(guān)的問(wèn)題。
word-spacing屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。這個(gè)長(zhǎng)度會(huì)增加到字之間的標(biāo)準(zhǔn)間隔。實(shí)際上，word-spacing用于修改字間間隔。因此，默認(rèn)值normal與設(shè)置值為0是一樣的。
如果提供一個(gè)正長(zhǎng)度值，那么字之間的間隔就會(huì)增加。為word-spacing設(shè)置一個(gè)負(fù)值時(shí)，會(huì)把字拉近：
p.spread {word-spacing: 0.5em;}
p.tight {word-spacing:-0.5em;}
P.base {word-spacing: normal;}
p.norm {word-spacing: 0;}
<p class="spread">The spaces between words in this paragraph will be increased by 0.5em.</p>
<p class="tight">The spaces between words in this paragraph will be decreased
by 0.5em.</p>
<p class="base">The spaces between words in this paragraph will be normal.</p>
<p class="norm">The spaces between words in this paragraph will be normal.</p>
處理這些設(shè)置后的效果如圖6-19所示。
圖6-19：改變字間間隔
到目前為止，我還沒(méi)有給出“字”的明確定義。用最簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ)來(lái)講，“字”可以是任何非空白符字符組成的串，并由某種空白符包圍。這個(gè)定義沒(méi)有實(shí)際語(yǔ)義，它只是假設(shè)一個(gè)文檔包含由一個(gè)或多個(gè)空白符包圍的字。支持CSS的用戶(hù)代理不一定能確定一個(gè)給定語(yǔ)言中哪些是合法的字，而哪些不是。盡管這個(gè)定義沒(méi)有多大價(jià)值，不過(guò)它意味著采用象形文字的語(yǔ)言或非羅馬書(shū)寫(xiě)體往往無(wú)法指定字間隔。利用這個(gè)屬性，可能會(huì)創(chuàng)建很不可讀的文檔，圖6-20清楚地展示了這一點(diǎn)。所以，使用word-spacing時(shí)要當(dāng)心。
word-spacing遇到的許多問(wèn)題也同樣出現(xiàn)在letter-spacing中。這二者之間唯一的真正區(qū)別是字母間隔修改的是字符或字母之間的間隔。
像word-spacing屬性一樣，letter-spacing屬性的可取值包括所有長(zhǎng)度。默認(rèn)關(guān)鍵字是normal （這與letter-spacing: 0相同）。輸入的長(zhǎng)度值會(huì)使字母間的間隔增加或減少指定的量。圖6-21所示為以下標(biāo)記的結(jié)果：
p {letter-spacing: 0;}/* identical to 'normal'*/
p.spacious {letter-spacing: 0.25em;}
p.tight {letter-spacing:-0.25em;}
<p>The letters in this paragraph are spaced as normal</p>
<p class="spacious">The letters in this paragraph are spread out a bit.</p>
<p class="tight">The letters in this paragraph are a bit smashed together.</p>
圖6-21：各種字母間隔
可以使用letter-spacing來(lái)突出強(qiáng)調(diào)效果，這個(gè)技術(shù)可謂歷史悠久。你可能會(huì)寫(xiě)以下聲明，其效果如圖6-22所示：
strong {letter-spacing: 0.2em;}
<p>This paragraph contains <strong>strongly emphasized text</strong> that is spread out for extra emphasis.</p>
圖6-22：使用letter-spacing突出強(qiáng)調(diào)效果
間隔和對(duì)齊
word-spacing的值可能受text-align屬性值的影響。如果一個(gè)元素是兩端對(duì)齊的，字母和字之間的空間可能會(huì)調(diào)整，以便文本在整行中剛好放下。這可能又會(huì)改變網(wǎng)站建設(shè)人員用word-spacing聲明的字間隔。如果為letter-spacing指定一個(gè)長(zhǎng)度值，字符間隔則不會(huì)受text-align影響，但是如果letter-spacing的值是normal，字符間的間隔就可能改變，以便將文本兩端對(duì)齊。網(wǎng)頁(yè)設(shè)計(jì)師沒(méi)有指定應(yīng)當(dāng)如何計(jì)算間隔，所以用戶(hù)代理只是將其填滿(mǎn)。
一般地，一個(gè)元素的子元素會(huì)繼承該元素的計(jì)算值，無(wú)法為word-spacing或letter- spacing 定義一個(gè)可繼承的縮放因子來(lái)取代計(jì)算值（像line-height那樣）。因此，可能會(huì)遇到圖6-23所示的問(wèn)題：
p {letter-spacing: 0.25em; font-size: 20px;}
small {font-size: 50%;}
<p>This spacious paragraph features <small>tiny text that is just as spacious</small>, even though the author probably wanted the spacing to be in proportion to the size of the text.</p>
圖6-23：繼承的字母間搞
如果字母間隔與文本大小成比例，得到字母間隔的唯一辦法就是顯式地設(shè)置，如下：
p {letter-spacing: 0.25em;}
small {font-size: 50%; letter-spacing: 0.25em;}
默認(rèn)值none對(duì)文本不做任何改動(dòng)，將使用源文檔中原有的大小寫(xiě)，頭名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫(xiě)或全小寫(xiě)字符。最后，capitalize只對(duì)每個(gè)單詞的首字母大寫(xiě)。圖6-24以多種方式展示了這些設(shè)置：
h1{text-transform: capitalize;}
strong {text-transform:uppercase;}
p.cummings {text-transform:lowercase;}
p.raw{text-transform:none;}
<h1>The heading-one at the beginninG</h1>
<p>
By default, text is displayed in the capitalization it has in the source cocument,but <strong>it is possible to change this</strong>using the property 'text-transform'.
</p>
<p class="cummings">
For example,one create TEXT such as might have been Written by the late Poet e.e.cumming.
</p>
<p class="raw">
If you feel the need to explicitly Declare the transformation of text to be 'none',that can be done as well.
</p>
不同用戶(hù)代理可能會(huì)用不同的方法來(lái)確定單詞從哪里開(kāi)始，相應(yīng)地確定哪些字母要大寫(xiě)。例如，如圖6-24所示，h1元素中的文本“heading-one”網(wǎng)頁(yè)設(shè)計(jì)中可以用兩種方式顯示："Heading-one"或“Heading-One”。CSS并沒(méi)有說(shuō)哪一種是正確的，所以這兩種都是可以的。
你可能還注意到，圖6-24中h1元素的最后一個(gè)字母還是大寫(xiě)。這沒(méi)有錯(cuò)：在應(yīng)用text- transfom值capitalize時(shí)，CSS只要求用戶(hù)代理確保每個(gè)單詞的首字母大寫(xiě)，可以忽略單詞的余下部分。
作為一個(gè)屬性，text-transform看上去可能無(wú)關(guān)緊要，不過(guò)如果你突然決定將所有h1 元素都變成大寫(xiě)，這個(gè)屬性就很有用。不必單獨(dú)地修改所有h1元素的內(nèi)容，只需使用text-transform為你完成這個(gè)修改：
h1 {text-transform: uppercase;}
<h1>This is an H1 element</h1>
使用text-transform有兩方面的好處，首先，只需寫(xiě)一個(gè)簡(jiǎn)單的規(guī)則來(lái)完成這個(gè)修改，而無(wú)需修改h1元素本身。其次，如果你以后決定將所有大小寫(xiě)再切換為原來(lái)的大小寫(xiě)，可以更容易地完成修改，如圖6-25所示：
hi {text-transform: capitalize;}
<h1>This is an H1 element</h1>