Dreamweaver課件：第8章 樣式表

1、第8章 使用CSS樣式表內(nèi)容提要內(nèi)容提要oCSSCSS樣式表概述樣式表概述o層疊樣式應(yīng)用技巧層疊樣式應(yīng)用技巧o附加外部樣式表的方法附加外部樣式表的方法oCSSCSS濾鏡效果應(yīng)用濾鏡效果應(yīng)用學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)o學(xué)會使用學(xué)會使用CSSCSS進(jìn)行簡單的頁面布局進(jìn)行簡單的頁面布局o了解了解CSSCSS面板各功能區(qū)的使用方法，面板各功能區(qū)的使用方法，掌握附加或新建掌握附加或新建CSSCSS樣式的方法樣式的方法CSSCSS樣式表概述樣式表概述 CSS（Cascading Style Sheet，級聯(lián)，級聯(lián)樣式表）樣式是網(wǎng)頁元素外觀屬性的集合，是一樣式表）樣式是網(wǎng)頁元素外觀屬性的集合，是一系列的格式規(guī)則，它允

2、許網(wǎng)頁設(shè)計者定義文本、系列的格式規(guī)則，它允許網(wǎng)頁設(shè)計者定義文本、表格、圖像、表單等網(wǎng)頁元素的樣式。表格、圖像、表單等網(wǎng)頁元素的樣式。層疊樣式應(yīng)用技巧層疊樣式應(yīng)用技巧o創(chuàng)建創(chuàng)建CSSCSS樣式樣式o樣式的定義樣式的定義o管理管理CSSCSS樣式樣式o應(yīng)用應(yīng)用CSSCSS樣式表樣式表創(chuàng)建創(chuàng)建CSSCSS樣式樣式 CSSCSS樣式的新建、應(yīng)用及編輯等操作都是在樣式的新建、應(yīng)用及編輯等操作都是在“CSSCSS樣式樣式”面板中完成的。面板中完成的。o認(rèn)識認(rèn)識“CSS”CSS”樣式面板樣式面板o創(chuàng)建創(chuàng)建CSSCSS樣式樣式認(rèn)識認(rèn)識“CSSCSS”樣式面板樣式面板 “ “CSSCSS樣式樣式”面板在面板在“

3、設(shè)計設(shè)計”面板組中，面板組中，如果面板組中沒有如果面板組中沒有“CSSCSS樣式樣式”面板，選面板，選擇擇 窗口窗口 中中CSSCSS樣式樣式 菜單命令，或按菜單命令，或按【Shift+F11Shift+F11】鍵即可打開鍵即可打開“CSSCSS樣式樣式”面面板，如板，如圖圖8-18-1所示。所示。 面板中各按鈕的功能如下。面板中各按鈕的功能如下。o ：單擊該按鈕可打開：單擊該按鈕可打開“附加樣式表附加樣式表”對話框。選擇要鏈接到或?qū)氲疆?dāng)前文檔對話框。選擇要鏈接到或?qū)氲疆?dāng)前文檔中的外部樣式表。中的外部樣式表。o：單擊該按鈕可新建：單擊該按鈕可新建CSSCSS樣式。樣式。 o ：單擊該按鈕可

4、打開：單擊該按鈕可打開“編輯樣式表編輯樣式表”對話框，在對話框中可對當(dāng)前文檔或外部對話框，在對話框中可對當(dāng)前文檔或外部樣式表中的任何樣式進(jìn)行編輯。樣式表中的任何樣式進(jìn)行編輯。o：選中面板中的樣式，再單擊該按鈕可：選中面板中的樣式，再單擊該按鈕可刪除所選的樣式，并刪除該樣式應(yīng)用于任刪除所選的樣式，并刪除該樣式應(yīng)用于任何元素中的設(shè)置。何元素中的設(shè)置。o：單擊該按鈕，可以打開：單擊該按鈕，可以打開“CSSCSS樣式樣式”菜單，如菜單，如圖圖8-28-2所示，通過該菜單可以編所示，通過該菜單可以編輯、復(fù)制、刪除或應(yīng)用所選中的輯、復(fù)制、刪除或應(yīng)用所選中的CSSCSS樣式，樣式，也可以新建也可以新建CSS

5、CSS樣式。樣式。 圖圖8-18-1 圖圖8-28-2創(chuàng)建創(chuàng)建CSSCSS樣式樣式 創(chuàng)建創(chuàng)建CSSCSS樣式的具體操作如下。樣式的具體操作如下。 （1 1）執(zhí)行下列）執(zhí)行下列3 3種方法之一打開如圖種方法之一打開如圖7-7-3 3所示的所示的“新建新建CSSCSS樣式樣式”對話框。對話框。 圖圖8-38-3o在在“CSSCSS樣式樣式”面板中單擊面板中單擊 按鈕。按鈕。o在在“CSSCSS樣式樣式”窗口中單擊鼠標(biāo)右鍵，在窗口中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇彈出的快捷菜單中選擇“新建新建”命令。命令。o單擊單擊 按鈕，在彈出的按鈕，在彈出的“CSSCSS樣式樣式”菜單菜單中選擇中選擇“新建

6、新建”命令。命令。 （2 2）在）在“名稱名稱”下拉列表框中輸入新下拉列表框中輸入新建建CSSCSS樣式的文件名。樣式的文件名。 （3 3）在）在“選擇器類型選擇器類型”欄中選擇所定欄中選擇所定義的樣式類型，義的樣式類型，CSSCSS樣式的創(chuàng)建類型有以樣式的創(chuàng)建類型有以下下3 3種。種。 o ：創(chuàng)建自定義樣式，選中該單選：創(chuàng)建自定義樣式，選中該單選項可以創(chuàng)建一個應(yīng)用于文本和文本塊的項可以創(chuàng)建一個應(yīng)用于文本和文本塊的CSSCSS樣樣式。但需要注意的是，在式。但需要注意的是，在“名稱名稱”下拉列表下拉列表框中輸入的自定義樣式名稱要以英文句點開框中輸入的自定義樣式名稱要以英文句點開頭，如果沒有輸入，

7、則頭，如果沒有輸入，則DreamweaverDreamweaver將自動添將自動添加。加。o ：選中該單選項可以重新定：選中該單選項可以重新定義義HTMLHTML標(biāo)簽，表示為現(xiàn)有標(biāo)簽，表示為現(xiàn)有HTMLHTML標(biāo)簽賦上新的標(biāo)簽賦上新的樣式。選中該單選項后樣式。選中該單選項后“名稱名稱”下拉列表框下拉列表框變?yōu)樽優(yōu)椤皹?biāo)簽標(biāo)簽”下拉列表框，如下拉列表框，如圖圖8-48-4所示。在所示。在該下拉列表框中可選擇重新定義的標(biāo)簽，如該下拉列表框中可選擇重新定義的標(biāo)簽，如圖圖8-58-5所示。所示。 o ：使用：使用CSSCSS選擇器，表示要對特選擇器，表示要對特定的定的HTMLHTML標(biāo)簽組合或含有某個標(biāo)

8、簽組合或含有某個IDID屬性的所有標(biāo)屬性的所有標(biāo)簽進(jìn)行重新定義。選中該單選項后簽進(jìn)行重新定義。選中該單選項后“名稱名稱”下下拉列表框變?yōu)槔斜砜蜃優(yōu)椤斑x擇器選擇器”下拉列表框，如下拉列表框，如圖圖8-8-6 6所示，可在該下拉列表框中選擇需要使用的所示，可在該下拉列表框中選擇需要使用的選擇器類型，如選擇器類型，如圖圖8-78-7所示。所示。 （4 4）在）在“定義在定義在”欄中選擇樣式的種類。欄中選擇樣式的種類。o ：選中該單選項，可以定義一個外：選中該單選項，可以定義一個外部鏈接的部鏈接的CSSCSS樣式。樣式。o ：選中該單選項，定義一個僅應(yīng)用：選中該單選項，定義一個僅應(yīng)用于當(dāng)前頁面的于當(dāng)

9、前頁面的CSSCSS樣式。樣式。 圖圖8-48-4圖圖8-58-5 圖圖8-68-6圖圖8-78-7 如果在如果在“定義在定義在”欄中選中了欄中選中了 單選項，則會打開單選項，則會打開“保存樣式表文件為保存樣式表文件為”對話框，對話框，在該對話框中保存新建的樣式表文件，如在該對話框中保存新建的樣式表文件，如圖圖8-88-8所示。所示。 若選中若選中 單選項，則直接打開如單選項，則直接打開如圖圖8-98-9所示的對話框。所示的對話框。 （5 5）在）在“分類分類”列表中選擇要定義的樣式類列表中選擇要定義的樣式類型，再在右側(cè)設(shè)置相應(yīng)參數(shù)，具體的定義方法將型，再在右側(cè)設(shè)置相應(yīng)參數(shù)，具體的定義方法將在

10、下一節(jié)講解。在下一節(jié)講解。 （6 6）設(shè)置完后單擊）設(shè)置完后單擊 按鈕，完成按鈕，完成CSSCSS樣式的創(chuàng)樣式的創(chuàng)建。建。 圖圖8-88-8圖圖8-98-9 創(chuàng)建了新的樣式后，即可在創(chuàng)建了新的樣式后，即可在“CSSCSS樣式定義樣式定義”對對話框中進(jìn)行設(shè)置，話框中進(jìn)行設(shè)置，CSSCSS樣式有樣式有8 8種，下面分別介紹種，下面分別介紹其設(shè)置方法。其設(shè)置方法。o設(shè)置設(shè)置CSSCSS樣式類型格式樣式類型格式o設(shè)置設(shè)置CSSCSS樣式背景格式樣式背景格式o設(shè)置設(shè)置CSSCSS樣式區(qū)塊格式樣式區(qū)塊格式o設(shè)置設(shè)置CSSCSS樣式方框格式樣式方框格式o設(shè)置設(shè)置CSSCSS樣式邊框格式樣式邊框格式o設(shè)置設(shè)置

11、CSSCSS樣式列表格式樣式列表格式o設(shè)置設(shè)置CSSCSS樣式定位格式樣式定位格式o設(shè)置設(shè)置CSSCSS樣式擴(kuò)展格式樣式擴(kuò)展格式樣式的定義樣式的定義 設(shè)置設(shè)置CSSCSS樣式的類型格式可以為頁面中樣式的類型格式可以為頁面中的文本加入字體、大小、風(fēng)格等類型格式，的文本加入字體、大小、風(fēng)格等類型格式，具體操作如下。具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“類型類型”選項，列表右側(cè)就會顯示出選項，列表右側(cè)就會顯示出“類型類型”選項選項的參數(shù)設(shè)置，如的參數(shù)設(shè)置，如圖圖8-108-10所示。其中各參數(shù)所示。其中各參數(shù)含義如下。含義如下。o字體：在該下拉列表框中可以輸入字體類字體：

12、在該下拉列表框中可以輸入字體類型，也可以單擊型，也可以單擊 按鈕，從下拉列表中選按鈕，從下拉列表中選擇需要的字體。擇需要的字體。設(shè)置設(shè)置CSSCSS樣式類型格式樣式類型格式 o大?。涸谠撓吕斜砜蛑锌梢灾苯虞斎霕邮轿谋敬笮。涸谠撓吕斜砜蛑锌梢灾苯虞斎霕邮轿谋镜淖痔?，或從下拉列表中選擇需要的字號，當(dāng)選的字號，或從下拉列表中選擇需要的字號，當(dāng)選擇字號后，可以在其右側(cè)的下拉列表框中選擇字擇字號后，可以在其右側(cè)的下拉列表框中選擇字號的單位。號的單位。o粗細(xì)：在該下拉列表框中可輸入字體的粗細(xì)程度，粗細(xì)：在該下拉列表框中可輸入字體的粗細(xì)程度，也可從下拉列表中選擇需要的粗細(xì)程度。也可從下拉列表中選擇需要的

13、粗細(xì)程度。o樣式：在該下拉列表框中可輸入字體的特殊格式，樣式：在該下拉列表框中可輸入字體的特殊格式，也可以從下拉列表中選擇字體的特殊格式。也可以從下拉列表中選擇字體的特殊格式。o變量：在該下拉列表中可選擇字體的變形方式。變量：在該下拉列表中可選擇字體的變形方式。o行高：在該下拉列表中可選擇行高：在該下拉列表中可選擇“正常正?！被蚧颉爸抵怠边x項，當(dāng)選擇選項，當(dāng)選擇“值值”選擇項時可在右側(cè)的下拉列選擇項時可在右側(cè)的下拉列表框中選擇值的單位。表框中選擇值的單位。o大小寫：在該下拉列表框中可以輸入文本大小寫：在該下拉列表框中可以輸入文本的大小寫方式，也可以在下拉列表中選擇的大小寫方式，也可以在下拉列表

14、中選擇文本的大小寫方式。文本的大小寫方式。o修飾：在該欄中設(shè)置文本的修飾效果，包修飾：在該欄中設(shè)置文本的修飾效果，包括括 、 、 、 、 等復(fù)選框。等復(fù)選框。o顏色：可單擊顏色：可單擊 按鈕，在打開的顏色列表按鈕，在打開的顏色列表中選擇需要的顏色，也可在文本框中直接中選擇需要的顏色，也可在文本框中直接輸入顏色值。輸入顏色值。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可按鈕即可應(yīng)用樣式，再單擊應(yīng)用樣式，再單擊 按鈕關(guān)閉對話框。按鈕關(guān)閉對話框。 圖圖8-108-10 若不使用若不使用已設(shè)置的效果，已設(shè)置的效果，選中選中 復(fù)選復(fù)選框即可。框即可。 為頁面中的元素加入背景格式的具體操作如下

15、。為頁面中的元素加入背景格式的具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“背景背景”選項，其選項，其右側(cè)顯示出右側(cè)顯示出“背景背景”的參數(shù)設(shè)置，如的參數(shù)設(shè)置，如圖圖8-118-11所示。所示。其中各參數(shù)含義如下。其中各參數(shù)含義如下。o背景顏色：可單擊背景顏色：可單擊 按鈕，在打開的顏色列表中按鈕，在打開的顏色列表中選擇需要的顏色，也可在文本框中直接輸入顏色選擇需要的顏色，也可在文本框中直接輸入顏色值。值。o背景圖像：可在該文本框中直接輸入背景圖像的背景圖像：可在該文本框中直接輸入背景圖像的URLURL地址，或單擊地址，或單擊 按鈕，打開按鈕，打開“選擇圖像源選擇圖像源文件

16、文件”對話框，選擇背景圖像。對話框，選擇背景圖像。設(shè)置設(shè)置CSSCSS樣式背景格式樣式背景格式 圖圖8-118-11 如果所選如果所選圖像不在指定圖像不在指定的站點文件中，的站點文件中，系統(tǒng)要求將所系統(tǒng)要求將所選圖片保存在選圖片保存在站點目錄中。站點目錄中。o重復(fù)：可在該下拉列表框中輸入圖像重復(fù)放置的方式，重復(fù)：可在該下拉列表框中輸入圖像重復(fù)放置的方式，也可以在其下拉列表中選擇背景圖像的重復(fù)放置方式。也可以在其下拉列表中選擇背景圖像的重復(fù)放置方式。o附件：在該下拉列表框中可以輸入附件：在該下拉列表框中可以輸入“固定固定”或或“滾動滾動”來設(shè)置該背景圖像是固定在原始位置還是可以滾動，來設(shè)置該背景

17、圖像是固定在原始位置還是可以滾動，同樣也可以在下拉列表框中選擇。同樣也可以在下拉列表框中選擇。o水平位置：在該下拉列表框中可以輸入設(shè)置背景圖像水平位置：在該下拉列表框中可以輸入設(shè)置背景圖像相對于應(yīng)用樣式元素的水平位置，也可在下拉列表中相對于應(yīng)用樣式元素的水平位置，也可在下拉列表中選擇。選擇。o垂直位置：在該下拉列表中可以輸入設(shè)置背景圖像相垂直位置：在該下拉列表中可以輸入設(shè)置背景圖像相對于應(yīng)用樣式元素的垂直位置，也可在下拉列表中選對于應(yīng)用樣式元素的垂直位置，也可在下拉列表中選擇。擇。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可應(yīng)用樣式，按鈕即可應(yīng)用樣式，再單擊再單擊 按鈕關(guān)閉對話框。

18、按鈕關(guān)閉對話框。 在在“CSSCSS樣式定義樣式定義”對話框的對話框的“區(qū)塊區(qū)塊”類別中類別中可以定義標(biāo)簽和屬性的間距和對齊設(shè)置。設(shè)置區(qū)可以定義標(biāo)簽和屬性的間距和對齊設(shè)置。設(shè)置區(qū)塊格式的具體操作如下。塊格式的具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“區(qū)塊區(qū)塊”選項，對選項，對話框右側(cè)顯示出區(qū)塊的參數(shù)設(shè)置，如話框右側(cè)顯示出區(qū)塊的參數(shù)設(shè)置，如圖圖8-128-12所示。所示。其中各參數(shù)含義如下。其中各參數(shù)含義如下。o單詞間距：在該下拉列表框中可選擇單詞的間距單詞間距：在該下拉列表框中可選擇單詞的間距方式，若選擇方式，若選擇“值值”選項，則在該下拉列表框中選項，則在該下拉列表框

19、中輸入數(shù)值來確定單詞的間距，并在右側(cè)的下拉列輸入數(shù)值來確定單詞的間距，并在右側(cè)的下拉列表中設(shè)置數(shù)值的單位。表中設(shè)置數(shù)值的單位。設(shè)置設(shè)置CSSCSS樣式區(qū)塊格式樣式區(qū)塊格式o字母間距：在該下拉列表框中設(shè)置字母間的間距。字母間距：在該下拉列表框中設(shè)置字母間的間距。若在列表中選擇若在列表中選擇“值值”選項，在右側(cè)的下拉列表中選項，在右側(cè)的下拉列表中可以設(shè)置數(shù)值的單位。可以設(shè)置數(shù)值的單位。o垂直對齊：在該下拉列表框中可指定元素相對于其垂直對齊：在該下拉列表框中可指定元素相對于其父級元素在垂直方向上的對齊方式。也可輸入一個父級元素在垂直方向上的對齊方式。也可輸入一個數(shù)值，然后在右側(cè)的下拉列表中設(shè)置數(shù)值的

20、單位。數(shù)值，然后在右側(cè)的下拉列表中設(shè)置數(shù)值的單位。o文本對齊：該下拉列表框用于指定文本在應(yīng)用該樣文本對齊：該下拉列表框用于指定文本在應(yīng)用該樣式元素中的對齊方式。式元素中的對齊方式。o文本縮進(jìn)：在該文本框中輸入第一行的縮進(jìn)距離，文本縮進(jìn)：在該文本框中輸入第一行的縮進(jìn)距離，在右側(cè)的下拉列表中選擇數(shù)值單位。在右側(cè)的下拉列表中選擇數(shù)值單位。o空格：在該下拉列表框中設(shè)置處理空格的方式?？崭瘢涸谠撓吕斜砜蛑性O(shè)置處理空格的方式。o顯示：在該下拉列表框中選擇區(qū)塊中要顯示的格式。顯示：在該下拉列表框中選擇區(qū)塊中要顯示的格式。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可應(yīng)用樣式，按鈕即可應(yīng)用樣式，再

21、單擊再單擊 按鈕關(guān)閉對話框。按鈕關(guān)閉對話框。 在在“CSSCSS樣式定義樣式定義”對話框的對話框的“方框方框”類別中類別中可以定義控制元素在頁面上的放置方式和屬性，可以定義控制元素在頁面上的放置方式和屬性，設(shè)置方框格式的具體操作如下。設(shè)置方框格式的具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“方框方框”選項，對選項，對話框右側(cè)顯示出話框右側(cè)顯示出“方框方框”選項的參數(shù)設(shè)置，如選項的參數(shù)設(shè)置，如圖圖8-138-13所示。所示。o寬和高：在該下拉列表中可指定元素的寬度和高寬和高：在該下拉列表中可指定元素的寬度和高度，也可以輸入一個數(shù)值，然后在右側(cè)的下拉列度，也可以輸入一個數(shù)值，

22、然后在右側(cè)的下拉列表中設(shè)置數(shù)值的單位。表中設(shè)置數(shù)值的單位。設(shè)置設(shè)置CSSCSS樣式方框格式樣式方框格式圖圖8-128-12圖圖8-138-13 o浮動：在該下拉列表框中設(shè)置應(yīng)用樣式元素的浮動浮動：在該下拉列表框中設(shè)置應(yīng)用樣式元素的浮動位置。利用該參數(shù)可以將元素移到頁面之外，如在位置。利用該參數(shù)可以將元素移到頁面之外，如在下拉列表框中選擇下拉列表框中選擇“右對齊右對齊”選項，則將元素放置選項，則將元素放置到頁面右側(cè)的空白處，同樣若選擇到頁面右側(cè)的空白處，同樣若選擇“左對齊左對齊”選項選項則將元素放置到頁面左側(cè)的空白處。則將元素放置到頁面左側(cè)的空白處。o清除：在該下拉列表框中可以設(shè)置層不允許在應(yīng)用

23、清除：在該下拉列表框中可以設(shè)置層不允許在應(yīng)用樣式元素的某個側(cè)邊。如在下拉列表框中選擇樣式元素的某個側(cè)邊。如在下拉列表框中選擇“左左對齊對齊”選項，則層不能出現(xiàn)在應(yīng)用樣式元素的左側(cè)。選項，則層不能出現(xiàn)在應(yīng)用樣式元素的左側(cè)。同樣如選擇同樣如選擇“右對齊右對齊”選項，則層不能出現(xiàn)在應(yīng)用選項，則層不能出現(xiàn)在應(yīng)用樣式的右側(cè)。如果層在設(shè)置該樣式前已在元素的某樣式的右側(cè)。如果層在設(shè)置該樣式前已在元素的某側(cè)，而又設(shè)置了層不能出現(xiàn)在該側(cè)邊，則應(yīng)用該樣側(cè)，而又設(shè)置了層不能出現(xiàn)在該側(cè)邊，則應(yīng)用該樣式的元素將會自動移開。式的元素將會自動移開。o填充：在該欄中可以設(shè)置應(yīng)用樣式元素的內(nèi)容和元素填充：在該欄中可以設(shè)置應(yīng)用樣

24、式元素的內(nèi)容和元素的邊框之間的空白大小，如果沒有邊框，則為與邊距的邊框之間的空白大小，如果沒有邊框，則為與邊距之間的空白大小。如選中之間的空白大小。如選中 復(fù)選框就可將復(fù)選框就可將“上上”下拉列表框中的設(shè)置應(yīng)用于元素的所有邊，如圖下拉列表框中的設(shè)置應(yīng)用于元素的所有邊，如圖7-137-13所示。若取消該復(fù)選框的選中狀態(tài)，就可分別在所示。若取消該復(fù)選框的選中狀態(tài)，就可分別在“上上”、“右右”、“下下”和和“左左”下拉列表框中設(shè)置下拉列表框中設(shè)置對應(yīng)邊的空白大小，如對應(yīng)邊的空白大小，如圖圖8-148-14所示。所示。o邊界：在該欄中可以設(shè)置應(yīng)用樣式的元素邊界和其他邊界：在該欄中可以設(shè)置應(yīng)用樣式的元素

25、邊界和其他元素之間的空白大小。如選中元素之間的空白大小。如選中 復(fù)選框就可將復(fù)選框就可將“上上”下拉列表框中的設(shè)置應(yīng)用于元素的所有邊，如下拉列表框中的設(shè)置應(yīng)用于元素的所有邊，如圖圖7-137-13所示。若取消該復(fù)選框的選中狀態(tài)，就可分別所示。若取消該復(fù)選框的選中狀態(tài)，就可分別在在“上上”、“右右”、“下下”和和“左左”下拉列表框中設(shè)下拉列表框中設(shè)置對應(yīng)邊的空白大小。在其右側(cè)的下拉列表框中可選置對應(yīng)邊的空白大小。在其右側(cè)的下拉列表框中可選擇值的單位，如擇值的單位，如圖圖8-148-14所示。所示。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可應(yīng)用樣式，再按鈕即可應(yīng)用樣式，再單擊單擊 按

26、鈕關(guān)閉對話框。按鈕關(guān)閉對話框。 在在“CSSCSS樣式定義樣式定義”對話框的對話框的“邊框邊框”類別可類別可以定義元素周圍邊框的設(shè)置，如寬度、顏色和樣以定義元素周圍邊框的設(shè)置，如寬度、顏色和樣式等，設(shè)置邊框格式的具體操作如下。式等，設(shè)置邊框格式的具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“邊框邊框”選項，列選項，列表右側(cè)顯示出表右側(cè)顯示出“邊框邊框”選項的參數(shù)設(shè)置，如選項的參數(shù)設(shè)置，如圖圖8-8-1515所示。其中各參數(shù)含義如下。所示。其中各參數(shù)含義如下。o樣式：在該欄中設(shè)置邊框的樣式外觀，該欄中各樣式：在該欄中設(shè)置邊框的樣式外觀，該欄中各項下拉列表框中的選項都相同，如項

27、下拉列表框中的選項都相同，如圖圖8-168-16所示。所示。若選中若選中 復(fù)選框，就可將復(fù)選框，就可將“上上”下拉列表框中的設(shè)下拉列表框中的設(shè)置應(yīng)用于元素的所有邊。若取消該復(fù)選框的選中置應(yīng)用于元素的所有邊。若取消該復(fù)選框的選中狀態(tài)，就可分別在狀態(tài)，就可分別在“上上”、“右右”、“下下”和和“左左”下拉列表框中設(shè)置對應(yīng)邊的邊框格式。下拉列表框中設(shè)置對應(yīng)邊的邊框格式。設(shè)置設(shè)置CSSCSS樣式邊框格式樣式邊框格式 o寬度：該欄中設(shè)置元素邊框的粗細(xì)。其設(shè)置方法與寬度：該欄中設(shè)置元素邊框的粗細(xì)。其設(shè)置方法與“樣式樣式”欄類似。欄類似。o顏色：該欄中設(shè)置元素邊框的顏色。其設(shè)置方法與顏色：該欄中設(shè)置元素邊框

28、的顏色。其設(shè)置方法與“樣式樣式”欄類似。欄類似。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可應(yīng)用樣式，按鈕即可應(yīng)用樣式，再單擊再單擊 按鈕關(guān)閉對話框。按鈕關(guān)閉對話框。 圖圖8-148-14圖圖8-158-15 在在“CSSCSS樣式定義樣式定義”對話框的對話框的“列表列表”類別中類別中可以定義列表標(biāo)簽的列表設(shè)置，如項目符號大小可以定義列表標(biāo)簽的列表設(shè)置，如項目符號大小和類型，設(shè)置列表格式的具體操作如下。和類型，設(shè)置列表格式的具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“列表列表”選項，對選項，對話框右側(cè)顯示出話框右側(cè)顯示出“列表列表”選項的參數(shù)設(shè)置，如選項的參數(shù)

29、設(shè)置，如圖圖8-178-17所示。其中各參數(shù)含義如下。所示。其中各參數(shù)含義如下。o類型：在該下拉列表框中可以選擇無序列表的項類型：在該下拉列表框中可以選擇無序列表的項目符號類型及有序列表的編號類型目符號類型及有序列表的編號類型。設(shè)置設(shè)置CSSCSS樣式列表格式樣式列表格式o項目符號圖像：在該下拉列表框中指定圖像作為無項目符號圖像：在該下拉列表框中指定圖像作為無序列表的項目符號，可直接輸入指定圖像的路徑，序列表的項目符號，可直接輸入指定圖像的路徑，也可單擊也可單擊 按鈕來選擇作為項目符號的圖像，按鈕來選擇作為項目符號的圖像，如如圖圖8-188-18所示。所示。o位置：在該下拉列表框中可以選擇列表

30、文本是否換位置：在該下拉列表框中可以選擇列表文本是否換行和縮進(jìn)。如選擇行和縮進(jìn)。如選擇“內(nèi)內(nèi)”選項，則當(dāng)列表過長而自選項，則當(dāng)列表過長而自動換行時，不縮進(jìn)，若選擇動換行時，不縮進(jìn)，若選擇“外外”選項，則當(dāng)列表選項，則當(dāng)列表過長而自動換行時以縮進(jìn)方式顯示。過長而自動換行時以縮進(jìn)方式顯示。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可應(yīng)用樣式，按鈕即可應(yīng)用樣式，再單擊再單擊 按鈕關(guān)閉對話框。按鈕關(guān)閉對話框。 圖圖8-168-16圖圖8-178-17 在在“CSSCSS樣式定義樣式定義”對話框的對話框的“定位定位”類別中類別中可以定義層的默認(rèn)標(biāo)簽列，并將標(biāo)簽或所選文本可以定義層的默認(rèn)標(biāo)簽列

31、，并將標(biāo)簽或所選文本塊更改為新層。塊更改為新層。設(shè)置設(shè)置CSSCSS樣式定位格式樣式定位格式 在在“CSSCSS樣式定義樣式定義”對話框的對話框的“擴(kuò)展擴(kuò)展”格式中可以設(shè)置格式中可以設(shè)置分頁和視覺效果選項。設(shè)置的具體操作如下。分頁和視覺效果選項。設(shè)置的具體操作如下。 （1 1）在）在“分類分類”列表中選擇列表中選擇“擴(kuò)展擴(kuò)展”選項，對話框右選項，對話框右側(cè)顯示出側(cè)顯示出“擴(kuò)展擴(kuò)展”選項的參數(shù)設(shè)置，如選項的參數(shù)設(shè)置，如圖圖8-208-20所示。其所示。其中各參數(shù)含義如下。中各參數(shù)含義如下。o分頁：在該欄中可以設(shè)置在打印頁面時強(qiáng)制分頁的位置。在分頁：在該欄中可以設(shè)置在打印頁面時強(qiáng)制分頁的位置。在“

32、之前之前”和和“之后之后”下拉列表框中，可以分別設(shè)置分頁前和分下拉列表框中，可以分別設(shè)置分頁前和分頁后位置。頁后位置。設(shè)置CSS樣式擴(kuò)展格式o視覺效果：在該欄中可以設(shè)置樣式的可視效果，在視覺效果：在該欄中可以設(shè)置樣式的可視效果，在“光標(biāo)光標(biāo)”下拉列表框中可選擇當(dāng)鼠標(biāo)光標(biāo)位于樣式下拉列表框中可選擇當(dāng)鼠標(biāo)光標(biāo)位于樣式所控制對象上時光標(biāo)的圖像；在所控制對象上時光標(biāo)的圖像；在“過濾器過濾器”下拉列下拉列表框中可以選擇樣式所控制對象的特殊效果；也就表框中可以選擇樣式所控制對象的特殊效果；也就是通常講的是通常講的CSSCSS濾鏡效果，如濾鏡效果，如圖圖8-218-21所示。定位：所示。定位：在該欄中可以將

33、層定位，層在固定的位置顯示。在該欄中可以將層定位，層在固定的位置顯示。 （2 2）設(shè)置完成后，單擊）設(shè)置完成后，單擊 按鈕即可應(yīng)用樣按鈕即可應(yīng)用樣式，再單擊式，再單擊 按鈕關(guān)閉對話框。按鈕關(guān)閉對話框。 圖圖8-208-20圖圖8-218-21 管理管理CSSCSS樣式樣式 可以對可以對CSSCSS樣式進(jìn)行刪除、復(fù)制、重命名、鏈樣式進(jìn)行刪除、復(fù)制、重命名、鏈接等操作。接等操作。o編輯編輯CSSCSS樣式樣式o刪除刪除CSSCSS樣式樣式o復(fù)制復(fù)制CSSCSS樣式樣式oCSSCSS樣式表重命名樣式表重命名o鏈接外部鏈接外部CSSCSS樣式表樣式表編輯CSS樣式 創(chuàng)建了創(chuàng)建了CSSCSS樣式后，還可

34、以對已有的樣式進(jìn)行編樣式后，還可以對已有的樣式進(jìn)行編輯，修改樣式中的某些參數(shù)。下面對已創(chuàng)建樣式進(jìn)輯，修改樣式中的某些參數(shù)。下面對已創(chuàng)建樣式進(jìn)行編輯，具體操作如下。行編輯，具體操作如下。 （1 1）在）在“CSSCSS樣式樣式”面板中，單擊面板底部的面板中，單擊面板底部的 按鈕，打開如按鈕，打開如圖圖8-228-22所示的所示的“ ”對話框。對話框。 （2 2）在列表中選中要編輯的樣式，單擊）在列表中選中要編輯的樣式，單擊 按按鈕打開鈕打開“CSSCSS樣式定義樣式定義”對話框，然后按創(chuàng)建新樣式對話框，然后按創(chuàng)建新樣式的方法修改需要的參數(shù)，修改完成后單擊的方法修改需要的參數(shù)，修改完成后單擊 按鈕

35、按鈕返回返回“編輯樣式表編輯樣式表”對話框。對話框。 （3 3）單擊）單擊 按鈕完成樣式的編輯。按鈕完成樣式的編輯。 圖圖8-228-22 也可在也可在CSS樣式面樣式面板中直接選取要編輯的板中直接選取要編輯的樣式，再單擊面板底部樣式，再單擊面板底部 按鈕，直接打開按鈕，直接打開“CSS樣式定義樣式定義”對話框進(jìn)行對話框進(jìn)行編輯。編輯。 刪除刪除CSSCSS樣式樣式 要刪除列表中的某些樣式，具體操作如下。要刪除列表中的某些樣式，具體操作如下。 （1 1）打開）打開“ ”對話框。在樣式列表對話框。在樣式列表中選中要刪除的樣式，如中選中要刪除的樣式，如圖圖8-238-23所示。所示。 （2 2）單

36、擊對話框中的）單擊對話框中的 按鈕即可將選按鈕即可將選中的樣式刪除，刪除后如中的樣式刪除，刪除后如圖圖8-248-24所示。所示。 圖8-23圖8-24 復(fù)制復(fù)制CSSCSS樣式樣式 如果要以一個已經(jīng)創(chuàng)建的如果要以一個已經(jīng)創(chuàng)建的CSSCSS樣式為基礎(chǔ)，樣式為基礎(chǔ)，創(chuàng)建另一個創(chuàng)建另一個CSSCSS樣式，此時可復(fù)制樣式，此時可復(fù)制CSSCSS樣式后樣式后再定義復(fù)制的樣式。復(fù)制再定義復(fù)制的樣式。復(fù)制CSSCSS樣式的具體操樣式的具體操作如下。作如下。 （1 1）打開）打開“ ”對話框，在樣式列對話框，在樣式列表框中選中要復(fù)制的樣式，單擊表框中選中要復(fù)制的樣式，單擊 按鈕打開按鈕打開“重制重制CSSC

37、SS樣式樣式”對話框，如對話框，如圖圖7-257-25所示。所示。 （2 2）在）在“名稱名稱”下拉列表框中設(shè)置復(fù)制樣式的下拉列表框中設(shè)置復(fù)制樣式的名稱，并根據(jù)需要在名稱，并根據(jù)需要在“選擇器類型選擇器類型”欄和欄和“定義在定義在”欄中重新選擇樣式的類型。欄中重新選擇樣式的類型。 （3 3）根據(jù)）根據(jù)“定義在定義在”欄中選中的單選項不同，欄中選中的單選項不同，會有不同的操作，與創(chuàng)建新樣式一樣，這里不再贅會有不同的操作，與創(chuàng)建新樣式一樣，這里不再贅述，復(fù)制后如述，復(fù)制后如圖圖8-268-26所示。所示。圖圖8-258-25圖圖8-268-26 CSSCSS樣式表重命名樣式表重命名 為一個為一個C

38、SSCSS樣式重新命名，具體操作如下。樣式重新命名，具體操作如下。 （1 1）打開）打開“ ”對話框，在對話框，在“樣式樣式”列列表框中選中要重命名的樣式，單擊表框中選中要重命名的樣式，單擊 按鈕打開按鈕打開“重命名類重命名類”對話框，如對話框，如圖圖8-278-27所示。所示。 （2 2）在）在“新建名稱新建名稱”文本框中輸入新的樣式文本框中輸入新的樣式名稱。名稱。 （3 3）輸入完后單擊）輸入完后單擊 按鈕即可。按鈕即可。 圖圖8-278-27 圖圖8-288-28 鏈接外部CSS樣式表 通過鏈接可將其他頁面中的樣式應(yīng)用到當(dāng)前頁通過鏈接可將其他頁面中的樣式應(yīng)用到當(dāng)前頁面中，創(chuàng)建鏈接外部樣式

39、表的具體操作如下。面中，創(chuàng)建鏈接外部樣式表的具體操作如下。 （1 1）在）在“CSSCSS樣式樣式”面板中，單擊面板中，單擊 按鈕，或在按鈕，或在打開的打開的“ ”對話框中單擊對話框中單擊 按鈕打開按鈕打開“鏈接外部樣式表鏈接外部樣式表”對話框，對話框，如如圖圖8-288-28所所示。示。 （2 2）在）在“文件文件/URL/URL”下拉列表框中指定外部樣下拉列表框中指定外部樣式表的路徑，或單擊式表的路徑，或單擊 按鈕打開按鈕打開“選擇樣式表選擇樣式表文件文件”對話框，如對話框，如圖圖8-298-29所示。所示。 （3 3）選擇了要鏈接的樣式表文件后，單擊）選擇了要鏈接的樣式表文件后，單擊 按

40、鈕返回按鈕返回“鏈接外部樣式表鏈接外部樣式表”對話框，如對話框，如圖圖8-308-30所所示。示。 （4 4）單擊）單擊 按鈕關(guān)閉對話框，則創(chuàng)建的外部按鈕關(guān)閉對話框，則創(chuàng)建的外部鏈接樣式表顯示在鏈接樣式表顯示在“CSSCSS樣式樣式”面板中，如面板中，如圖圖8-318-31所示。所示。 圖圖8-318-31圖圖8-298-29 圖圖8-308-30 CSSCSS濾鏡效果應(yīng)用濾鏡效果應(yīng)用 CSSCSS濾鏡作為濾鏡作為CSSCSS的一個新的擴(kuò)展，能把可視的一個新的擴(kuò)展，能把可視化的濾鏡和轉(zhuǎn)換效果添加到一個標(biāo)準(zhǔn)的化的濾鏡和轉(zhuǎn)換效果添加到一個標(biāo)準(zhǔn)的HTMLHTML元素元素上，使應(yīng)用樣式的對象產(chǎn)生模糊、

41、反轉(zhuǎn)、發(fā)光等上，使應(yīng)用樣式的對象產(chǎn)生模糊、反轉(zhuǎn)、發(fā)光等效果。在效果。在DreamweaverDreamweaver中，可直接在對話框中添加中，可直接在對話框中添加濾鏡的參數(shù)，而不用編寫復(fù)雜的代碼。濾鏡的參數(shù)，而不用編寫復(fù)雜的代碼。CSSCSS濾鏡效濾鏡效果應(yīng)用的具體操作如下。果應(yīng)用的具體操作如下。 （1 1）創(chuàng)建一個新的）創(chuàng)建一個新的CSSCSS樣式。樣式。 （2 2）在）在“分類分類”列表中選擇列表中選擇“擴(kuò)展擴(kuò)展”選項，對話選項，對話框右側(cè)顯示出框右側(cè)顯示出“擴(kuò)展擴(kuò)展”選項的參數(shù)設(shè)置。選項的參數(shù)設(shè)置。 （3 3）在）在“視覺效果視覺效果”欄中的欄中的“過濾器過濾器”下拉列表下拉列表框中選擇

42、樣式所控制對象的特殊效果。也就是通?？蛑羞x擇樣式所控制對象的特殊效果。也就是通常講的講的CSSCSS濾鏡效果。如濾鏡效果。如圖圖8-358-35所示。各個過濾器參數(shù)所示。各個過濾器參數(shù)的含義如下。的含義如下。oAlphaAlpha：該過濾器把對象與背景混合，通俗地講就是該過濾器把對象與背景混合，通俗地講就是對象的透明度。可以通過各個參數(shù)的設(shè)置來控制透對象的透明度?？梢酝ㄟ^各個參數(shù)的設(shè)置來控制透明的程度。各參數(shù)的含義如明的程度。各參數(shù)的含義如表表8-18-1所示。所示。圖圖8-358-35 表表8-18-1oBlendTransBlendTrans：該過濾器是一種動態(tài)過濾器，用于處理對象之間淡該

43、過濾器是一種動態(tài)過濾器，用于處理對象之間淡入談出效果。該過濾器不用直接套用，必須入談出效果。該過濾器不用直接套用，必須由由ScriptsScripts程序?qū)ζ涑绦驅(qū)ζ淇刂疲鋮?shù)的含義如表控制，其參數(shù)的含義如表8-28-2所示。所示。表表8-28-2oBlurBlur：該屬性將使對象產(chǎn)生模糊效果，可以通過各個參數(shù)的設(shè)置來該屬性將使對象產(chǎn)生模糊效果，可以通過各個參數(shù)的設(shè)置來控制模糊的方向和模糊的程度。各參數(shù)的含義如表控制模糊的方向和模糊的程度。各參數(shù)的含義如表8-38-3所示所示。表表8-38-3oChromaChroma：該過濾器可以設(shè)置對象中指定顏色為透明色，其參數(shù)的該過濾器可以設(shè)置對象中指

44、定顏色為透明色，其參數(shù)的含義如表含義如表8-48-4所示。所示。表表8-48-4 DropShadowDropShadow：該過濾器用于使對象產(chǎn)生陰影?？梢酝ㄟ^該過濾器用于使對象產(chǎn)生陰影?？梢酝ㄟ^各個參數(shù)的設(shè)置來控制陰影的顏色、透明度等。各參數(shù)各個參數(shù)的設(shè)置來控制陰影的顏色、透明度等。各參數(shù)的含義如表的含義如表8-58-5所示。所示。表表8-58-5oFlipHFlipH：該過濾器用于對象的水平翻轉(zhuǎn)效果，沒有參數(shù)，直接使該過濾器用于對象的水平翻轉(zhuǎn)效果，沒有參數(shù)，直接使用即可。用即可。oFlipVFlipV：該過濾器用于對象的垂直翻轉(zhuǎn)效果，沒有參數(shù)，直接使該過濾器用于對象的垂直翻轉(zhuǎn)效果，沒有參數(shù)

45、，直接使用即可。用即可。oGlowGlow：該過濾器用于設(shè)置對象邊緣的發(fā)光效果?？梢酝ㄟ^各個參該過濾器用于設(shè)置對象邊緣的發(fā)光效果?？梢酝ㄟ^各個參數(shù)的設(shè)置來控制發(fā)光的顏色和強(qiáng)弱等級。各參數(shù)的含義如表數(shù)的設(shè)置來控制發(fā)光的顏色和強(qiáng)弱等級。各參數(shù)的含義如表8-68-6所示。所示。表表8-68-6oGrayGray：該過濾器用于將圖片對象變?yōu)榛叶葓D，沒有該過濾器用于將圖片對象變?yōu)榛叶葓D，沒有參數(shù)，直接使用即可。參數(shù)，直接使用即可。oInvertInvert：該過濾器可以把對象的可視化屬性全部翻該過濾器可以把對象的可視化屬性全部翻轉(zhuǎn)，其中包括顏色、飽和度和亮度值，這就是俗稱轉(zhuǎn)，其中包括顏色、飽和度和亮度值

46、，這就是俗稱的底片或者負(fù)片效果，同樣沒有參數(shù)，直接使用即的底片或者負(fù)片效果，同樣沒有參數(shù)，直接使用即可?？?。oLightLight：該過濾器使對象產(chǎn)生一種模擬的投射效果。該過濾器使對象產(chǎn)生一種模擬的投射效果。該過濾器也是一種動態(tài)過濾器，它提供了類似于函該過濾器也是一種動態(tài)過濾器，它提供了類似于函數(shù)功能的方法，可以通過調(diào)用的方法來設(shè)置或改變數(shù)功能的方法，可以通過調(diào)用的方法來設(shè)置或改變其參數(shù)。其參數(shù)。oMaskMask：該過濾器按照指定顏色為對象產(chǎn)生類似蒙版該過濾器按照指定顏色為對象產(chǎn)生類似蒙版的效果，通俗地講就像隔著一層有色玻璃來看這個的效果，通俗地講就像隔著一層有色玻璃來看這個對象，一般適用于圖片對象。其參數(shù)的含義如對象，一般適用于圖片對象。其參數(shù)的含義如表表8-78-7所示。所示。oRevealTransRevealTrans：該過濾器也是一種動態(tài)過濾器，處理對象之間該過濾器也