CSS控制文本的顯示PPT課件

1、第第1313章章 CSSCSS控制文本的顯示控制文本的顯示 CSS中，文本的控制包括兩個方面的內(nèi)容，一方面控制文本中字體的各種顯示效果（例如，控制字體的大小等），另一方面控制文本的顯示效果（例如，文本的縮進等）。在CSS中文本的控制是很重要的內(nèi)容，文本的顯示效果，直接影響讀者對頁面信息的讀取。通過本章學習，應(yīng)該掌握以下知識要點： 重點掌握CSS控制字體的顯示方法并能熟練應(yīng)用 了解CSS控制文本的顯示方法及其使用方法 能熟練使用字體綜合屬性第1頁/共28頁13.1 13.1 控制字體的顯示控制字體的顯示 在CSS中，字體的控制有控制文本的字體、字體的大小、字體的樣式、字體的顏色、字體的修飾等方面

2、的內(nèi)容。本節(jié)將分別進行詳細講解。第2頁/共28頁13.1.1 13.1.1 字體選擇屬性字體選擇屬性font-familyfont-family 字體選擇屬性（font-family），用來定義文本中使用的那種字體。字體選擇屬性的值為字體名稱，其語法結(jié)構(gòu)如下所示。第3頁/共28頁13.1.2 13.1.2 字體顏色屬性字體顏色屬性colorcolor 字體顏色屬性，用來定義字體使用的顏色。在定義字體顏色的時候，要注意字體顏色和背景之間的對比，方便讀者的閱讀。第4頁/共28頁13.1.3 13.1.3 字體大小屬性字體大小屬性font-sizefont-size 字體大小屬性（font-size

3、），用來控制元素中字體的顯示尺寸。在字體的大小屬性中，可以使用幾個屬性值，通常使用的是以px為單位的長度值，其語法結(jié)構(gòu)如下所示。第5頁/共28頁13.1.4 13.1.4 字體樣式屬性字體樣式屬性font-stylefont-style 字體樣式屬性（font-style），用來定義字體的顯示樣式。在字體樣式屬性中，可以使用幾個屬性值，包括，norma、italic、oblique。第6頁/共28頁13.1.5 13.1.5 字體加粗屬性字體加粗屬性font-weightfont-weight 字體加粗屬性（font-weight），用來定義字體是否顯示加粗和變細的效果。在字體樣式屬性中，可以

4、使用兩類屬性值，一類是用名稱命名的屬性值，例如blod等。另一類是用數(shù)字命名的屬性值，例如200、300等。第7頁/共28頁13.1.6 13.1.6 字體修飾屬性字體修飾屬性text-decorationtext-decoration 字體修飾屬性（text-decoration），用來定義字體的修飾效果，例如下劃線等。在字體修飾屬性中，可以使用5個屬性值，包括，none、underline、blink、overline、line-through等。第8頁/共28頁13.1.7 13.1.7 字體下劃線位置屬性字體下劃線位置屬性text-underline-positiontext-unde

5、rline-position 字體下劃線位置屬性（text-underline-position），用來定義下劃線的位置。在字體下劃線位置屬性中，可以使用兩個屬性值，包括，below、above。第9頁/共28頁13.1.8 13.1.8 小型大寫字母屬性小型大寫字母屬性font-variantfont-variant 小型大寫字母屬性（font-variant），用來定義英文中是否顯示小型大寫字母的效果。小型大寫字母是介于大寫字母和小寫字母之間的一種字母顯示效果。在小型大寫字母屬性中，可以使用兩個屬性值，normal、above。第10頁/共28頁13.1.9 13.1.9 轉(zhuǎn)換大小寫屬性轉(zhuǎn)

6、換大小寫屬性text-transformtext-transform 轉(zhuǎn)換大小寫屬性（text-transform），用來定義英文字母大小寫之間轉(zhuǎn)換的效果。在轉(zhuǎn)換大小寫屬性中，可以使用4個屬性值，包括，none、capitalize、uppercase、lowercase。第11頁/共28頁13.1.10 13.1.10 字母間隔屬性字母間隔屬性letter-spacingletter-spacing 字母間隔屬性（letter-spacing），用來定義字母（或中文文字）之間的間隔大小。在字母間隔屬性中，可以使用兩個屬性值normal和長度值。第12頁/共28頁13.1.11 13.1.11

7、 單詞間隔屬性單詞間隔屬性word-spacingword-spacing 單詞間隔屬性（word-spacing），用來定義英文單詞之間的間隔。在單詞間隔屬性中，可以使用2個屬性值normal和長度值。第13頁/共28頁13.1.12 13.1.12 行高屬性行高屬性line-heightline-height 行高屬性（line-height），用來定義文本中行高的大小。在行高屬性中，可以使用2個屬性值normal和長度值。第14頁/共28頁13.1.13 13.1.13 字體綜合屬性字體綜合屬性fontfont 字體綜合屬性（font），用來統(tǒng)一定義字體的各種屬性值。在字體綜合屬性中，可

8、以使用以上幾個小節(jié)中講解的部分屬性。第15頁/共28頁13.2 13.2 控制文本的顯示控制文本的顯示 在CSS中文本的控制，是指控制文本的縮進、對齊、空白、顯示方向等內(nèi)容。在實際制作網(wǎng)頁時，文本的控制對整個頁面的排版起著決定性的作用，好的文本效果，不但美觀，更加便于讀者的閱讀。下面進行詳細講解。第16頁/共28頁13.2.1 13.2.1 文本縮進屬性文本縮進屬性text-indenttext-indent 文本縮進屬性（text-indent），用來定義文本段落中段首的縮進效果。在文本的縮進屬性中，使用的屬性值為長度值，其語法結(jié)構(gòu)如下所示。第17頁/共28頁13.2.2 13.2.2 文本

9、空白屬性文本空白屬性white-spacewhite-space 文本空白屬性（text-overflow），用來把文本中使用空格，換行等空白元素的內(nèi)容顯示出來。在文本的空白屬性中，可以使用3個屬性值，包括normal、pre、nowrap，其語法結(jié)構(gòu)如下所示。white-space : normal | pre | nowrap;第18頁/共28頁13.2.3 13.2.3 文本溢出屬性文本溢出屬性text-overflowtext-overflow當文本內(nèi)容超出元素大小的時候，就要用到文本溢出屬性（text-overflow）來定義這些文本的顯示效果。在文本溢出屬性中，可以使用兩個屬性值，

10、clip和ellipsis，其語法結(jié)構(gòu)如下所示。第19頁/共28頁13.2.4 13.2.4 水平對齊屬性水平對齊屬性text-aligntext-align 水平對齊屬性（text-align），用來定義元素的水平對齊效果。在水平對齊屬性中，可以使用3個屬性值，分別定義元素內(nèi)容的左對齊、居中對齊、右對齊和兩邊對齊。第20頁/共28頁13.2.5 13.2.5 垂直對齊屬性垂直對齊屬性vertical-alignvertical-align 垂直對齊屬性（vertical-align），用來定義元素的垂直對齊效果。在垂直對齊屬性中，可以使用10個屬性值。第21頁/共28頁13.2.5 13.2

11、.5 垂直對齊屬性垂直對齊屬性vertical-alignvertical-align第22頁/共28頁13.2.6 13.2.6 文本流向?qū)傩晕谋玖飨驅(qū)傩詌ayout-flowlayout-flow 文本流向?qū)傩裕╨ayout-flow），用來定義元素中文本流的顯示方式。在文本流向?qū)傩灾?，可以使用兩個屬性值horizontal和vertical-ideographic。第23頁/共28頁13.2.7 13.2.7 文本方向?qū)傩晕谋痉较驅(qū)傩詃irectiondirection 文本方向?qū)傩裕╠irection），用來定義元素中文本的顯示方向。在文本方向?qū)傩灾?，可以使用兩個屬性值ltr和rtl，其語法結(jié)構(gòu)如下所示。第24頁/共28頁13.2.8 13.2.8 文本排序?qū)傩晕谋九判驅(qū)傩評nicode-bidiunicode-bidi 文本排序?qū)傩裕脕矶x文本內(nèi)容的顯示順序。在文本排序?qū)傩灾校梢允褂?個屬性值，分別為norma、bidi-override、embed。第25頁/共28頁13.2.9 13.2.9 單詞換行屬性單詞換行屬性word-breakword-break 單詞換行屬性（word-break），用來定義文本中，能否在單詞內(nèi)部換行顯示。在單詞換行屬性中，可以使用3個屬性值，分別