久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

前面已經介紹了對齊，下面來看如何處理網頁設計中字間隔和字母間隔。同樣地，這些屬性存在一些不太直觀的問題。

字間隔

word-spacing屬性接受一個正長度值或負長度值。這個長度會增加到字之間的標準間隔。實際上，word-spacing用于修改字間間隔。因此，默認值normal與設置值為0是一樣的。

如果提供一個正長度值，那么字之間的間隔就會增加。為word-spacing設置一個負值時，會把字拉近：

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>

處理這些設置后的效果如圖6-19所示。

圖6-19：改變字間間隔

到目前為止，我還沒有給出“字”的明確定義。用最簡單的網頁設計術語來講，“字”可以是任何非空白符字符組成的串，并由某種空白符包圍。這個定義沒有實際語義，它只是假設一個文檔包含由一個或多個空白符包圍的字。支持CSS的用戶代理不一定能確定一個給定語言中哪些是合法的字，而哪些不是。盡管這個定義沒有多大價值，不過它意味著采用象形文字的語言或非羅馬書寫體往往無法指定字間隔。利用這個屬性，可能會創(chuàng)建很不可讀的文檔，圖6-20清楚地展示了這一點。所以，使用word-spacing時要當心。

字母間隔

word-spacing遇到的許多問題也同樣出現(xiàn)在letter-spacing中。這二者之間唯一的真正區(qū)別是字母間隔修改的是字符或字母之間的間隔。

像word-spacing屬性一樣，letter-spacing屬性的可取值包括所有長度。默認關鍵字是normal （這與letter-spacing: 0相同）。輸入的長度值會使字母間的間隔增加或減少指定的量。圖6-21所示為以下標記的結果：

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來突出強調效果，這個技術可謂歷史悠久。你可能會寫以下聲明，其效果如圖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突出強調效果

間隔和對齊

word-spacing的值可能受text-align屬性值的影響。如果一個元素是兩端對齊的，字母和字之間的空間可能會調整，以便文本在整行中剛好放下。這可能又會改變網站建設人員用word-spacing聲明的字間隔。如果為letter-spacing指定一個長度值，字符間隔則不會受text-align影響，但是如果letter-spacing的值是normal，字符間的間隔就可能改變，以便將文本兩端對齊。網頁設計師沒有指定應當如何計算間隔，所以用戶代理只是將其填滿。

一般地，一個元素的子元素會繼承該元素的計算值，無法為word-spacing或letter- spacing 定義一個可繼承的縮放因子來取代計算值（像line-height那樣）。因此，可能會遇到圖6-23所示的問題：

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：繼承的字母間搞

如果字母間隔與文本大小成比例，得到字母間隔的唯一辦法就是顯式地設置，如下：

p {letter-spacing: 0.25em;}

small {font-size: 50%; letter-spacing: 0.25em;}

文本轉換

默認值none對文本不做任何改動，將使用源文檔中原有的大小寫，頭名思義，uppercase 和 lowercase 將文本轉換為全大寫或全小寫字符。最后，capitalize只對每個單詞的首字母大寫。圖6-24以多種方式展示了這些設置：

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>

不同用戶代理可能會用不同的方法來確定單詞從哪里開始，相應地確定哪些字母要大寫。例如，如圖6-24所示，h1元素中的文本“heading-one”網頁設計中可以用兩種方式顯示："Heading-one"或“Heading-One”。CSS并沒有說哪一種是正確的，所以這兩種都是可以的。

你可能還注意到，圖6-24中h1元素的最后一個字母還是大寫。這沒有錯：在應用text- transfom值capitalize時，CSS只要求用戶代理確保每個單詞的首字母大寫，可以忽略單詞的余下部分。

作為一個屬性，text-transform看上去可能無關緊要，不過如果你突然決定將所有h1 元素都變成大寫，這個屬性就很有用。不必單獨地修改所有h1元素的內容，只需使用text-transform為你完成這個修改：

h1 {text-transform: uppercase;}

<h1>This is an H1 element</h1>

使用text-transform有兩方面的好處，首先，只需寫一個簡單的規(guī)則來完成這個修改，而無需修改h1元素本身。其次，如果你以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改，如圖6-25所示：

hi {text-transform: capitalize;}

<h1>This is an H1 element</h1>