CSS 文本 · W3School HTML & CSS 教程

# CSS 文本 **CSS 文本屬性可定義文本的外觀。** **通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。** ## 縮進文本把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。 CSS 提供了 [text-indent 屬性](/cssref/pr_text_text-indent.asp "CSS text-indent 屬性")，該屬性可以方便地實現文本縮進。通過使用 text-indent 屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以是負值。這個屬性最常見的用途是將段落的首行縮進，下面的規則會使所有段落的首行縮進 5 em： ``` p {text-indent: 5em;} ``` 注意：一般來說，可以為所有塊級元素應用 text-indent，但無法將該屬性應用于行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其余文本移動。提示：如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。 ### 使用負值 text-indent 還可以設置為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊： ``` p {text-indent: -5em;} ``` 不過在為 text-indent 設置負值時要當心，如果對一個段落設置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距： ``` p {text-indent: -5em; padding-left: 5em;} ``` ### 使用百分比值 text-indent 可以使用所有長度單位，包括百分比值。百分數要相對于縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。在下例中，縮進值是父元素的 20%，即 100 個像素： ``` div {width: 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div> ``` ### 繼承 text-indent 屬性可以繼承，請考慮如下標記： ``` div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div> ``` 以上標記中的段落也會縮進 50 像素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值。 ## 水平對齊 [text-align](/cssref/pr_text_text-align.asp "CSS text-align 屬性") 是一個基本的屬性，它會影響一個元素中的_文本行_互相之間的對齊方式。它的前 3 個值相當直接，不過第 4 個和第 5 個則略有些復雜。值 left、right 和 center 會導致元素中的文本分別左對齊、右對齊和居中。西方語言都是從左向右讀，所有 text-align 的默認值是 left。文本在左邊界對齊，右邊界呈鋸齒狀（稱為“從左到右”文本）。對于希伯來語和阿拉伯語之類的的語言，text-align 則默認為 right，因為這些語言從右向左讀。不出所料，center 會使每個文本行在元素中居中。提示：將塊級元素或表元素居中，要通過在這些元素上適當地設置左、右外邊距來實現。 ### text-align:center 與 <CENTER> 您可能會認為 text-align:center 與 <CENTER> 元素的作用一樣，但實際上二者大不相同。 <CENTER> 不僅影響文本，還會把整個元素居中。text-align 不會控制元素的對齊，而只影響內部內容。元素本身不會從一段移到另一端，只是其中的文本受影響。 ### justify 最后一個水平對齊屬性是 justify。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請參閱 [CSS text-align 屬性參考頁](/cssref/pr_text_text-align.asp "CSS text-align 屬性")。 ## 字間隔 [word-spacing 屬性](/cssref/pr_text_word-spacing.asp "CSS word-spacing 屬性")可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。 word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那么字之間的間隔就會增加。為 word-spacing 設置一個負值，會把它拉近： ``` p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. </p> ``` [實例 TIY ：增加或減少單詞間距（字間隔）](/tiy/t.asp?f=csse_text_word-spacing) 注釋：如需深入理解 CSS 對“字”（word）的定義，請訪問 [CSS word-spacing 屬性參考頁](/cssref/pr_text_word-spacing.asp "CSS word-spacing 屬性")。 ## 字母間隔 [letter-spacing 屬性](/cssref/pr_text_letter-spacing.asp "CSS letter-spacing 屬性")與 word-spacing 的區別在于，字母間隔修改的是字符或字母之間的間隔。與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量： ``` h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px} <h1>This is header 1</h1> <h4>This is header 4</h4> ``` [實例 TIY ：規定字符間距（字母間隔）](/tiy/t.asp?f=csse_letter-spacing) ## 字符轉換 [text-transform 屬性](/cssref/pr_text_text-transform.asp)處理文本的大小寫。這個屬性有 4 個值： * none * uppercase * lowercase * capitalize 默認值 none 對文本不做任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最后，capitalize 只對每個單詞的首字母大寫。作為一個屬性，text-transform 可能無關緊要，不過如果您突然決定把所有 h1 元素變為大寫，這個屬性就很有用。不必單獨地修改所有 h1 元素的內容，只需使用 text-transform 為你完成這個修改： ``` h1 {text-transform: uppercase} ``` 使用 text-transform 有兩方面的好處。首先，只需寫一個簡單的規則來完成這個修改，而無需修改 h1 元素本身。其次，如果您以后決定將所有大小寫再切換為原來的大小寫，可以更容易地完成修改。 [實例 TIY ：控制文本中字母的大小寫](/tiy/t.asp?f=csse_text-transform) ## 文本裝飾接下來，我們討論 [text-decoration 屬性](/cssref/pr_text_text-decoration.asp)，這是一個很有意思的屬性，它提供了很多非常有趣的行為。 text-decoration 有 5 個值： * none * underline * overline * line-through * blink 不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價于 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標記。 none 值會關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣。例如，鏈接默認地會有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來做到這一點： ``` a {text-decoration: none;} ``` 注意：如果顯式地用這樣一個規則去掉鏈接的下劃線，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認是這樣的，不過也不能完全保證其顏色肯定有區別）。還可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規則如下： ``` a:link a:visited {text-decoration: underline overline;} ``` 不過要注意的是，如果兩個不同的裝飾都與同一元素匹配，勝出規則的值會完全取代另一個值。請考慮以下的規則： ``` h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;} ``` 對于給定的規則，所有 class 為 stricken 的 h2 元素都只有一個貫穿線裝飾，而沒有下劃線和上劃線，因為 _text-decoration 值會替換而不是累積起來_。 ## 處理空白符 [white-space 屬性](/cssref/pr_text_white-space.asp "CSS white-space 屬性")會影響到用戶代理對源文檔中的空格、換行和 tab 字符的處理。通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認的 XHTML 處理已經完成了空白符處理：它會把所有空白符合并為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行： ``` <p>This paragraph has many spaces in it.</p> ``` 可以用以下聲明顯式地設置這種默認行為： ``` p {white-space: normal;} ``` 上面的規則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個值，換行字符（回車）會轉換為空格，一行中多個空格的序列也會轉換為一個空格。 [實例 TIY ：white-space: normal](/tiy/t.asp?f=csse_text_white-space_normal) ### 值 pre 不過，如果將 white-space 設置為 pre，受這個屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會被忽略。如果 white-space 屬性的值為 pre，瀏覽器將會注意額外的空格，甚至回車。在這個方面，而且僅在這個方面，任何元素都可以相當于一個 pre 元素。 [實例 TIY ：white-space: pre](/tiy/t.asp?f=csse_text_white-space_pre) 注意：經測試，IE 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例。 ### 值 nowrap 與之相對的值是 nowrap，它會防止元素中的文本換行，除非使用了一個 br 元素。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 <td nowrap> 將一個表單元格設置為不能換行，不過 white-space 值可以應用到任何元素。 [實例 TIY ：white-space: nowrap](/tiy/t.asp?f=csse_text_white-space) ### 值 pre-wrap 和 pre-line CSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒有的。這些值的作用是允許創作人員更好地控制空白符處理。如果元素的 white-space 設置為 pre-wrap，那么該元素中的文本會保留空白符序列，但是文本行會正常地換行。如果設置為這個值，源文本中的行分隔符以及生成的行分隔符也會保留。pre-line 與 pre-wrap 相反，會像正常文本中一樣合并空白符序列，但保留換行符。 [實例 TIY ：white-space: pre-wrap](/tiy/t.asp?f=csse_text_white-space_pre-wrap) [實例 TIY ：white-space: pre-line](/tiy/t.asp?f=csse_text_white-space_pre-line) 注意：我們在 IE7 和 FireFox2.0 瀏覽器中測試了上面的兩個實例，但是結果是，值 pre-wrap 和 pre-line 都沒有得到很好的支持。 ### 總結下面的表格總結了 white-space 屬性的行為： | 值 | 空白符 | 換行符 | 自動換行 | | --- | --- | --- | --- | | pre-line | 合并 | 保留 | 允許 | | normal | 合并 | 忽略 | 允許 | | nowrap | 合并 | 忽略 | 不允許 | | pre | 保留 | 保留 | 不允許 | | pre-wrap | 保留 | 保留 | 允許 | ## 文本方向如果您閱讀的是英文書籍，就會從左到右、從上到下地閱讀，這就是英文的流方向。不過，并不是所有語言都如此。我們知道古漢語就是從右到左來閱讀的，當然還包括希伯來語和阿拉伯語等等。CSS2 引入了一個屬性來描述其方向性。 [direction 屬性](/cssref/pr_text_direction.asp "CSS direction 屬性")影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最后一行的位置。注釋：對于行內元素，只有當 [unicode-bidi 屬性](/cssref/pr_unicode-bidi.asp "CSS unicode-bidi 屬性")設置為 embed 或 bidi-override 時才會應用 direction 屬性。 direction 屬性有兩個值：ltr 和 rtl。大多數情況下，默認值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應使用值 rtl。 ## CSS 文本實例： [設置文本顏色](/tiy/t.asp?f=csse_color) [設置文本的背景顏色](/tiy/t.asp?f=csse_text_background) [規定字符間距](/tiy/t.asp?f=csse_letter-spacing) [使用百分比設置行間距](/tiy/t.asp?f=csse_dim_line-height_percent) [使用像素值設置行間距](/tiy/t.asp?f=csse_dim_line-height_pixel) [使用數值來設置行間距](/tiy/t.asp?f=csse_dim_line-height_number) [對齊文本](/tiy/t.asp?f=csse_text-align) [修飾文本](/tiy/t.asp?f=csse_text-decoration) [縮進文本](/tiy/t.asp?f=csse_text-indent "縮進文本") [控制文本中的字母](/tiy/t.asp?f=csse_text-transform) [在元素中禁止文本折行](/tiy/t.asp?f=csse_text_white-space) [增加單詞間距](/tiy/t.asp?f=csse_text_word-spacing) ## CSS 文本屬性 | 屬性 | 描述 | | --- | --- | | [color](/cssref/pr_text_color.asp) | 設置文本顏色 | | [direction](/cssref/pr_text_direction.asp "CSS direction 屬性") | 設置文本方向。 | | [line-height](/cssref/pr_dim_line-height.asp) | 設置行高。 | | [letter-spacing](/cssref/pr_text_letter-spacing.asp "CSS letter-spacing 屬性") | 設置字符間距。 | | [text-align](/cssref/pr_text_text-align.asp "CSS text-align 屬性") | 對齊元素中的文本。 | | [text-decoration](/cssref/pr_text_text-decoration.asp) | 向文本添加修飾。 | | [text-indent](/cssref/pr_text_text-indent.asp "CSS text-indent 屬性") | 縮進元素中文本的首行。 | | text-shadow | 設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。 | | [text-transform](/cssref/pr_text_text-transform.asp) | 控制元素中的字母。 | | unicode-bidi | 設置文本方向。 | | [white-space](/cssref/pr_text_white-space.asp "CSS white-space 屬性") | 設置元素中空白的處理方式。 | | [word-spacing](/cssref/pr_text_word-spacing.asp "CSS word-spacing 屬性") | 設置字間距。 |