《商業(yè)網(wǎng)站開(kāi)發(fā)從入門(mén)到精通》 第18章使用樣式表

1、第18章 使用樣式表l使用樣式表，不但可以定義文本等內(nèi)容的格式，同時(shí)也可以對(duì)頁(yè)面進(jìn)行布局。在W3C發(fā)布的Web標(biāo)準(zhǔn)中，推薦使用CSS進(jìn)行布局代替?zhèn)鹘y(tǒng)的表格布局。下面詳細(xì)講解關(guān)于CSS樣式表的知識(shí)。18.1 樣式表簡(jiǎn)介l本節(jié)主要講解樣式表的基礎(chǔ)知識(shí)，其中包括樣式表的概念、樣式表的作用，以及Web標(biāo)準(zhǔn)的基礎(chǔ)知識(shí)。18.1.1 樣式表的概念l級(jí)聯(lián)樣式表又稱(chēng)為CSS，是Cascading Style Sheet的縮寫(xiě)，通常也簡(jiǎn)稱(chēng)為樣式表，是W3C組織制定的，是用于控制網(wǎng)頁(yè)樣式的一種標(biāo)記性語(yǔ)言，包括CSS1和CSS2兩個(gè)部分，其中CSS2是1998年5月發(fā)布的，包含了CSS1的內(nèi)容，也是現(xiàn)在通用的標(biāo)準(zhǔn)。

2、18.1.2 樣式表的作用l樣式表的主要作用是用來(lái)定義元素的顯示效果。其中包括定義元素的大小、邊框、邊界、補(bǔ)白、背景等。同時(shí)樣式表還可以定義元素內(nèi)部文本的顯示效果，包括字體的選擇、字體的大小、字體的樣式、行高、縮進(jìn)等。除此之外，使用樣式表還可以定義元素的顯示位置、浮動(dòng)效果，以及鏈接內(nèi)容的顯示效果等。使用樣式表可以完成文檔中所有內(nèi)容的布局和修飾效果。18.1.3 W3C推薦的頁(yè)面布局lWeb標(biāo)準(zhǔn)可以分為三方面：結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言（主要包括XHTML和XML）、表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（主要包括CSS）、行為標(biāo)準(zhǔn)（主要包括對(duì)象模型、ECMAScript）。下面簡(jiǎn)單介紹一下這些標(biāo)準(zhǔn)。l1結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言l結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言包括

3、兩個(gè)部分：XML、XHTML。其具體區(qū)別如下所示。18.1.3 W3C推薦的頁(yè)面布局l2表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言lCSS是Cascading Style Sheet（層疊樣式表）的縮寫(xiě)。目前推薦遵循的是W3C于1998年5月12日推出的CSS2。CSS標(biāo)準(zhǔn)建立的目的是CSS進(jìn)行網(wǎng)頁(yè)布局，控制網(wǎng)頁(yè)的表現(xiàn)。CSS標(biāo)準(zhǔn)布局與XHTML結(jié)構(gòu)語(yǔ)言相結(jié)合，可以實(shí)現(xiàn)表現(xiàn)與結(jié)構(gòu)相分離，提高網(wǎng)站的使用性和可維護(hù)性。18.1.3 W3C推薦的頁(yè)面布局l3行為標(biāo)準(zhǔn)l行為標(biāo)準(zhǔn)也包括兩個(gè)部分：DOM、ECMAScript。其具體區(qū)別如下所示。lDOM是Document Object Model（文檔對(duì)象模型）的縮寫(xiě)。W3C建立的W

4、3C DOM是建立網(wǎng)頁(yè)與 Script（或程序語(yǔ)言）溝通的橋梁。其實(shí)現(xiàn)了訪(fǎng)問(wèn)頁(yè)面中標(biāo)準(zhǔn)組件的一種標(biāo)準(zhǔn)方法。18.2 創(chuàng)建CSS樣式l使用Dreamweaver新建CSS樣式時(shí)，可以選擇CSS的類(lèi)型，其中每種類(lèi)型的作用和注意事項(xiàng)都不相同。下面分別進(jìn)行講解。18.2.1 新建CSS樣式l在Dreamweaver中新建CSS樣式的方法，如下所示。18.2.2 使用類(lèi)l在Dreamweaver中，類(lèi)型樣式可以使用在多個(gè)內(nèi)容上。具體操作如下所示。18.2.3 使用標(biāo)簽l在Dreamweaver中的標(biāo)簽類(lèi)型樣式，可以使用在所有相同標(biāo)簽內(nèi)容上。具體操作如下所示。18.2.4 使用高級(jí)l在Dreamweave

5、r中，高級(jí)類(lèi)型樣式在文檔中是唯一標(biāo)識(shí)的標(biāo)簽內(nèi)容，同時(shí)會(huì)為相應(yīng)標(biāo)簽添加唯一標(biāo)識(shí)的ID。具體操作如下所示。18.3 新建CSS樣式文件和附加樣式l在Dreamweaver中，可以新建獨(dú)立的CSS樣式文件，并通過(guò)附加樣式的方法，使用文檔外獨(dú)立的樣式文件。下面分別進(jìn)行講解。18.3.1 新建CSS樣式文件l在Dreamweaver中新建CSS樣式文件的操作，如下所示。18.3.2 使用附加樣式l在Dreamweaver中，可以通過(guò)附加樣式的方法，使用文檔以外的CSS樣式文件，具體操作如下所示。18.4 使用CSS樣式面板l在Dreamweaver中，可以使用CSS樣式面板顯示和編輯CSS樣式，通過(guò)CS

6、S樣式面板編輯樣式，可以更加方便直觀，具體操作如下所示。l1打開(kāi)CSS樣式面板18.4 使用CSS樣式面板l2使用“全部”模式l在“全部”模式下，如圖18-20所示，CSS樣式面板分為兩個(gè)部分：上面是所有規(guī)則面板，下面是屬性面板。l在所有規(guī)則面板中，顯示了頁(yè)面以及鏈接文件中定義的所有CSS規(guī)則。18.4 使用CSS樣式面板l3使用“正在”模式l在“正在”模式下，如圖18-21所示，CSS樣式面板分為三個(gè)部分：上面是所選內(nèi)容摘要面板；中間是關(guān)于內(nèi)容面板；下面是屬性面板，其含義如下所示。18.4 使用CSS樣式面板l4使用屬性面板l在屬性面板的底部，含有更改面板顯示和操作的按鈕，其中部分按鈕的作用

7、，如下所示。18.5 設(shè)置CSS屬性l在Dreamweaver中，可以定義的CSS屬性有很多，其中包括類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展等8個(gè)類(lèi)別。下面通過(guò)示例，講解每種類(lèi)別中各個(gè)屬性使用的屬性值和效果。其中示例中使用的元素和內(nèi)容，在未定義任何樣式時(shí)，顯示效果如圖所示。18.5.1 類(lèi)型屬性l在CSS規(guī)則定義對(duì)話(huà)框中，選擇分類(lèi)中的“類(lèi)型”選項(xiàng)，打開(kāi)“類(lèi)型”選項(xiàng)對(duì)話(huà)框，在“類(lèi)型”選項(xiàng)中，可以定義元素三個(gè)部分的顯示效果，分別為定義字體的相關(guān)屬性、定義段落的相關(guān)屬性、定義文本的樣式。下面分別進(jìn)行講解。l1定義字體的相關(guān)屬性18.5.1 類(lèi)型屬性l2定義段落的相關(guān)屬性l段落的相關(guān)屬性，主要

8、是指段落中文本的行高屬性，具體操作如下所示。18.5.1 類(lèi)型屬性l3定義文本的樣式l文本的樣式是指段落中文本的下劃線(xiàn)、上劃線(xiàn)或者刪除線(xiàn)等屬性，具體操作如下所示。18.5.2 背景屬性l在CSS規(guī)則中，背景屬性用來(lái)定義元素使用的背景顏色、背景圖像，以及背景圖像的顯示位置、重復(fù)效果等，具體操作如下所示。18.5.3 區(qū)塊屬性l在CSS規(guī)則中，區(qū)塊屬性用來(lái)定義元素中文本的文字間距、對(duì)齊效果、文本縮進(jìn)、空格的顯示等，具體操作如下所示。18.5.4 方框?qū)傩詌在CSS規(guī)則中，方框?qū)傩杂脕?lái)定義元素的寬度、高度、元素和內(nèi)容之間的距離、元素和其他元素之間的距離，以及浮動(dòng)和清除等，具體操作如下所示。18.5.

9、5 邊框?qū)傩詌在CSS規(guī)則中，邊框?qū)傩杂脕?lái)定義元素邊框的顯示效果、邊框?qū)挾?、邊框顏色等，具體操作如下所示。18.5.6 列表屬性l在CSS規(guī)則中，列表屬性用來(lái)定義列表元素中項(xiàng)目符號(hào)的顯示效果、項(xiàng)目符號(hào)的替代圖像、項(xiàng)目符號(hào)的顯示位置等，具體操作如下所示。18.5.7 定位屬性l在CSS規(guī)則中，定位屬性用來(lái)定義元素邊框的顯示效果、邊框?qū)挾?、邊框顏色等，具體操作如下所示。18.5.8 擴(kuò)展屬性l在CSS規(guī)則中，擴(kuò)展屬性用來(lái)定義打印時(shí)的分頁(yè)效果、光標(biāo)的顯示效果、CSS濾鏡等，具體操作如下所示。18.5.9 CSS濾鏡l在Dreamweaver中，選擇分類(lèi)中的“擴(kuò)展”選項(xiàng)，打開(kāi)CSS規(guī)則定義對(duì)話(huà)框，在“過(guò)濾器”選項(xiàng)中可以定義各種CSS濾鏡，其中部分濾鏡的使用方法如下所示。l1“透明度”濾鏡18.5.9 CSS濾鏡l2“模糊”濾鏡18.5.9 CSS濾鏡l3“波浪”濾鏡18.6 定義鏈接的樣式l在Dreamweaver中，可以使用CSS樣式定義鏈接內(nèi)容使用的樣式，具體操作如下所示。18.7 專(zhuān)家總結(jié)lCSS樣式表的內(nèi)容很多，也較為復(fù)雜，其主要作用是用來(lái)定