1、 第第6 6章章 用用CSSCSS設置文本設置文本 本章簡介：本章簡介： 前文介紹了前文介紹了CSSCSS設計中必須了解的設計中必須了解的4 4個核心基礎個核心基礎盒子模型、標準流、盒子模型、標準流、浮動和定位。有了這浮動和定位。有了這4 4個核心的基礎，個核心的基礎，從本章開始逐一介紹網頁設計的各種元從本章開始逐一介紹網頁設計的各種元素，例如文本、圖像、鏈接、表格，如素，例如文本、圖像、鏈接、表格，如何使用何使用CSSCSS來進行樣式設置。來進行樣式設置。 使用使用CSS設置文本樣式設置文本樣式6.1用用CSS設置多列布局設置多列布局6.2 6.1使用CSS設置文本樣式在學習在學習HTMLH

2、TML的時候，通常也會使用的時候，通常也會使用HTMLHTML對文本進行一些非常對文本進行一些非常簡單的樣式設置，而使用簡單的樣式設置，而使用CSSCSS對文本的樣式進行設置遠比使用對文本的樣式進行設置遠比使用HTMLHTML靈活、精確得多。靈活、精確得多。 6.1.1創建基礎頁面創建一個基本的網頁。創建一個基本的網頁。預備用于設置CSS樣式的網頁文件 6.1.2設置文字的字體在在HTMLHTML中，設置文字的字體需要通過中，設置文字的字體需要通過標記的標記的faceface屬性。屬性。而在而在CSSCSS中，則使用中，則使用font-familyfont-family屬性。屬性。設置正文字體

3、 6.1.3設置文字的傾斜效果在在CSSCSS中也可以定義文字是否顯示為斜體，傾斜看起來很容易中也可以定義文字是否顯示為斜體，傾斜看起來很容易理解，實際上它比通常想象的要復雜一些。理解，實際上它比通常想象的要復雜一些。正常字體與“意大利體”，及“傾斜體”的對比 6.1.4設置文字的加粗效果在在HTMLHTML語言中可以通過添加語言中可以通過添加標記或者標記或者標記將文字標記將文字設置為粗體。在設置為粗體。在CSSCSS中，使用中，使用font-weightfont-weight屬性控制文字的粗細，屬性控制文字的粗細，可以將文字的粗細進行細致的劃分，更重要的是可以將文字的粗細進行細致的劃分，更重

4、要的是CSSCSS還可以將本身還可以將本身是粗體的文字變為正常粗細。是粗體的文字變為正常粗細。設 置 值說 明normal正常粗細bold粗體bolder加粗體lighter比正常粗細還細100900共有9個層次（100，200，900），數字越大字體越粗 6.1.5轉換英文字母大小寫英文字母大小寫轉換是英文字母大小寫轉換是CSSCSS提供的很實用的功能之一，我們只提供的很實用的功能之一，我們只需要設定英文段落的需要設定英文段落的text-transformtext-transform屬性，就能很輕松地實現大屬性，就能很輕松地實現大小寫的轉換。小寫的轉換。設置英文單詞的大小寫形式 6.1.6控

5、制文字的大小CSSCSS是通過是通過font-sizefont-size屬性來控制文字大小的，而該屬性的值屬性來控制文字大小的，而該屬性的值可以使用很多種長度單位。可以使用很多種長度單位。設置正文文字的大小為12像素 6.1.7設置文字裝飾效果在在HTMLHTML文件中，可以使用文件中，可以使用標記給文字加下劃線，在標記給文字加下劃線，在CSSCSS中中由由text-decorationtext-decoration屬性為文字加下劃線、刪除線和頂線等多種裝屬性為文字加下劃線、刪除線和頂線等多種裝飾效果。飾效果。設置文本的裝飾效果 6.1.8設置段落首行縮進如何在網頁中實現文本段落的首行縮進，在

6、如何在網頁中實現文本段落的首行縮進，在CSSCSS中專門有一個中專門有一個text-indenttext-indent屬性可以控制段落的首行縮進和縮進的距離。屬性可以控制段落的首行縮進和縮進的距離。設置段落中首行文本縮進 6.1.9設置字詞間距在在CSSCSS中，可以通過中，可以通過letter-spacingletter-spacing和和word-spacingword-spacing這兩個屬這兩個屬性分別控制字母間距和單詞間距。性分別控制字母間距和單詞間距。設置字詞間距 6.1.10設置段落內部的文字行高在在HTMLHTML中是無法控制段落中行與行之間的距離的。在中是無法控制段落中行與行

7、之間的距離的。在CSSCSS中，中，使用使用line-heightline-height可以控制行的高度，通過它就可以調整行與行之可以控制行的高度，通過它就可以調整行與行之間的距離。間的距離。設置段落中的行高 6.1.11設置段落之間的距離可以通過可以通過margin屬性設置段與段之間的距離屬性設置段與段之間的距離。為段落增加邊框調整段落間距后的效果 6.1.12控制文本的水平位置使用使用text-align屬性可以方便地設置文本的水平位置。屬性可以方便地設置文本的水平位置。 （Firefox瀏覽器）標題居中對齊 6.1.13設置文字與背景的顏色在在HTML頁面中，顏色統一采用頁面中，顏色統一

8、采用RGB的模式顯示，也就是通常人們的模式顯示，也就是通常人們所說的所說的“紅綠藍紅綠藍”三原色模式。每種顏色都由這三原色模式。每種顏色都由這3種顏色的不同比重組成，種顏色的不同比重組成，每種顏色的比重分為每種顏色的比重分為0255擋。當紅綠藍擋。當紅綠藍3個分量都設置為個分量都設置為255時就是白時就是白色，例如色，例如rgb（100%，100%，100%）和）和#FFFFFF都指白色，其中都指白色，其中“#FFFFFF”為十六進制的表示方法，前兩位為紅色分量，中間兩位是綠為十六進制的表示方法，前兩位為紅色分量，中間兩位是綠色分量，最后兩位是藍色分量，色分量，最后兩位是藍色分量，“FF”即為

9、十進制中的即為十進制中的255 。 設置標題背景顏色和文字顏色 6.1.14文字陰影效果為了美化頁面的文字效果，為了美化頁面的文字效果，CSS 3新增了文字陰影效果，也就是可新增了文字陰影效果，也就是可以使用以使用text-shadow屬性給頁面中的文字或其他元素添加陰影效果。到目屬性給頁面中的文字或其他元素添加陰影效果。到目前為止前為止Safari、Firefox、Chrome和和Opera等主流瀏覽器都支持陰影屬性。等主流瀏覽器都支持陰影屬性。實際上實際上text-shadow屬性，在屬性，在CSS 2.1中中W3C就已經定義了，但在就已經定義了，但在CSS 3中又重新定義了它，并增加了不

10、透明度效果。中又重新定義了它，并增加了不透明度效果。 設置陰影在右下角設置陰影模糊 6.1.14文字陰影效果設置陰影疊加設置燃燒文字陰影效果 6.2用CSS設置多列布局在在CSS 2.1及以前的版本中，都是使用及以前的版本中，都是使用float屬性或屬性或position屬性屬性進行頁面布局，但是該方法有一個比較明顯的缺點，就是多列的進行頁面布局，但是該方法有一個比較明顯的缺點，就是多列的div元素間是各自獨立的，因此，如果在第元素間是各自獨立的，因此，如果在第1列列div元素中加入一些內容，元素中加入一些內容，將會使第將會使第2列元素的底部不能對齊，導致葉面中多出一塊空白區域。列元素的底部不

11、能對齊，導致葉面中多出一塊空白區域。為了解決多列布局的難題，為了解決多列布局的難題，CSS 3新增了新增了Multi-column Layout，即多列自動布局功能。利用多列布局屬性可以自動將內容按指定的即多列自動布局功能。利用多列布局屬性可以自動將內容按指定的列數排列，這種特性特別適合報紙和雜志類網頁布局。列數排列，這種特性特別適合報紙和雜志類網頁布局。 6.2.1創建基礎頁面預備用于設置CSS多列布局的網頁文件創建一個基本的網頁。創建一個基本的網頁。 6.2.2設置多列布局預備用于設置CSS多列布局的網頁文件CSS 3新增了多列布局新增了多列布局columns屬性，該屬性類似邊框特性中的屬

12、性，該屬性類似邊框特性中的border屬性。屬性。columns屬性可以同時定義多列的數目和每列的寬度。屬性可以同時定義多列的數目和每列的寬度。 6.2.3設置列寬度根據窗口寬度自動變化欄目數量使用使用columns屬性可以將元素設置成多列顯示，同時使用屬性可以將元素設置成多列顯示，同時使用column-width屬性可以設置列的寬度。該屬性可以與其他多列布局屬性配合使屬性可以設置列的寬度。該屬性可以與其他多列布局屬性配合使用；也可以單獨使用，限制模塊的單列寬度，當超出寬度時，則會自動用；也可以單獨使用，限制模塊的單列寬度，當超出寬度時，則會自動以多列進行顯示。以多列進行顯示。 6.2.4設置

13、列數根據窗口寬度自動變化欄目數量可以通過可以通過column-count屬性控制列數。屬性控制列數。 6.2.5設置列間距設置列間距的效果通過通過column-gap屬性可以設置列與列之間的間距。屬性可以設置列與列之間的間距。 6.2.6設置列邊框樣式列邊線顯示效果CSS 3還可以通過還可以通過column-rule屬性定義列與列之間邊框的寬度、屬性定義列與列之間邊框的寬度、樣式、顏色。樣式、顏色。column-rule屬性可以設置很多不同的值，從而對列邊框屬性可以設置很多不同的值，從而對列邊框設置不同的樣式。設置不同的樣式。 6.2.7設置跨列顯示大標題跨列顯示效果通過上面的案例我們看到大標

14、題只會在第通過上面的案例我們看到大標題只會在第1列中顯示，如果想要讓列中顯示，如果想要讓大標題在所有列的最上方顯示，可以通過大標題在所有列的最上方顯示，可以通過column-span屬性來設置跨列屬性來設置跨列顯示。顯示。 6.2.8設置列高度列高度自動調整效果前面我們介紹了多列、列寬、列間距、列邊框樣式及跨列，下面我前面我們介紹了多列、列寬、列間距、列邊框樣式及跨列，下面我們簡單地介紹一下列高度。可以通過們簡單地介紹一下列高度。可以通過column-fill屬性設置列的高度。屬性設置列的高度。column-fill屬性可以設置屬性可以設置2個值，從而對列高度進行控制。個值，從而對列高度進行控制。 小結本章介紹了使用本章介紹了使用CSS設置文本相關的各種樣式的方法。這些屬性主設置文本相關的各種樣式的方法。這些屬性主要可以分為兩類：以要可以分為兩類：以“font-”開頭的屬性，例如開頭的屬性，例如font-size、f