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

1、在制作網(wǎng)站頁面時(shí)，可以通過CSS控制文字樣式，對(duì)文字的字體、大小、顏色、粗細(xì)、斜體、下畫線、頂畫線和刪除線等屬性進(jìn)行設(shè)置。使用CSS控制文字樣式的最大好處是，可以同時(shí)為多段文字賦予同一CSS樣式，在修改時(shí)只需修改某一個(gè)CSS樣式，即可同時(shí)修改應(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)站主題的作用。字體大小可以是相對(duì)大小也可以是絕對(duì)大小。在CSS樣式中，可以通過設(shè)置font-size屬性來控制字體的大小。font-size屬性的基本語法如下。font-size: 字體大小;在設(shè)置字體大小時(shí)，可以使用絕對(duì)大小單位也可以使用相對(duì)大小單位。10.1.3color屬性屬性字體顏色字體顏色在HTML頁面中，通常在頁面的標(biāo)題部分或者需要瀏覽者注意的部分使用不同的顏色，使其與其他文字有所區(qū)別，從而能夠吸引瀏覽者的注意。在CSS樣式中，文字的顏色是通過color屬性進(jìn)行設(shè)置的。color屬性的基本語法如下。color: 顏色值;

3、實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)設(shè)置網(wǎng)頁文字基本效果設(shè)置網(wǎng)頁文字基本效果10.1.4 font-weight屬性屬性字體粗細(xì)字體粗細(xì)在HTML頁面中，將字體加粗或是變細(xì)是吸引瀏覽者注意的另一種方式，同時(shí)還可以使網(wǎng)頁的表現(xiàn)形式更多多樣。在CSS樣式中通過font-weight屬性對(duì)字體的粗細(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;實(shí)戰(zhàn)實(shí)戰(zhàn)練習(xí)練習(xí)設(shè)置網(wǎng)頁文字的加粗和傾斜效果設(shè)置網(wǎng)頁文字的加粗和傾斜效果10.1.6 text-transform屬性屬性英文字體大小寫英文字體大小寫text-transform屬性可以實(shí)現(xiàn)轉(zhuǎn)換頁面中英文字體的大小寫格式，是非常實(shí)用的功能之一。text-transform屬

5、性的基本語法如下。text-transform: capitalize | uppercase | lowercase;實(shí)戰(zhàn)練習(xí)實(shí)戰(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è)計(jì)中，為文字添加下畫線、頂畫線和刪除線是美化和裝飾網(wǎng)頁的一種方法。在CSS樣式中，可以通過text-decoration屬性來實(shí)現(xiàn)這些效果。text

6、-decoration屬性的基本語法如下。text-decoration: underline | overline | line-through;實(shí)戰(zhàn)實(shí)戰(zhàn)練習(xí)練習(xí)為網(wǎng)頁文字添加修飾為網(wǎng)頁文字添加修飾10.1.8letter-spacing屬性屬性字符間距字符間距在CSS樣式中，字間距的控制是通過letter-spacing屬性來進(jìn)行調(diào)整的，該屬性既可以設(shè)置相對(duì)數(shù)值，也可以設(shè)置絕對(duì)數(shù)值，但在大多數(shù)情況下使用相對(duì)數(shù)值進(jìn)行設(shè)置。letter-spacing屬性的語法格式如下。letter-spacing: 字符間距;實(shí)戰(zhàn)練習(xí)實(shí)戰(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è)計(jì)網(wǎng)頁時(shí)，CSS樣式可以控制字體樣式，同時(shí)也可以控制字間距和段落樣式。在一般情況下，設(shè)置字體樣式只能對(duì)少數(shù)文字起作用，對(duì)于文字段落來說，還是需要通過設(shè)置段落樣式來加以控制。10.2.1line-height屬性屬性行間距行間距在CSS中，可以通過line-height屬性對(duì)段落的行間距進(jìn)行設(shè)置。line-height的值表示的是兩行文字基線之間的距離，既可以設(shè)置相對(duì)數(shù)值，也可以設(shè)置絕對(duì)數(shù)值。line-height屬性的基本語法格式如下。l

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

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

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

11、屬性用于設(shè)置是否使用一個(gè)省略標(biāo)記（）標(biāo)示對(duì)象內(nèi)文本的溢出。text-overflow屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義。要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需要定義：強(qiáng)制文本在一行內(nèi)顯示（white-space: nowrap）及溢出內(nèi)容為隱藏（overflow: hidden），只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。text-overflow屬性的語法格式如下。text-overflow: clip | ellipsis;實(shí)戰(zhàn)實(shí)戰(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)文本行超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行，word-wrap屬性的語法格式如下。word-wrap: normal | break-word;word-break屬性用于設(shè)置指定容器內(nèi)文本的字內(nèi)換行行為，尤其在出現(xiàn)多種語言時(shí)。word-break屬性的語法格式如下。word-break: normal | break-all | keep-all;實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)控制英文內(nèi)容強(qiáng)制換行控制英文內(nèi)容強(qiáng)制換行10.3.3 text-shadow 屬性屬性文本陰影文本陰影通過CSS

13、3.0中新增的text-shadow屬性就可以輕松的實(shí)現(xiàn)為文字添加陰影的效果，text-shadow屬性的語法格式如下。text-shadow: length | length |opacity | color;實(shí)戰(zhàn)實(shí)戰(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:取值; 實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)在網(wǎng)頁中使用特殊在網(wǎng)頁中使用特殊字體字體最終文件：光盤最終文件第10章10-3-4.html視頻：光盤視頻第10章10-3-4.swf通過CSS屬性來控制列表，能夠從更多方面控制列表的外觀，使列表看起來更加整齊和美觀，使網(wǎng)站實(shí)用性更強(qiáng)。在CSS樣式中專門提供了控制列表樣式的屬性，下面就不同類型的

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

16、type屬性的基本語法格式如下。list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit;實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)設(shè)置新聞列表設(shè)置新聞列表效果效果實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)設(shè)置編號(hào)列表效果設(shè)置編號(hào)列表效果最終文件：光盤最終文件第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屬性屬性自定義列表自定義列表符號(hào)符號(hào)除了可以使用CSS樣式中的列表符號(hào)，還可以使用list-style-image屬性自定義列表符號(hào)，list-style-image屬性的基本語法如下。list-style-image: 圖片地址;實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)自定義新聞列表自定義新聞列表符號(hào)符號(hào)10.4.3設(shè)置定義列表設(shè)置定義列表定義列表是一種比較特殊的列表形式，相對(duì)于有序列表和無序列表來說，應(yīng)用得比較少。定義列表的標(biāo)簽是成對(duì)出現(xiàn)的，并且需要在“代碼”視圖手動(dòng)添加代碼。從開始到結(jié)束，列表中每個(gè)元素的標(biāo)題使用標(biāo)簽，后跟隨標(biāo)簽，用于描述列表中元素的內(nèi)容。實(shí)戰(zhàn)練習(xí)實(shí)戰(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è)置一個(gè)合理的背景能夠烘托網(wǎng)頁的視覺效果，給人一種協(xié)調(diào)和統(tǒng)一的視覺感，達(dá)到美化頁面的效果。不同的背景給人的心理感受并不相同，因此為網(wǎng)頁選擇一個(gè)合適的背景非常重要。 10.5.1background-color屬性屬性背景顏色背景顏色只需在CSS樣式中添加background-color屬性，即可設(shè)置網(wǎng)頁的背景顏色，它接受任何有效地顏色值，但是如果對(duì)背景顏色沒有進(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)會(huì)以平鋪的方式顯示，在CSS中可以通過background-repeat屬性

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

21、length | percentage | top | center | bottom | left | right; 實(shí)戰(zhàn)練習(xí)實(shí)戰(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樣式表中，針對(duì)背景元素的控制，提供了background-attachment屬性，通過對(duì)該屬性的設(shè)置可以使頁面的背景不受滾動(dòng)條的限制，始終保

22、持在固定位置。background-attachment屬性的語法格式如下。background-attachment: scroll | fixed;實(shí)戰(zhàn)練習(xí)實(shí)戰(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,);實(shí)戰(zhàn)練習(xí)實(shí)戰(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)，通過對(duì)色調(diào)（H）、飽和度（S）和亮度（L）3個(gè)顏色通道的改變，以及他們相互之間的疊加來獲得各種顏色。CSS 3.0中新增了HSL顏色設(shè)置方式，在使用HSL方法設(shè)置顏色時(shí)，需要定義3個(gè)值，分別是色調(diào)（H）、飽和度（S）和亮度（L）。HSL顏色定義語法如下。hsl (,);10.6.3HSLA顏色值顏色值HSLA是HSL顏色定義方法的擴(kuò)展，在色相、飽和度、亮度三要素的基礎(chǔ)上增加了不透明度的設(shè)置。使用HSLA

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

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

26、0-6-4.swf在CSS3.0中新增了漸變?cè)O(shè)置屬性gradients，通過該屬性可以在網(wǎng)頁中實(shí)現(xiàn)漸變顏色填充的效果。避免了過多地使用漸變圖片所帶來的麻煩，而且在放大頁面的情況下一樣過渡自然。 10.7.1線性漸變背景線性漸變背景基于Webkit內(nèi)核的線性漸變，語法如下。-webkit-gradient ( linear,from(),to() , color-stop(, )*)基于Gecko內(nèi)核的線性漸變，語法如下。-moz-linear-gradient ( | , ? , () ?*,)實(shí)戰(zhàn)練習(xí)實(shí)戰(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 ( | , ? | ? , () ?*, )實(shí)戰(zhàn)練習(xí)實(shí)戰(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、下面分別對(duì)這幾種種新增的背景設(shè)置屬性進(jìn)行介紹。 10.8.1background屬性屬性設(shè)置多背景圖像設(shè)置多背景圖像在CSS3.0中可以通過background屬性為一個(gè)元素應(yīng)用一個(gè)或多個(gè)圖片作為背景。代碼和CSS 2中一樣，只需要用逗號(hào)來區(qū)分各個(gè)圖片。第一個(gè)聲明的圖片定位在元素頂部，其它的圖片依次在其下排列。background: background-image | background-origin | background-clip | background-repeat | background-size | background-position;實(shí)戰(zhàn)練習(xí)實(shí)戰(zhàn)練習(xí)為網(wǎng)頁設(shè)置多個(gè)背景圖像為網(wǎng)頁設(shè)置多個(gè)背景圖像10.8.2background-size 屬性屬性背景圖像大小背景圖像大小在CSS 3.0