# 第 15 章 CSS 文本樣式[下] ?學習要點： 1.文本總匯 2.文本樣式 3.文本控制 主講教師：李炎恢 本章主要探討 HTML5?中 CSS?文本樣式，通過文本樣式的設置，更改字體的大小、樣式以及文本的方位。 **一．文本總匯** 本節課，我們重點了解一下 CSS?文本樣式中文本內容的一些設置方法，樣式表如下： | **屬性名** | **說明** | **CSS 版本** | | --- | --- | | text-decoration | 裝飾文本出現各種劃線。 | 1 | | text-transform | 將英文文本轉換大小寫。 | 1 | | text-shadow | 給文本添加陰影 | 3 | | text-align | 設置文本對齊方式 | 1,3 | | white-space | 排版中的空白處理方式 | 1 | | letter-spacing | 設置字母之間的間距 | 1 | | word-spacing | 設置單詞之間的間距 | 1 | | line-height | 設置行高 | 1 | | word-wrap | 控制段詞 | 3 | | text-indent | 設置文本首行的縮進 | 1 | **二．文本樣式** CSS 文本樣式有三種：文本裝飾、英文大小寫轉換和文本陰影。 **1.text-decoration** ``` p { text-decoration: underline; } ``` 解釋：設置文本出現下劃線。屬性值如下表： | **值** | **說明** | | --- | --- | | none | 讓本身有劃線裝飾的文本取消掉 | | underline | 讓文本的底部出現一條下劃線 | | overline | 讓文本的頭部出現一條上劃線 | | line-through | 讓文本的中部出現一條刪除劃線 | | blink | 讓文本進行閃爍，基本不支持了 | //讓本來有下劃線的超鏈接取消? ``` a { text-decoration: none; } ``` **2.text-transform** ``` p { text-transform: uppercase; } ``` 解釋：設置英文文本轉換為大小寫。 | **值** | **說明** | | --- | --- | | none | 將已被轉換大小寫的值恢復到默認狀態 | | capitalize | 將英文單詞首字母大寫 | | uppercase | 將英文轉換為大寫字母 | | lowercase | 將英文轉換為小寫字母 | **3.text-shadow** ``` p { text-shadow: 5px 5px 3px black; } ``` 解釋：給文本添加陰影。其中四個值，第一個值：水平偏移；第二個值：垂直偏移；第三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）。 **三．文本控制** CSS 文本樣式中還有一組對文本進行訪問、形態進行控制的樣式。 **1.text-align** ``` p { text-align: center; } ``` 解釋：指定文本的對齊方式。 | **值** | **說明** | | --- | --- | | left | 靠左對齊，默認 | | ?right | ?靠右對齊 | | center | 居中對齊 | | ?justify | ?內容兩端對齊 | | start | 讓文本處于結束的邊界 | | ?end | ?讓文本處于結束的邊界 | start 和?end 屬于?CSS3 新增的功能，但目前?IE 和?Opera 尚未支持。 **2.white-space** ``` p { white-space: nowrap; } ``` 解釋：處理空白排版方式。 | **值** | **說明** | | --- | --- | | normal | 默認值，空白符被壓縮，文本自動換行 | | nowrap | 空白符被壓縮，文本不換行 | | pre | 空白符被保留，遇到換行符則換行 | | pre-line | 空白符被壓縮，文本會在排滿或遇換行符換行 | | pre-wrap | 空白符被保留，文本會在排滿或遇換行符換行 | **3.letter-spacing** ``` p { letter-spacing: 4px; } ``` 解釋：設置文本之間的間距。 | **值** | **說明** | | --- | --- | | normal | 設置默認間距 | | 長度值 | 比如：“數字”+“px” | **4.word-spacing** ``` p { word-spacing: 14px; } ``` 解釋：設置英文單子之間的間距。 | **值** | **說明** | | --- | --- | | normal | 設置默認間距 | | 長度值 | 比如：“數字”+“px” | **5.line-height** ``` p { line-height: 200%; } ``` 解釋：設置段落行高。 | **值** | **說明** | | --- | --- | | normal | 設置默認間距 | | 長度值 | 比如：“數字”+“px” | | 數值 | 比如：1,2,3 | | % | 比如：200% | **6.word-wrap** ``` p { word-wrap: break-word; } ``` 解釋：讓過長的英文單詞斷開。 | **值** | **說明** | | --- | --- | | normal | 單詞不斷開 | | break-word | 斷開單詞 | **7.text-indent** ``` p { text-indent: 20px; } ``` 解釋：設置文本首行的縮進。 | **值** | **說明** | | --- | --- | | normal | 設置默認間距 | | 長度值 | 比如：“數字”+“px” |