第10章 文字與背景設(shè)置

1、在制作網(wǎng)站頁面時，可以通過CSS控制文字樣式，對文字的字體、大小、顏色、粗細(xì)、斜體、下畫線、頂畫線和刪除線等屬性進(jìn)行設(shè)置。使用CSS控制文字樣式的最大好處是，可以同時為多段文字賦予同一CSS樣式，在修改時只需修改某一個CSS樣式，即可同時修改應(yīng)用該CSS樣式的所有文字。10.1.1font-family屬性屬性字體字體在HTML中提供了字體樣式設(shè)置的功能，在HTML語言中文字樣式是通過來設(shè)置的，而在CSS樣式中則是通過font-family屬性來進(jìn)行設(shè)置的。font-family屬性的語法格式如下。font-family: name1,name2,name3;10.1.2font-size屬性

2、屬性字體大小字體大小在網(wǎng)頁應(yīng)用中，字體大小的區(qū)別可以起到突出網(wǎng)站主題的作用。字體大小可以是相對大小也可以是絕對大小。在CSS樣式中，可以通過設(shè)置font-size屬性來控制字體的大小。font-size屬性的基本語法如下。font-size: 字體大小;在設(shè)置字體大小時，可以使用絕對大小單位也可以使用相對大小單位。10.1.3color屬性屬性字體顏色字體顏色在HTML頁面中，通常在頁面的標(biāo)題部分或者需要瀏覽者注意的部分使用不同的顏色，使其與其他文字有所區(qū)別，從而能夠吸引瀏覽者的注意。在CSS樣式中，文字的顏色是通過color屬性進(jìn)行設(shè)置的。color屬性的基本語法如下。color: 顏色值;

3、實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置網(wǎng)頁文字基本效果設(shè)置網(wǎng)頁文字基本效果10.1.4 font-weight屬性屬性字體粗細(xì)字體粗細(xì)在HTML頁面中，將字體加粗或是變細(xì)是吸引瀏覽者注意的另一種方式，同時還可以使網(wǎng)頁的表現(xiàn)形式更多多樣。在CSS樣式中通過font-weight屬性對字體的粗細(xì)進(jìn)行控制。定義字體粗細(xì)font-weight屬性的基本語法如下。font-weight: normal | bold | bolder | lighter | inherit | 100900;最終文件：光盤最終文件第10章10-1-3.html視頻：光盤視頻第10章10-1-3.swf10.1.5 font-style屬性

4、屬性字體樣式字體樣式所謂字體樣式，也就是平常所說的字體風(fēng)格，在Dreamweaver中有3種不同的字體樣式，分別是正常、斜體和偏斜體。在CSS中，字體的樣式是通過font-style屬性進(jìn)行定義的。定義字體樣式font-style屬性的基本語法如下。font-style: normal | italic | oblique;實戰(zhàn)實戰(zhàn)練習(xí)練習(xí)設(shè)置網(wǎng)頁文字的加粗和傾斜效果設(shè)置網(wǎng)頁文字的加粗和傾斜效果10.1.6 text-transform屬性屬性英文字體大小寫英文字體大小寫text-transform屬性可以實現(xiàn)轉(zhuǎn)換頁面中英文字體的大小寫格式，是非常實用的功能之一。text-transform屬

5、性的基本語法如下。text-transform: capitalize | uppercase | lowercase;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置網(wǎng)頁中英文字體大小寫設(shè)置網(wǎng)頁中英文字體大小寫最終文件：光盤最終文件第10章10-1-5.html視頻：光盤視頻第10章10-1-5.swf最終文件：光盤最終文件第10章10-1-6.html視頻：光盤視頻第10章10-1-6.swf10.1.7text-decoration屬性屬性文字修飾文字修飾在網(wǎng)站頁面的設(shè)計中，為文字添加下畫線、頂畫線和刪除線是美化和裝飾網(wǎng)頁的一種方法。在CSS樣式中，可以通過text-decoration屬性來實現(xiàn)這些效果。text

6、-decoration屬性的基本語法如下。text-decoration: underline | overline | line-through;實戰(zhàn)實戰(zhàn)練習(xí)練習(xí)為網(wǎng)頁文字添加修飾為網(wǎng)頁文字添加修飾10.1.8letter-spacing屬性屬性字符間距字符間距在CSS樣式中，字間距的控制是通過letter-spacing屬性來進(jìn)行調(diào)整的，該屬性既可以設(shè)置相對數(shù)值，也可以設(shè)置絕對數(shù)值，但在大多數(shù)情況下使用相對數(shù)值進(jìn)行設(shè)置。letter-spacing屬性的語法格式如下。letter-spacing: 字符間距;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置中文字符間距設(shè)置中文字符間距最終文件：光盤最終文件第10章10

7、-1-7.html視頻：光盤視頻第10章10-1-7.swf最終文件：光盤最終文件第10章10-1-8.html視頻：光盤視頻第10章10-1-8.swf在設(shè)計網(wǎng)頁時，CSS樣式可以控制字體樣式，同時也可以控制字間距和段落樣式。在一般情況下，設(shè)置字體樣式只能對少數(shù)文字起作用，對于文字段落來說，還是需要通過設(shè)置段落樣式來加以控制。10.2.1line-height屬性屬性行間距行間距在CSS中，可以通過line-height屬性對段落的行間距進(jìn)行設(shè)置。line-height的值表示的是兩行文字基線之間的距離，既可以設(shè)置相對數(shù)值，也可以設(shè)置絕對數(shù)值。line-height屬性的基本語法格式如下。l

8、ine-height: 行間距;10.2.2text-indent屬性屬性段落首段落首行縮進(jìn)行縮進(jìn)段落首行縮進(jìn)是對一個段落第1行文字縮進(jìn)兩個字符進(jìn)行顯示。在CSS樣式中是通過text-indent屬性進(jìn)行設(shè)置的。text-indent屬性的基本語法如下。text-indent: 首行縮進(jìn)量;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)美化網(wǎng)頁中的段落文本美化網(wǎng)頁中的段落文本最終文件：光盤最終文件第10章10-2-2.html視頻：光盤視頻第10章10-2-2.swf10.2.3 text-align屬性屬性文本水文本水平對齊平對齊在CSS樣式中，段落的水平對齊是通過text-align屬性進(jìn)行控制的，水平對齊有4種方式，

9、分別為左對齊、水平居中對齊、右對齊和兩端對齊。text-align屬性的基本語法如下。text-align: left | center | right | justify;實戰(zhàn)實戰(zhàn)練習(xí)練習(xí)設(shè)置文本水平設(shè)置文本水平對齊對齊10.2.4 vertical-align屬性屬性文文本垂直對齊本垂直對齊在CSS樣式中，文本垂直對齊是通過vertical-align屬性進(jìn)行設(shè)置的，常見的文本垂直對齊方式有3種，分別為頂端對齊、垂直居中對齊和底端對齊。vertical-align屬性的語法格式如下。vertical-align: baseline | sub | super | top | text-to

10、p | middle | bottom | text-bottom | length; 實戰(zhàn)實戰(zhàn)練習(xí)練習(xí)設(shè)置文本垂直對齊設(shè)置文本垂直對齊最終文件：光盤最終文件第10章10-2-3.html視頻：光盤視頻第10章10-2-3.swf最終文件：光盤最終文件第10章10-2-4.html視頻：光盤視頻第10章10-2-4.swf對于網(wǎng)頁而言，文字永遠(yuǎn)都是不可缺少的重要元素，文字也是傳遞信息的主要手段。在CSS 3.0中新增加了幾種有關(guān)網(wǎng)頁文字控制的新增屬性，下面分別對這幾種新增的文字控制屬性進(jìn)行介紹。 10.3.1text-overflow 屬性屬性文本溢出處理文本溢出處理text-overflow

11、屬性用于設(shè)置是否使用一個省略標(biāo)記（）標(biāo)示對象內(nèi)文本的溢出。text-overflow屬性僅是注解，當(dāng)文本溢出時是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義。要實現(xiàn)溢出時產(chǎn)生省略號的效果還需要定義：強(qiáng)制文本在一行內(nèi)顯示（white-space: nowrap）及溢出內(nèi)容為隱藏（overflow: hidden），只有這樣才能實現(xiàn)溢出文本顯示省略號的效果。text-overflow屬性的語法格式如下。text-overflow: clip | ellipsis;實戰(zhàn)實戰(zhàn)練習(xí)練習(xí)控制文本溢出效果控制文本溢出效果最終文件：光盤最終文件第10章10-3-1.html視頻：光盤視頻第10章10-3-1.s

12、wf10.3.2word-wrap和和word-break屬性屬性文本換行控制文本換行控制word-wrap屬性用于設(shè)置當(dāng)文本行超過指定容器的邊界時是否斷開轉(zhuǎn)行，word-wrap屬性的語法格式如下。word-wrap: normal | break-word;word-break屬性用于設(shè)置指定容器內(nèi)文本的字內(nèi)換行行為，尤其在出現(xiàn)多種語言時。word-break屬性的語法格式如下。word-break: normal | break-all | keep-all;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)控制英文內(nèi)容強(qiáng)制換行控制英文內(nèi)容強(qiáng)制換行10.3.3 text-shadow 屬性屬性文本陰影文本陰影通過CSS

13、3.0中新增的text-shadow屬性就可以輕松的實現(xiàn)為文字添加陰影的效果，text-shadow屬性的語法格式如下。text-shadow: length | length |opacity | color;實戰(zhàn)實戰(zhàn)練習(xí)練習(xí)為網(wǎng)頁文本添加陰影效果為網(wǎng)頁文本添加陰影效果最終文件：光盤最終文件第10章10-3-2.html視頻：光盤視頻第10章10-3-2.swf最終文件：光盤最終文件第10章10-3-3.html視頻：光盤視頻第10章10-3-3.swf10.3.4 font-face規(guī)則規(guī)則使用使用服務(wù)器端字體服務(wù)器端字體通過font-face規(guī)則可以加載服務(wù)器端的字體文件，讓客戶端顯示客

14、戶端所沒有安裝的字體，font-face規(guī)則的語法格式如下。font-face: font-family:取值; font-style:取值; font-variant:取值; font-weight:取值; font-stretch:取值; font-size:取值; src:取值; 實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)在網(wǎng)頁中使用特殊在網(wǎng)頁中使用特殊字體字體最終文件：光盤最終文件第10章10-3-4.html視頻：光盤視頻第10章10-3-4.swf通過CSS屬性來控制列表，能夠從更多方面控制列表的外觀，使列表看起來更加整齊和美觀，使網(wǎng)站實用性更強(qiáng)。在CSS樣式中專門提供了控制列表樣式的屬性，下面就不同類型的

15、列表分別進(jìn)行介紹。 10.4.1 list-style-type屬性屬性設(shè)置列表符號設(shè)置列表符號無序列表使用標(biāo)簽來羅列各個項目，并且每個項目前面都帶有特殊符號。在CSS樣式中，list-style-type屬性用于控制無序列表項目前面的符號，list-style-type屬性的語法格式如下。list-style-type: disc | circle | square | none;有序列表與無序列表相反，有序列表即具有明確先后順序的列表，默認(rèn)情況下，創(chuàng)建的有序列表在每條信息前加上序號1、2、3。通過CSS樣式中的list-style-type屬性可以對有序列表進(jìn)行控制。list-style-

16、type屬性的基本語法格式如下。list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置新聞列表設(shè)置新聞列表效果效果實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置編號列表效果設(shè)置編號列表效果最終文件：光盤最終文件第10章10-4-11.html視頻：光盤視頻第10章10-4-11.swf最終文件：光盤最終文件第10章10-4-12.html視頻：光盤視頻第10章10-4-12.swf10.4.2 list-style

17、-image屬性屬性自定義列表自定義列表符號符號除了可以使用CSS樣式中的列表符號，還可以使用list-style-image屬性自定義列表符號，list-style-image屬性的基本語法如下。list-style-image: 圖片地址;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)自定義新聞列表自定義新聞列表符號符號10.4.3設(shè)置定義列表設(shè)置定義列表定義列表是一種比較特殊的列表形式，相對于有序列表和無序列表來說，應(yīng)用得比較少。定義列表的標(biāo)簽是成對出現(xiàn)的，并且需要在“代碼”視圖手動添加代碼。從開始到結(jié)束，列表中每個元素的標(biāo)題使用標(biāo)簽，后跟隨標(biāo)簽，用于描述列表中元素的內(nèi)容。實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)制作復(fù)雜新聞列表制作復(fù)雜新聞

18、列表最終文件：光盤最終文件第10章10-4-2.html視頻：光盤視頻第10章10-4-2.swf最終文件：光盤最終文件第10章10-4-3.html視頻：光盤視頻第10章10-4-3.swf通過為網(wǎng)頁設(shè)置一個合理的背景能夠烘托網(wǎng)頁的視覺效果，給人一種協(xié)調(diào)和統(tǒng)一的視覺感，達(dá)到美化頁面的效果。不同的背景給人的心理感受并不相同，因此為網(wǎng)頁選擇一個合適的背景非常重要。 10.5.1background-color屬性屬性背景顏色背景顏色只需在CSS樣式中添加background-color屬性，即可設(shè)置網(wǎng)頁的背景顏色，它接受任何有效地顏色值，但是如果對背景顏色沒有進(jìn)行相應(yīng)的定義，將默認(rèn)背景顏色為透明

19、。background-color的語法格式如下。background-color: color | transparent;10.5.2background-image屬性屬性背景圖像背景圖像在CSS樣式中，可以通過background-image屬性設(shè)置背景圖像。background-image屬性的語法格式如下。background-image: none | url;10.5.3 background-repeat屬性屬性背景圖像平鋪背景圖像平鋪方式方式使用background-image屬性設(shè)置的背景圖像默認(rèn)會以平鋪的方式顯示，在CSS中可以通過background-repeat屬性

20、設(shè)置背景圖像重復(fù)或不重復(fù)的樣式，以及背景圖像的重復(fù)方式。background-repeat屬性的語法格式如下。background-repeat: no-repeat | repeat-x | repeat-y | repeat;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置網(wǎng)頁背景效果設(shè)置網(wǎng)頁背景效果10.5.4 background-position屬性屬性背景圖像位置背景圖像位置通過CSS樣式中的background-position屬性，能夠在頁面中精確定位背景圖像，更改初始背景圖像的位置。該屬性值可以分為4種類型：絕對定義位置、百分比定義位置、垂直對齊值和水平對齊值。background-position:

21、length | percentage | top | center | bottom | left | right; 實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)定位網(wǎng)頁中的背景圖像定位網(wǎng)頁中的背景圖像最終文件：光盤最終文件第10章10-5-3.html視頻：光盤視頻第10章10-5-3.swf最終文件：光盤最終文件第10章10-5-4.html視頻：光盤視頻第10章10-5-4.swf10.5.5background-attachment屬性屬性背景圖像固定背景圖像固定在CSS樣式表中，針對背景元素的控制，提供了background-attachment屬性，通過對該屬性的設(shè)置可以使頁面的背景不受滾動條的限制，始終保

22、持在固定位置。background-attachment屬性的語法格式如下。background-attachment: scroll | fixed;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)固定網(wǎng)頁中的背景固定網(wǎng)頁中的背景圖像圖像最終文件：光盤最終文件第10章10-5-5.html視頻：光盤視頻第10章10-5-5.swf網(wǎng)頁中的顏色搭配可以更好地吸引瀏覽者的目光，在CSS 3.0中新增了幾種網(wǎng)頁中定義顏色的方法，下面依次進(jìn)行介紹 。 10.6.1 RGBA顏色值顏色值RGBA是在RGB的基礎(chǔ)上多了控制Alpha透明度的參數(shù)，RGBA顏色定義語法如下。rgba (r,g,b,);實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)使用使用RGBA方式

23、設(shè)置方式設(shè)置背景顏色背景顏色最終文件：光盤最終文件第10章10-6-1.html視頻：光盤視頻第10章10-6-1.swf10.6.2 HSL顏色值顏色值HSL是一種工業(yè)界是廣泛使用的顏色標(biāo)準(zhǔn)，通過對色調(diào)（H）、飽和度（S）和亮度（L）3個顏色通道的改變，以及他們相互之間的疊加來獲得各種顏色。CSS 3.0中新增了HSL顏色設(shè)置方式，在使用HSL方法設(shè)置顏色時，需要定義3個值，分別是色調(diào)（H）、飽和度（S）和亮度（L）。HSL顏色定義語法如下。hsl (,);10.6.3HSLA顏色值顏色值HSLA是HSL顏色定義方法的擴(kuò)展，在色相、飽和度、亮度三要素的基礎(chǔ)上增加了不透明度的設(shè)置。使用HSLA

24、顏色定義方法，能夠靈活的設(shè)置各種不同的透明效果。HSLA顏色定義的語法如下。hsla (,); 實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)使用使用HLSA方式設(shè)置背景顏色方式設(shè)置背景顏色最終文件：光盤最終文件第10章10-6-3.html視頻：光盤視頻第10章10-6-3.swf10.6.4opacity屬性屬性元素不透明度元素不透明度opacity屬性用來設(shè)置一個元素的透明度，能夠使頁面元素呈現(xiàn)透明效果，并且可以通過具體的數(shù)值設(shè)置透明的程度。opacity屬性的語法格式如下。opacity: | inherit;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)設(shè)置網(wǎng)頁元素的半透明效果設(shè)置網(wǎng)頁元素的半透明效果10.6.5transparent顏色值顏

25、色值如果在CSS樣式中設(shè)置顏色值為transparent，則會使背景顏色、文字顏色或邊框顏色等設(shè)置為完全透明。在CSS 1中，只能在background-color屬性中設(shè)置transparent屬性值。在CSS 2中，可以在background-color和border-color屬性中設(shè)置transparent屬性值。在CSS 3.0中，可以在一切指定顏色值的屬性中設(shè)置transparent屬性值。現(xiàn)在，transparent屬性值已經(jīng)得到Firefox、Chrome、Safari、Opera和IE等瀏覽器的支持。最終文件：光盤最終文件第10章10-6-4.html視頻：光盤視頻第10章1

26、0-6-4.swf在CSS3.0中新增了漸變設(shè)置屬性gradients，通過該屬性可以在網(wǎng)頁中實現(xiàn)漸變顏色填充的效果。避免了過多地使用漸變圖片所帶來的麻煩，而且在放大頁面的情況下一樣過渡自然。 10.7.1線性漸變背景線性漸變背景基于Webkit內(nèi)核的線性漸變，語法如下。-webkit-gradient ( linear,from(),to() , color-stop(, )*)基于Gecko內(nèi)核的線性漸變，語法如下。-moz-linear-gradient ( | , ? , () ?*,)實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)為網(wǎng)頁設(shè)置線性漸變?yōu)榫W(wǎng)頁設(shè)置線性漸變背景顏色背景顏色最終文件：光盤最終文件第10章1

27、0-7-1.html視頻：光盤視頻第10章10-7-1.swf10.7.2徑向漸變背景徑向漸變背景基于Webkit內(nèi)核的徑向漸變，語法如下。-webkit-gradient ( radial ,2,from(),to() , color-stop(, )*)基于Gecko內(nèi)核的徑向漸變，語法如下。-moz-linear-gradient ( | , ? | ? , () ?*, )實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)為網(wǎng)頁設(shè)置徑向漸變背為網(wǎng)頁設(shè)置徑向漸變背景景顏色顏色最終文件：光盤最終文件第10章10-7-2.html視頻：光盤視頻第10章10-7-2.swf在CSS 3.0中新增加了有關(guān)網(wǎng)頁背景控制的幾種屬性，

28、下面分別對這幾種種新增的背景設(shè)置屬性進(jìn)行介紹。 10.8.1background屬性屬性設(shè)置多背景圖像設(shè)置多背景圖像在CSS3.0中可以通過background屬性為一個元素應(yīng)用一個或多個圖片作為背景。代碼和CSS 2中一樣，只需要用逗號來區(qū)分各個圖片。第一個聲明的圖片定位在元素頂部，其它的圖片依次在其下排列。background: background-image | background-origin | background-clip | background-repeat | background-size | background-position;實戰(zhàn)練習(xí)實戰(zhàn)練習(xí)為網(wǎng)頁設(shè)置多個背景圖像為網(wǎng)頁設(shè)置多個背景圖像10.8.2background-size 屬性屬性背景圖像大小背景圖像大小在CSS 3.0