第13章HTMLCSSJavaScript文本的精細排版HTML-CSS-JavaScript--標準教程實例版(第2版)

1、 本書編委會 編著第第13章章 文本的精細排版文本的精細排版13.1 調(diào)整字符間距l(xiāng)etter-spacing13.2 調(diào)整單詞間距word-spacing13.3 添加文字修飾text-decoration13.4 設(shè)置文本排列方式text-align13.5 設(shè)置段落縮進text-indent13.6 調(diào)整行高line-height13.7 轉(zhuǎn)換英文大小寫text-transform13.8 小實例綜合應(yīng)用文本屬性13.9 習題HTML/CSS/JavaScript 標準教程實例版（第2版）HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.1 調(diào)整字符間距調(diào)整字

2、符間距l(xiāng)etter-spacingletter-spacing:normal|長度長度 基本語法基本語法HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.1 調(diào)整字符間距調(diào)整字符間距l(xiāng)etter-spacing 語法說明語法說明 normal表示間距正常顯示，是默認設(shè)置。 長度包括長度值和長度單位，長度值可以使用負數(shù)。 長度單位可以使用12.2節(jié)講解“設(shè)置字體”時介紹的所有單位。HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.1 調(diào)整字符間距調(diào)整字符間距l(xiāng)etter-spacing 實例代碼HTML/CSS/JavaScript 標準教

3、程實例版（第2版）第章1313.1 調(diào)整字符間距調(diào)整字符間距l(xiāng)etter-spacing 接上頁接上頁HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.1 調(diào)整字符間距調(diào)整字符間距l(xiāng)etter-spacing 網(wǎng)頁效果網(wǎng)頁效果HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.2 調(diào)整單詞間距調(diào)整單詞間距word-spacing 基本語法基本語法word-spacing:normal|長度長度HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.2 調(diào)整單詞間距調(diào)整單詞間距word-spacing 語法說明語法說明

4、normal表示間距正常，是默認設(shè)置。 長度包括長度值和長度單位，長度值可以使用負數(shù)。 長度單位可以使用12.2節(jié)講解“設(shè)置字體”時介紹的所有單位。HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.2 調(diào)整單詞間距調(diào)整單詞間距word-spacing 實例代碼實例代碼HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.2 調(diào)整單詞間距調(diào)整單詞間距word-spacing 接上頁接上頁HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.2 調(diào)整單詞間距調(diào)整單詞間距word-spacing 網(wǎng)頁效果網(wǎng)頁效果HTML/C

5、SS/JavaScript 標準教程實例版（第2版）第章1313.3 添加文字修飾添加文字修飾text-decoration 基本語法基本語法text-decoration: underline|oveline|line-through|blink|noneHTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.3 添加文字修飾添加文字修飾text-decoration 語法說明語法說明 語法中的屬性值可以是上面所列的一個或多個。 具體語法中text-decoration屬性的取值說明見表13-1。表13-1HTML/CSS/JavaScript 標準教程實例版（第2版）

6、第章1313.3 添加文字修飾添加文字修飾text-decoration 表13-1 text-decoration屬性取值說明返回HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.3 添加文字修飾添加文字修飾text-decoration 實例代碼實例代碼HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.3 添加文字修飾添加文字修飾text-decoration 接上頁接上頁HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.3 添加文字修飾添加文字修飾text-decoration 網(wǎng)頁效果網(wǎng)頁效果HTML/

7、CSS/JavaScript 標準教程實例版（第2版）第章1313.4 設(shè)置文本排列方式設(shè)置文本排列方式text-align 基本語法基本語法Text-align:left|right|center|justifyHTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.4 設(shè)置文本排列方式設(shè)置文本排列方式text-align 語法說明語法說明 該語法中的4個屬性值可以任意選擇其中一個。其中，left代表左對齊方式；right代表右對齊方式；center代表居中對齊方式；justify代表兩端對齊方式。 該屬性可應(yīng)用于HTML中的任何模塊級標記，如， 等。HTML/CSS/

8、JavaScript 標準教程實例版（第2版）第章1313.4 設(shè)置文本排列方式設(shè)置文本排列方式text-align 實例代碼實例代碼HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.4 設(shè)置文本排列方式設(shè)置文本排列方式text-align 接上頁接上頁HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.4 設(shè)置文本排列方式設(shè)置文本排列方式text-align 網(wǎng)頁效果網(wǎng)頁效果HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.5 設(shè)置段落縮進設(shè)置段落縮進text-indent 基本語法基本語法text-inden

9、t:長度長度|百分比百分比HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.5 設(shè)置段落縮進設(shè)置段落縮進text-indent 語法說明語法說明 長度包括長度值和長度單位，長度單位同樣可以使用之前提到的所有單位。 百分比則是相對上一級元素的寬度而定的。HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.5 設(shè)置段落縮進設(shè)置段落縮進text-indent 實例代碼實例代碼HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.5 設(shè)置段落縮進設(shè)置段落縮進text-indent 接上頁接上頁HTML/CSS/JavaScr

10、ipt 標準教程實例版（第2版）第章1313.5 設(shè)置段落縮進設(shè)置段落縮進text-indent 網(wǎng)頁效果網(wǎng)頁效果HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.6 調(diào)整行高調(diào)整行高line-height 基本語法基本語法Line-height:normal|數(shù)字數(shù)字|長度長度|百分比百分比HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.6 調(diào)整行高調(diào)整行高line-height 語法說明語法說明 normal為瀏覽器默認的行高，一般由字體大小屬性來決定。 數(shù)字，表示行高為該元素字體大小與該數(shù)字相乘的結(jié)果。 長度，表示行高由長度值和長

11、度單位確定。 百分比：表示行高是該元素字體大小的百分比。HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.6 調(diào)整行高調(diào)整行高line-height 實例代碼實例代碼HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.6 調(diào)整行高調(diào)整行高line-height 接上頁接上頁HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.6 調(diào)整行高調(diào)整行高line-height 網(wǎng)頁效果網(wǎng)頁效果HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.7 轉(zhuǎn)換英文大小寫轉(zhuǎn)換英文大小寫text-transfo

12、rm 基本語法基本語法text-transform：uppercase|lowercase|capitalize|noneHTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.7 轉(zhuǎn)換英文大小寫轉(zhuǎn)換英文大小寫text-transform 語法說明語法說明 可以選用text-transform屬性中的任何一個屬性值來轉(zhuǎn)換英文單詞的大小寫。 語法中具體的屬性值說明見表13-2。表13-2HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.7 轉(zhuǎn)換英文大小寫轉(zhuǎn)換英文大小寫text-transform 表13-2 text-transform屬性取值說明返回HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.7 轉(zhuǎn)換英文大小寫轉(zhuǎn)換英文大小寫text-transform 實例代碼實例代碼HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.7 轉(zhuǎn)換英文大小寫轉(zhuǎn)換英文大小寫text-transform 接上頁接上頁HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.7 轉(zhuǎn)換英文大小寫轉(zhuǎn)換英文大小寫text-transform 網(wǎng)頁效果網(wǎng)頁效果HTML/CSS/JavaScript 標準教程實例版（第2版）第章1313.8 小實例