第6章用CSS設(shè)置文本

本章簡(jiǎn)介：前文介紹了CSS設(shè)計(jì)中必須了解的4個(gè)核心基礎(chǔ)——盒子模型、標(biāo)準(zhǔn)流、浮動(dòng)和定位。有了這4個(gè)核心的基礎(chǔ)，從本章開(kāi)始逐一介紹網(wǎng)頁(yè)設(shè)計(jì)的各種元素，例如文本、圖像、鏈接、表格，如何使用CSS來(lái)進(jìn)行樣式設(shè)置。

使用CSS設(shè)置文本樣式6.1用CSS設(shè)置多列布局6.2

6.1使用CSS設(shè)置文本樣式在學(xué)習(xí)HTML的時(shí)候，通常也會(huì)使用HTML對(duì)文本進(jìn)行一些非常簡(jiǎn)單的樣式設(shè)置，而使用CSS對(duì)文本的樣式進(jìn)行設(shè)置遠(yuǎn)比使用HTML靈活、精確得多。

6.1.1創(chuàng)建基礎(chǔ)頁(yè)面創(chuàng)建一個(gè)基本的網(wǎng)頁(yè)。預(yù)備用于設(shè)置CSS樣式的網(wǎng)頁(yè)文件

6.1.2設(shè)置文字的字體在HTML中，設(shè)置文字的字體需要通過(guò)<font>標(biāo)記的face屬性。而在CSS中，則使用font-family屬性。設(shè)置正文字體

6.1.3設(shè)置文字的傾斜效果在CSS中也可以定義文字是否顯示為斜體，傾斜看起來(lái)很容易理解，實(shí)際上它比通常想象的要復(fù)雜一些。正常字體與“意大利體”，及“傾斜體”的對(duì)比

6.1.4設(shè)置文字的加粗效果在HTML語(yǔ)言中可以通過(guò)添加<b>標(biāo)記或者<strong>標(biāo)記將文字設(shè)置為粗體。在CSS中，使用font-weight屬性控制文字的粗細(xì)，可以將文字的粗細(xì)進(jìn)行細(xì)致的劃分，更重要的是CSS還可以將本身是粗體的文字變?yōu)檎４旨?xì)。設(shè)置值說(shuō)明normal正常粗細(xì)bold粗體bolder加粗體lighter比正常粗細(xì)還細(xì)100～900共有9個(gè)層次（100，200，…，900），數(shù)字越大字體越粗

6.1.5轉(zhuǎn)換英文字母大小寫(xiě)英文字母大小寫(xiě)轉(zhuǎn)換是CSS提供的很實(shí)用的功能之一，我們只需要設(shè)定英文段落的text-transform屬性，就能很輕松地實(shí)現(xiàn)大小寫(xiě)的轉(zhuǎn)換。設(shè)置英文單詞的大小寫(xiě)形式

6.1.6控制文字的大小CSS是通過(guò)font-size屬性來(lái)控制文字大小的，而該屬性的值可以使用很多種長(zhǎng)度單位。設(shè)置正文文字的大小為12像素

6.1.7設(shè)置文字裝飾效果在HTML文件中，可以使用<u>標(biāo)記給文字加下劃線，在CSS中由text-decoration屬性為文字加下劃線、刪除線和頂線等多種裝飾效果。設(shè)置文本的裝飾效果

6.1.8設(shè)置段落首行縮進(jìn)如何在網(wǎng)頁(yè)中實(shí)現(xiàn)文本段落的首行縮進(jìn)，在CSS中專門(mén)有一個(gè)text-indent屬性可以控制段落的首行縮進(jìn)和縮進(jìn)的距離。設(shè)置段落中首行文本縮進(jìn)

6.1.9設(shè)置字詞間距在CSS中，可以通過(guò)letter-spacing和word-spacing這兩個(gè)屬性分別控制字母間距和單詞間距。設(shè)置字詞間距

6.1.10設(shè)置段落內(nèi)部的文字行高在HTML中是無(wú)法控制段落中行與行之間的距離的。在CSS中，使用line-height可以控制行的高度，通過(guò)它就可以調(diào)整行與行之間的距離。設(shè)置段落中的行高

6.1.11設(shè)置段落之間的距離可以通過(guò)margin屬性設(shè)置段與段之間的距離。為段落增加邊框調(diào)整段落間距后的效果

6.1.12控制文本的水平位置使用text-align屬性可以方便地設(shè)置文本的水平位置。（Firefox瀏覽器）標(biāo)題居中對(duì)齊

6.1.13設(shè)置文字與背景的顏色在HTML頁(yè)面中，顏色統(tǒng)一采用RGB的模式顯示，也就是通常人們所說(shuō)的“紅綠藍(lán)”三原色模式。每種顏色都由這3種顏色的不同比重組成，每種顏色的比重分為0～255擋。當(dāng)紅綠藍(lán)3個(gè)分量都設(shè)置為255時(shí)就是白色，例如rgb（100%，100%，100%）和#FFFFFF都指白色，其中“#FFFFFF”為十六進(jìn)制的表示方法，前兩位為紅色分量，中間兩位是綠色分量，最后兩位是藍(lán)色分量，“FF”即為十進(jìn)制中的255。設(shè)置標(biāo)題背景顏色和文字顏色

6.1.14文字陰影效果為了美化頁(yè)面的文字效果，CSS3新增了文字陰影效果，也就是可以使用text-shadow屬性給頁(yè)面中的文字或其他元素添加陰影效果。到目前為止Safari、Firefox、Chrome和Opera等主流瀏覽器都支持陰影屬性。實(shí)際上text-shadow屬性，在CSS2.1中W3C就已經(jīng)定義了，但在CSS3中又重新定義了它，并增加了不透明度效果。設(shè)置陰影在右下角設(shè)置陰影模糊

6.1.14文字陰影效果設(shè)置陰影疊加設(shè)置燃燒文字陰影效果

6.2用CSS設(shè)置多列布局在CSS2.1及以前的版本中，都是使用float屬性或position屬性進(jìn)行頁(yè)面布局，但是該方法有一個(gè)比較明顯的缺點(diǎn)，就是多列的div元素間是各自獨(dú)立的，因此，如果在第1列div元素中加入一些內(nèi)容，將會(huì)使第2列元素的底部不能對(duì)齊，導(dǎo)致葉面中多出一塊空白區(qū)域。為了解決多列布局的難題，CSS3新增了Multi-columnLayout，即多列自動(dòng)布局功能。利用多列布局屬性可以自動(dòng)將內(nèi)容按指定的列數(shù)排列，這種特性特別適合報(bào)紙和雜志類網(wǎng)頁(yè)布局。

6.2.1創(chuàng)建基礎(chǔ)頁(yè)面預(yù)備用于設(shè)置CSS多列布局的網(wǎng)頁(yè)文件創(chuàng)建一個(gè)基本的網(wǎng)頁(yè)。

6.2.2設(shè)置多列布局預(yù)備用于設(shè)置CSS多列布局的網(wǎng)頁(yè)文件CSS3新增了多列布局columns屬性，該屬性類似邊框特性中的border屬性。columns屬性可以同時(shí)定義多列的數(shù)目和每列的寬度。

6.2.3設(shè)置列寬度根據(jù)窗口寬度自動(dòng)變化欄目數(shù)量使用columns屬性可以將元素設(shè)置成多列顯示，同時(shí)使用column-width屬性可以設(shè)置列的寬度。該屬性可以與其他多列布局屬性配合使用；也可以單獨(dú)使用，限制模塊的單列寬度，當(dāng)超出寬度時(shí)，則會(huì)自動(dòng)以多列進(jìn)行顯示。

6.2.4設(shè)置列數(shù)根據(jù)窗口寬度自動(dòng)變化欄目數(shù)量可以通過(guò)column-count屬性控制列數(shù)。

6.2.5設(shè)置列間距設(shè)置列間距的效果通過(guò)column-gap屬性可以設(shè)置列與列之間的間距。

6.2.6設(shè)置列邊框樣式列邊線顯示效果CSS3還可以通過(guò)column-rule屬性定義列與列之間邊框的寬度、樣式、顏色。column-rule屬性可以設(shè)置很多不同的值，從而對(duì)列邊框設(shè)置不同的樣式。

6.2.7設(shè)置跨列顯示大標(biāo)題跨列顯示效果通過(guò)上面的案例我們看到大標(biāo)題只會(huì)在第1列中顯示，如果想要讓大標(biāo)題在所有列的最上方顯示，可以通過(guò)column-span屬性來(lái)設(shè)置跨列顯示。

6.2.8設(shè)置列高度列高度自動(dòng)調(diào)整效果前面我們介紹了多列、列寬、列間距、列邊框樣式及跨列，下面我們簡(jiǎn)單地介紹一下列高度。可以通過(guò)column-fill屬性設(shè)置列的高度。column-fill屬性可以設(shè)置2個(gè)值，從而對(duì)列高度進(jìn)行控制。

小結(jié)本章介紹了使用CSS設(shè)置文本相關(guān)的各種樣式的方法。這些屬性主要可以分為兩類：以“font-”開(kāi)頭的屬性，例如fon