1、第13章 CSS控制文本的顯示,CSS中，文本的控制包括兩個(gè)方面的內(nèi)容，一方面控制文本中字體的各種顯示效果（例如，控制字體的大小等），另一方面控制文本的顯示效果（例如，文本的縮進(jìn)等）。在CSS中文本的控制是很重要的內(nèi)容，文本的顯示效果，直接影響讀者對(duì)頁(yè)面信息的讀取。通過本章學(xué)習(xí)，應(yīng)該掌握以下知識(shí)要點(diǎn)： 重點(diǎn)掌握CSS控制字體的顯示方法并能熟練應(yīng)用 了解CSS控制文本的顯示方法及其使用方法 能熟練使用字體綜合屬性,13.1 控制字體的顯示,在CSS中，字體的控制有控制文本的字體、字體的大小、字體的樣式、字體的顏色、字體的修飾等方面的內(nèi)容。本節(jié)將分別進(jìn)行詳細(xì)講解。,13.1.1 字體選擇屬性fon

2、t-family,字體選擇屬性（font-family），用來定義文本中使用的那種字體。字體選擇屬性的值為字體名稱，其語法結(jié)構(gòu)如下所示。,13.1.2 字體顏色屬性color,字體顏色屬性，用來定義字體使用的顏色。在定義字體顏色的時(shí)候，要注意字體顏色和背景之間的對(duì)比，方便讀者的閱讀。,13.1.3 字體大小屬性font-size,字體大小屬性（font-size），用來控制元素中字體的顯示尺寸。在字體的大小屬性中，可以使用幾個(gè)屬性值，通常使用的是以px為單位的長(zhǎng)度值，其語法結(jié)構(gòu)如下所示。,13.1.4 字體樣式屬性font-style,字體樣式屬性（font-style），用來定義字體的顯示樣

3、式。在字體樣式屬性中，可以使用幾個(gè)屬性值，包括，norma、italic、oblique。,13.1.5 字體加粗屬性font-weight,字體加粗屬性（font-weight），用來定義字體是否顯示加粗和變細(xì)的效果。在字體樣式屬性中，可以使用兩類屬性值，一類是用名稱命名的屬性值，例如blod等。另一類是用數(shù)字命名的屬性值，例如200、300等。,13.1.6 字體修飾屬性text-decoration,字體修飾屬性（text-decoration），用來定義字體的修飾效果，例如下劃線等。在字體修飾屬性中，可以使用5個(gè)屬性值，包括，none、underline、blink、overline、

4、line-through等。,13.1.7 字體下劃線位置屬性text-underline-position,字體下劃線位置屬性（text-underline-position），用來定義下劃線的位置。在字體下劃線位置屬性中，可以使用兩個(gè)屬性值，包括，below、above。,13.1.8 小型大寫字母屬性font-variant,小型大寫字母屬性（font-variant），用來定義英文中是否顯示小型大寫字母的效果。小型大寫字母是介于大寫字母和小寫字母之間的一種字母顯示效果。在小型大寫字母屬性中，可以使用兩個(gè)屬性值，normal、above。,13.1.9 轉(zhuǎn)換大小寫屬性text-trans

5、form,轉(zhuǎn)換大小寫屬性（text-transform），用來定義英文字母大小寫之間轉(zhuǎn)換的效果。在轉(zhuǎn)換大小寫屬性中，可以使用4個(gè)屬性值，包括，none、capitalize、uppercase、lowercase。,13.1.10 字母間隔屬性letter-spacing,字母間隔屬性（letter-spacing），用來定義字母（或中文文字）之間的間隔大小。在字母間隔屬性中，可以使用兩個(gè)屬性值normal和長(zhǎng)度值。,13.1.11 單詞間隔屬性word-spacing,單詞間隔屬性（word-spacing），用來定義英文單詞之間的間隔。在單詞間隔屬性中，可以使用2個(gè)屬性值normal和長(zhǎng)度

6、值。,13.1.12 行高屬性line-height,行高屬性（line-height），用來定義文本中行高的大小。在行高屬性中，可以使用2個(gè)屬性值normal和長(zhǎng)度值。,13.1.13 字體綜合屬性font,字體綜合屬性（font），用來統(tǒng)一定義字體的各種屬性值。在字體綜合屬性中，可以使用以上幾個(gè)小節(jié)中講解的部分屬性。,13.2 控制文本的顯示,在CSS中文本的控制，是指控制文本的縮進(jìn)、對(duì)齊、空白、顯示方向等內(nèi)容。在實(shí)際制作網(wǎng)頁(yè)時(shí)，文本的控制對(duì)整個(gè)頁(yè)面的排版起著決定性的作用，好的文本效果，不但美觀，更加便于讀者的閱讀。下面進(jìn)行詳細(xì)講解。,13.2.1 文本縮進(jìn)屬性text-indent,文本

7、縮進(jìn)屬性（text-indent），用來定義文本段落中段首的縮進(jìn)效果。在文本的縮進(jìn)屬性中，使用的屬性值為長(zhǎng)度值，其語法結(jié)構(gòu)如下所示。,13.2.2 文本空白屬性white-space,文本空白屬性（text-overflow），用來把文本中使用空格，換行等空白元素的內(nèi)容顯示出來。在文本的空白屬性中，可以使用3個(gè)屬性值，包括normal、pre、nowrap，其語法結(jié)構(gòu)如下所示。white-space : normal | pre | nowrap;,13.2.3 文本溢出屬性text-overflow,當(dāng)文本內(nèi)容超出元素大小的時(shí)候，就要用到文本溢出屬性（text-overflow）來定義這些文

8、本的顯示效果。在文本溢出屬性中，可以使用兩個(gè)屬性值，clip和ellipsis，其語法結(jié)構(gòu)如下所示。,13.2.4 水平對(duì)齊屬性text-align,水平對(duì)齊屬性（text-align），用來定義元素的水平對(duì)齊效果。在水平對(duì)齊屬性中，可以使用3個(gè)屬性值，分別定義元素內(nèi)容的左對(duì)齊、居中對(duì)齊、右對(duì)齊和兩邊對(duì)齊。,13.2.5 垂直對(duì)齊屬性vertical-align,垂直對(duì)齊屬性（vertical-align），用來定義元素的垂直對(duì)齊效果。在垂直對(duì)齊屬性中，可以使用10個(gè)屬性值。,13.2.5 垂直對(duì)齊屬性vertical-align,13.2.6 文本流向?qū)傩詌ayout-flow,文本流向?qū)傩?/p>

9、（layout-flow），用來定義元素中文本流的顯示方式。在文本流向?qū)傩灾校梢允褂脙蓚€(gè)屬性值horizontal和vertical-ideographic。,13.2.7 文本方向?qū)傩詃irection,文本方向?qū)傩裕╠irection），用來定義元素中文本的顯示方向。在文本方向?qū)傩灾?，可以使用兩個(gè)屬性值ltr和rtl，其語法結(jié)構(gòu)如下所示。,13.2.8 文本排序?qū)傩評(píng)nicode-bidi,文本排序?qū)傩?，用來定義文本內(nèi)容的顯示順序。在文本排序?qū)傩灾?，可以使?個(gè)屬性值，分別為norma、bidi-override、embed。,13.2.9 單詞換行屬性word-break,單詞換行屬性（word-break），用來定義文本中，能否在單詞內(nèi)部換行顯示。在單詞換行屬性中，可以使用3個(gè)屬性值，分別為norma、break-a