網(wǎng)頁設(shè)計 (2)

1、今日主題 CSS簡介 CSS語法 CSS應(yīng)用CSS 版本版本CSS1 作為一項 W3C 推薦，CSS1 發(fā)布于 1996 年 12 月 17 日。1999 年 1 月 11 日，此推薦被重新修訂。CSS2 作為一項 W3C 推薦，CSS2 發(fā)布于 1999 年 1 月 11 日。CSS2 添加了對媒介（打印機和聽覺設(shè)備）和可下載字體的支持。CSS3CSS3 計劃將 CSS 劃分為更小的模塊。1. CSS簡介CSS-層疊樣式表樣式表可描述文檔如何被顯示、發(fā)音或打印。樣式表可描述文檔如何被顯示、發(fā)音或打印。CSS 是一種向網(wǎng)頁添加樣式的機制。是一種向網(wǎng)頁添加樣式的機制。CSS樣式表（樣式表（Cas

2、cading Style Sheets，簡稱，簡稱CSS），），又稱為層疊式樣式表，由又稱為層疊式樣式表，由W3C（World Wide Web Consortium）組織開發(fā)的。）組織開發(fā)的。CSS樣式是預(yù)先定義的一樣式是預(yù)先定義的一個格式的集合，包括字體、大小、顏色、對齊方式等。個格式的集合，包括字體、大小、顏色、對齊方式等。利用利用CSS樣式可以使整個站點的風(fēng)格保持一致，是網(wǎng)樣式可以使整個站點的風(fēng)格保持一致，是網(wǎng)頁設(shè)計中用途最廣泛、功能最強大的元素之一。頁設(shè)計中用途最廣泛、功能最強大的元素之一。2. CSS語法CSS概念-Cascading Style Sheet層疊樣式表CSS-P-

3、Cascading Style Sheet-PositionCSS的功能在幾乎所有的瀏覽器上都可使用以前通過圖片轉(zhuǎn)換實現(xiàn)的功能，現(xiàn)在通過CSS可以實現(xiàn)使網(wǎng)頁字體變得更漂亮，更容易編排可以輕松控制網(wǎng)頁布局可以將許多網(wǎng)頁風(fēng)格同時更新CSS定義selectorproperty:value;property:valueCSS定義selectorproperty:value;property:valueSelector分為三種形式：（1）HTML Selector:等等（2）class Selector：a 相關(guān)相關(guān)class Selectortag.classnameproperty:valuetd.

4、fancy color: #f60; background: #666; b 獨立獨立class Selector.classnameproperty:value.center text-align: center This paragraph will also be center-aligned. (3)ID Selector:#red color:red; #green color:green;這個段落是紅色。 這個段落是綠色。(1)嵌入式樣式表（2）行內(nèi)樣式表(3)外部樣式表P.doubleline-Height:2P.centertext-align:centerp.greentex

5、tcolor:green在在Dreamweaver8可以定義以下的樣式類型：可以定義以下的樣式類型：自定義自定義CSS規(guī)則：指根據(jù)用戶的需要創(chuàng)建一個規(guī)則：指根據(jù)用戶的需要創(chuàng)建一個CSS樣式屬性，可應(yīng)用到文字，圖片等網(wǎng)頁元素中。樣式屬性，可應(yīng)用到文字，圖片等網(wǎng)頁元素中。HTML標(biāo)簽規(guī)則：可以對標(biāo)簽規(guī)則：可以對HTML語言中的某一語言中的某一標(biāo)簽進行重新定義。標(biāo)簽進行重新定義。CSS選擇器樣式（高級樣式）：重新定義特定選擇器樣式（高級樣式）：重新定義特定元素組合的格式設(shè)置，或重新定義元素組合的格式設(shè)置，或重新定義CSS允許的其他允許的其他選擇器的格式設(shè)置，還可以重新定義包含特定選擇器的格式設(shè)置，還

6、可以重新定義包含特定id屬屬性的標(biāo)簽的格式設(shè)置。性的標(biāo)簽的格式設(shè)置。單擊菜單欄中單擊菜單欄中“窗口窗口”|“CSS樣式樣式”命令或用組合命令或用組合鍵鍵Shift+F11鍵打開鍵打開CSS樣式面板，如圖所示。樣式面板，如圖所示?！叭咳俊蹦Ｊ侥Ｊ?“正在正在”模式模式CSS樣式面板有“全部”和“正在”兩種模式。“全部”模式：顯示兩個窗格：“所有規(guī)則”窗格（上部）和“屬性”窗格（下部）?！罢凇蹦Ｊ剑猴@示三個窗格：顯示文檔中當(dāng)前所選內(nèi)容的CSS屬性的“所選內(nèi)容的摘要”窗格，顯示所選屬性的位置的“規(guī)則”窗格，以及CSS屬性的“屬性”窗格。面板中主要功能按鈕如下： ：表示附加或鏈接外部樣式表。 ：

7、新建樣式表。 ：編輯選中的樣式表。 ：刪除選中的樣式表9.2.1 創(chuàng)建創(chuàng)建CSS樣式樣式9.2.2 附加外部附加外部CSS樣式樣式9.2.3 應(yīng)用應(yīng)用CSS樣式樣式9.2.4 編輯編輯CSS樣式樣式9.2.5 刪除刪除CSS樣式樣式 （一）創(chuàng)建樣式表文件（一）創(chuàng)建樣式表文件1單擊菜單欄中單擊菜單欄中“文件文件”|“新建新建”命令，打開新建文命令，打開新建文檔對話框。檔對話框。2在對話框左側(cè)在對話框左側(cè)“類別類別”中選擇中選擇“CSS樣式表樣式表”類別，類別，在中間在中間“CSS樣式表樣式表”欄選擇需要的樣式，右側(cè)是樣式表預(yù)欄選擇需要的樣式，右側(cè)是樣式表預(yù)覽圖。覽圖。3點擊點擊“創(chuàng)建創(chuàng)建”按鈕，

8、按鈕，新建了一個新建了一個CSS樣式表文樣式表文件，如圖所示。件，如圖所示。編輯樣式表后，單編輯樣式表后，單擊菜單欄中擊菜單欄中“文件文件”|“保存保存”命命令，則可以保存一個外部的令，則可以保存一個外部的樣式表文件。樣式表文件。 （二）在（二）在CSS樣式面板中創(chuàng)建樣式面板中創(chuàng)建CSS樣式表文件樣式表文件1在在CSS樣式面板中，單擊樣式面板中，單擊“新建新建” 按鈕，打開按鈕，打開“新新建建CSS規(guī)則規(guī)則”對話框，如圖。對話框，如圖。2設(shè)置選擇器類型為設(shè)置選擇器類型為“類類”，名字為，名字為.dazi，定義在，定義在“新建樣式表文件新建樣式表文件”，單擊，單擊“確定確定”按鈕，打開按鈕，打開

9、“保存樣保存樣式表文件式表文件”對話框。對話框。 3保存樣式表文件，同時打開保存樣式表文件，同時打開“.dazi的的CSS規(guī)則定義規(guī)則定義的對話框，的對話框，如圖所示如圖所示。4在在“類型類型”選項中，設(shè)置字體字號等項目，完成后選項中，設(shè)置字體字號等項目，完成后單擊單擊“確定確定”按鈕，新建的樣式出現(xiàn)在樣式面板中，如圖按鈕，新建的樣式出現(xiàn)在樣式面板中，如圖所示。所示。 1打開打開CSS樣式表面板。樣式表面板。2執(zhí)行以下操作之一：執(zhí)行以下操作之一：單擊單擊CSS面板底部的面板底部的“附加樣式表附加樣式表”按鈕按鈕 或者右鍵單擊或者右鍵單擊CSS樣式面板，在彈出的快捷菜單中選樣式面板，在彈出的快捷

10、菜單中選擇擇“附加樣式表附加樣式表”命令。命令。3打開打開“鏈接外部樣式表鏈接外部樣式表”對話框，如圖所示。對話框，如圖所示。 4點擊點擊“瀏覽瀏覽”按扭，選擇要添加的樣式文件。添加按扭，選擇要添加的樣式文件。添加的形式有兩種：的形式有兩種：“鏈接鏈接”：網(wǎng)頁與樣式表文件的關(guān)系是鏈接關(guān)系，而：網(wǎng)頁與樣式表文件的關(guān)系是鏈接關(guān)系，而且不將樣式表的信息導(dǎo)入網(wǎng)頁中。且不將樣式表的信息導(dǎo)入網(wǎng)頁中?！皩?dǎo)入導(dǎo)入”：將外部樣式表文件的信息導(dǎo)入到當(dāng)前網(wǎng)頁：將外部樣式表文件的信息導(dǎo)入到當(dāng)前網(wǎng)頁文檔中。文檔中。5單擊單擊“確定確定”按鈕。這樣外部的按鈕。這樣外部的CSS樣式就會鏈接樣式就會鏈接或?qū)氲疆?dāng)前文檔中。或

11、導(dǎo)入到當(dāng)前文檔中。 1首先要打開需要鏈接首先要打開需要鏈接CSS樣式的文檔，選中文字或樣式的文檔，選中文字或圖片等網(wǎng)頁元素。圖片等網(wǎng)頁元素。2執(zhí)行以下操作之一：執(zhí)行以下操作之一：在屬性檢查器中的在屬性檢查器中的“樣式樣式”下拉列表中選擇編輯好的下拉列表中選擇編輯好的樣式，如選擇樣式，如選擇“dazi”，如圖所示。，如圖所示。 在在CSS樣式面板中，右樣式面板中，右擊要應(yīng)用的樣式名稱（如擊要應(yīng)用的樣式名稱（如.dazi），在彈出的快捷菜單中選擇），在彈出的快捷菜單中選擇“套用套用”。3所選的文字應(yīng)用了所選的文字應(yīng)用了CSS樣式。樣式。4取消樣式的應(yīng)用，只需在選擇己應(yīng)用樣式的文本，取消樣式的應(yīng)用，

12、只需在選擇己應(yīng)用樣式的文本，在在“屬性檢查器屬性檢查器”中的中的“樣式樣式”下拉列表中選擇下拉列表中選擇“無無”即即可?？?。 在在CSS樣式面板中選擇要編輯的樣式名稱，然后點擊樣式面板中選擇要編輯的樣式名稱，然后點擊面板下方的面板下方的 按鈕，會彈出按鈕，會彈出“CSS規(guī)則定義規(guī)則定義”對話框，在對話框，在對話框中可以對對話框中可以對CSS樣式重新編輯。樣式重新編輯。在在CSS樣式面板中選擇要刪除的樣式面板中選擇要刪除的CSS樣式名稱，點擊樣式名稱，點擊 按鈕，就可以刪除掉按鈕，就可以刪除掉CSS樣式。樣式。 “類型類型”類別主要用于定義文本屬性，具體為：類別主要用于定義文本屬性，具體為：1字

13、體：設(shè)置字體或字體組。字體：設(shè)置字體或字體組。2大?。哼x擇或鍵入字體的大小，單位可以選擇大?。哼x擇或鍵入字體的大小，單位可以選擇“像像素（素（px）”、“點數(shù)（點數(shù)（pt）”等。等。3粗細(xì)：設(shè)置字體的粗細(xì)程度。粗細(xì)：設(shè)置字體的粗細(xì)程度。4樣式：選擇文本的字體格式有正常、斜體和偏斜體樣式：選擇文本的字體格式有正常、斜體和偏斜體三種，偏斜體是指文本為傾斜的字體格式。三種，偏斜體是指文本為傾斜的字體格式。5變量：設(shè)置文字變形的字體格式。此項在變量：設(shè)置文字變形的字體格式。此項在Dreawmeaver8文檔窗口中不顯示，文檔窗口中不顯示，Internet Explorer6.0版版本以上顯示，本以上顯

14、示，Netscape Navigator不支持。不支持。6行高：設(shè)置文本的行間距。有兩個選項：正常：自行高：設(shè)置文本的行間距。有兩個選項：正常：自動設(shè)置文本間行的高度；（值）：設(shè)置文本之間的行距的動設(shè)置文本間行的高度；（值）：設(shè)置文本之間的行距的具體數(shù)值。具體數(shù)值。7大小寫：設(shè)置字體的大小寫方式。大小寫：設(shè)置字體的大小寫方式。8修飾：選擇需要的復(fù)選框，給文字添加修飾。修飾：選擇需要的復(fù)選框，給文字添加修飾。9顏色：設(shè)置文字的顏色。顏色：設(shè)置文字的顏色。在在“CSS規(guī)則定義規(guī)則定義”對話框中選擇對話框中選擇“背景背景”類別，如圖。類別，如圖。1背景顏色：設(shè)置背景顏色。背景顏色：設(shè)置背景顏色。2背

15、景圖像：設(shè)置背景圖像，通過后面的背景圖像：設(shè)置背景圖像，通過后面的“瀏覽瀏覽”按按鈕可以選擇一個圖像作為背景。鈕可以選擇一個圖像作為背景。3重復(fù)：表示背景圖像的填充方式，有四個選項：重復(fù)：表示背景圖像的填充方式，有四個選項：“不重復(fù)不重復(fù)”：圖像不重復(fù)，只是應(yīng)用：圖像不重復(fù)，只是應(yīng)用CSS樣式的網(wǎng)頁元樣式的網(wǎng)頁元素前面顯示一次。素前面顯示一次?！爸貜?fù)重復(fù)”：圖像會在水平和垂直方向重復(fù)。：圖像會在水平和垂直方向重復(fù)。“水平重復(fù)水平重復(fù)”：背景圖像在水平方向上重復(fù)。：背景圖像在水平方向上重復(fù)?！翱v向重復(fù)縱向重復(fù)”：背景圖像在垂直方向上重復(fù)：背景圖像在垂直方向上重復(fù)4附件：在下拉菜單中選擇背景圖像的

16、顯示方式。附件：在下拉菜單中選擇背景圖像的顯示方式。5“水平位置水平位置”和和“垂直位置垂直位置”：設(shè)置背景圖像相對：設(shè)置背景圖像相對于元素的初始位置。于元素的初始位置。在在“CSS規(guī)則定義規(guī)則定義”對話框中選擇對話框中選擇“區(qū)塊區(qū)塊”類別，如圖。類別，如圖。1單詞間距：選擇或設(shè)置單詞間的間距。單詞間距：選擇或設(shè)置單詞間的間距。2字母間距：選擇或設(shè)置字母間的間距。字母間距：選擇或設(shè)置字母間的間距。3重直對齊：設(shè)置元素在垂直位置上的對齊方式。重直對齊：設(shè)置元素在垂直位置上的對齊方式。4文本對齊：設(shè)置文本的對齊方式。文本對齊：設(shè)置文本的對齊方式。5文字縮進：文本框中輸入具體數(shù)值，精確設(shè)置文本文字縮

17、進：文本框中輸入具體數(shù)值，精確設(shè)置文本的首行縮進的大小。的首行縮進的大小。6空格：設(shè)置文本處理空格的方式?？崭瘢涸O(shè)置文本處理空格的方式?！罢Ｕ！笔湛s空收縮空白；白；“保留保留”即保留所有空白，包括空格、制表符和回車；即保留所有空白，包括空格、制表符和回車；“不換行不換行”指當(dāng)用戶強行換行時才換行，否則不會自動換指當(dāng)用戶強行換行時才換行，否則不會自動換行。行。7顯示：設(shè)置是否顯示及如何顯示元素。顯示：設(shè)置是否顯示及如何顯示元素。在在“CSS規(guī)則定義規(guī)則定義”對話框中選擇對話框中選擇“方框（又稱盒子）方框（又稱盒子）”類別，如圖。類別，如圖。1寬和高：設(shè)置元素的寬度和高度。寬和高定義的對寬和高

18、：設(shè)置元素的寬度和高度。寬和高定義的對象多為圖片，表格，層等。象多為圖片，表格，層等。2浮動：設(shè)置元素的浮動位置。如選擇左對齊，則將浮動：設(shè)置元素的浮動位置。如選擇左對齊，則將元素放置到左頁面的空白處。元素放置到左頁面的空白處。3清除：設(shè)置元素的哪一邊允許分層。如左對齊：表清除：設(shè)置元素的哪一邊允許分層。如左對齊：表示不允許分層出現(xiàn)在元素的左側(cè)。示不允許分層出現(xiàn)在元素的左側(cè)。4填充：設(shè)置元素內(nèi)容與元素邊框之間的間距。取消填充：設(shè)置元素內(nèi)容與元素邊框之間的間距。取消選擇選擇“全部相同全部相同”選項可設(shè)置元素各個邊填充的具體數(shù)值。選項可設(shè)置元素各個邊填充的具體數(shù)值。5邊界：設(shè)置元素邊界和其他元素間

19、距。邊界：設(shè)置元素邊界和其他元素間距。在在“CSS規(guī)則定義規(guī)則定義”對話框中選擇對話框中選擇“邊框邊框”類別，如圖。類別，如圖。 1樣式：設(shè)置邊框的外觀樣式。取消選擇樣式：設(shè)置邊框的外觀樣式。取消選擇“全部相同全部相同”選項，可分別設(shè)置各邊框樣式。選項，可分別設(shè)置各邊框樣式。2寬度：設(shè)置元素邊框的粗細(xì)。寬度：設(shè)置元素邊框的粗細(xì)。3顏色：設(shè)置邊框的顏色。顏色：設(shè)置邊框的顏色?？梢远x列表的屬性，在可以定義列表的屬性，在“CSS規(guī)則定義規(guī)則定義”對話框中選對話框中選擇擇“列表列表”類別，如圖。類別，如圖。1類型：設(shè)置項目符號或編號的外觀。如可以選擇圓類型：設(shè)置項目符號或編號的外觀。如可以選擇圓點、

20、方塊、數(shù)字、羅馬數(shù)字等。點、方塊、數(shù)字、羅馬數(shù)字等。2項目符號圖像：可以為項目符號指定圖像。項目符號圖像：可以為項目符號指定圖像。3位置：設(shè)置列表項文本是否換行和縮進以及文本是位置：設(shè)置列表項文本是否換行和縮進以及文本是否換行到左邊距。有二個選項：否換行到左邊距。有二個選項：“內(nèi)內(nèi)”：當(dāng)列表項超出范圍后會自動換行，將顯示在：當(dāng)列表項超出范圍后會自動換行，將顯示在旁邊的空白上，不進行任何縮進。旁邊的空白上，不進行任何縮進。“外外”：當(dāng)列表項超出范圍后會自動換行，以縮進方：當(dāng)列表項超出范圍后會自動換行，以縮進方式顯示。式顯示。在在“CSS規(guī)則定義規(guī)則定義”對話框中選擇對話框中選擇“定位定位”類別，

21、如圖。類別，如圖。1類型：在下拉列表中選擇定位層的方式。類型：在下拉列表中選擇定位層的方式。2顯示：確定層的初始顯示條件。如果不指定可見性顯示：確定層的初始顯示條件。如果不指定可見性屬性，則默認(rèn)情況為顯示。屬性，則默認(rèn)情況為顯示。3Z軸：設(shè)置軸：設(shè)置Z軸層的堆疊順序。軸層的堆疊順序。3溢位：確定在層的內(nèi)容超出層的寬度和高度時的處溢位：確定在層的內(nèi)容超出層的寬度和高度時的處理方式。理方式。4置入：設(shè)置層的位置和大小。置入：設(shè)置層的位置和大小。5裁切：定義層的可見部分。裁切：定義層的可見部分。在在“CSS規(guī)則定義規(guī)則定義”對話框中選擇對話框中選擇“擴展擴展”類別，如圖。類別，如圖。1分頁：打印時在

22、樣式所控制的對象之前或者之后強分頁：打印時在樣式所控制的對象之前或者之后強行分頁。行分頁。2光標(biāo)：在下拉列表中，選擇光標(biāo)顯示屬性設(shè)置。當(dāng)光標(biāo)：在下拉列表中，選擇光標(biāo)顯示屬性設(shè)置。當(dāng)指針位于樣式所控制的對象上時光標(biāo)指針圖像會發(fā)生改變。指針位于樣式所控制的對象上時光標(biāo)指針圖像會發(fā)生改變。光標(biāo)屬性的相關(guān)說明見表。光標(biāo)屬性的相關(guān)說明見表。屬性說明屬性說明Auto自動改變樣式Crosshair精確定位+Default默認(rèn)指針Hand手形Move移動e-resize箭頭朝右方ne-resize箭頭朝右上方nw-resize箭頭朝左上方n-resize箭頭朝上方se-resize箭頭朝右下方sw-resiz

23、e箭頭朝左下方s-resize箭頭朝下方w-resize箭頭朝左方text文本I形 Wait等待help幫助3CSS濾鏡：又稱過濾器，可以為網(wǎng)頁中的元素添加濾鏡：又稱過濾器，可以為網(wǎng)頁中的元素添加各種效果。主要濾鏡及說明見表各種效果。主要濾鏡及說明見表濾鏡說明濾鏡說明Alpha 透明的漸進效果Gray彩色圖片變灰度圖BlendTrans淡入淡出效果Invert底片效果Blur風(fēng)吹模糊的效果Light模擬光源效果Chroma指定顏色透明Mask矩形遮罩效果DropShadow陰影效果RevealTrans動態(tài)效果FlipH水平翻轉(zhuǎn)Shadow輪廓陰影效果FlipV垂直翻轉(zhuǎn)Wave波浪扭曲變形效果

24、Glow邊緣光暈效果XrayX光照片效果改變鼠標(biāo)的形狀是應(yīng)用改變鼠標(biāo)的形狀是應(yīng)用擴展擴展類別中的光標(biāo)屬性來設(shè)類別中的光標(biāo)屬性來設(shè)置的，操作為：置的，操作為：1新建一個網(wǎng)頁插入一幅圖像并保存網(wǎng)頁。新建一個網(wǎng)頁插入一幅圖像并保存網(wǎng)頁。2在在CSS樣式面板中，單擊樣式面板中，單擊 按鈕，打開按鈕，打開“新建新建CSS規(guī)規(guī)則則”對話框，如圖所示。對話框，如圖所示。 3輸入輸入CSS樣式的名稱樣式的名稱“.shubiao”，“選擇器類型選擇器類型”選擇選擇“類類”選項，選項，“定義在定義在”選擇選擇“僅對該文檔僅對該文檔”。4點擊點擊“確定確定”，打開，打開“.shubiao的的CSS規(guī)則定義規(guī)則定義”

25、對話框，切換到對話框，切換到“擴展擴展”分類，如圖。分類，如圖。5在在“視覺效果視覺效果”的的“光標(biāo)光標(biāo)”的下拉列表中選擇的下拉列表中選擇“help”，單擊，單擊“確定確定”按鈕，樣式建立完成。按鈕，樣式建立完成。6選中圖像，執(zhí)行以下操作之一：選中圖像，執(zhí)行以下操作之一：在在CSS面板中，右擊面板中，右擊.shubiao樣式，在彈出的快捷菜單樣式，在彈出的快捷菜單中選擇中選擇“套用套用”命令。命令。在在“屬性檢查器屬性檢查器”的的“類類”的下拉列表中選擇的下拉列表中選擇“shubiao”。7保存網(wǎng)頁，在瀏覽器中鼠標(biāo)指向圖像測試效果。保存網(wǎng)頁，在瀏覽器中鼠標(biāo)指向圖像測試效果。不同的超鏈接效果不同

26、的超鏈接效果,可以通過可以通過CSS“選擇器類型選擇器類型”中的中的“高級（高級（ID、上下文選擇器等）、上下文選擇器等）”中進行設(shè)置，有四個選中進行設(shè)置，有四個選項可供選擇：項可供選擇： a:link：未訪問的鏈接。：未訪問的鏈接。a:visited：已訪問過的超鏈接。：已訪問過的超鏈接。a:hover：鼠標(biāo)指針移到超鏈接文字上時的超鏈接。：鼠標(biāo)指針移到超鏈接文字上時的超鏈接。a:active：正在訪問的超鏈接。：正在訪問的超鏈接。利用利用CSS樣式更改超鏈接樣式的操作為：樣式更改超鏈接樣式的操作為：1打開一個帶有超鏈接的網(wǎng)頁文檔。打開一個帶有超鏈接的網(wǎng)頁文檔。2在在CSS樣式面板中，單擊樣

27、式面板中，單擊 按鈕，打開按鈕，打開“新建新建CSS規(guī)規(guī)則則”對話框，在對話框，在“選擇器類型選擇器類型”選擇選擇“高級高級”，在，在“選擇選擇器器”中選擇中選擇“a:link”，如圖所示。，如圖所示。 3“定義在定義在”選擇選擇“僅對該文檔僅對該文檔”，單擊，單擊“確定確定”，打開打開“a:link的的CSS規(guī)則定義規(guī)則定義”對話框，如圖所示。對話框，如圖所示。 4在在“類型類型”分類中，設(shè)置字體：幼圓，顏色：分類中，設(shè)置字體：幼圓，顏色：#00CC00，修飾：無（無下劃線）。，修飾：無（無下劃線）。5單擊單擊“確定確定”按鈕，完成按鈕，完成a:link樣式的創(chuàng)建。樣式的創(chuàng)建。6重復(fù)以上操作

28、分別設(shè)置：重復(fù)以上操作分別設(shè)置：a:visited，字體：華文行楷，顏色：，字體：華文行楷，顏色：#660033，修飾：無（無下劃，修飾：無（無下劃線）。線）。a:hover：字體：幼圓，顏色：字體：幼圓，顏色：#FF0000，修飾：下劃線。，修飾：下劃線。a:active：字體：華文新魏，樣式：傾斜，顏色：字體：華文新魏，樣式：傾斜，顏色：#0000CC，修飾：，修飾：下劃線。下劃線。7保存并在瀏覽器中預(yù)覽網(wǎng)頁，效果如圖所示。保存并在瀏覽器中預(yù)覽網(wǎng)頁，效果如圖所示。（一）模糊效果濾鏡（一）模糊效果濾鏡（blur）1新建一個網(wǎng)頁并插入兩幅相同的圖像并保存網(wǎng)頁。新建一個網(wǎng)頁并插入兩幅相同的圖像并

29、保存網(wǎng)頁。2在在CSS樣式面板中，單擊樣式面板中，單擊 按鈕，打開按鈕，打開“新建新建CSS規(guī)規(guī)則則”對話框。如圖所示。對話框。如圖所示。 3名稱中輸入名稱中輸入“.blur”，“選擇器類型選擇器類型”選擇選擇“類類”，“定義在定義在”選擇選擇“僅對該文檔僅對該文檔”。4設(shè)置完成后，單擊設(shè)置完成后，單擊“確定確定”按鈕，打開按鈕，打開“.blur的的CSS規(guī)則定義規(guī)則定義”對話框，切換到對話框，切換到“擴展擴展”分類。分類。5在在“濾鏡濾鏡”中選擇中選擇Blur濾鏡，參數(shù)設(shè)置如下：濾鏡，參數(shù)設(shè)置如下：Blur(Add=true, Direction=135,Strength=20)。如圖所示。

30、如圖所示6設(shè)置完成后，單擊設(shè)置完成后，單擊“確定確定”，創(chuàng)建的，創(chuàng)建的CSS樣式出現(xiàn)樣式出現(xiàn)在在CSS面板。面板。7選中文檔中的右側(cè)圖像，執(zhí)行以下操作之一：選中文檔中的右側(cè)圖像，執(zhí)行以下操作之一：在在CSS面板中，右擊面板中，右擊.blur樣式，在彈出的快捷菜單中樣式，在彈出的快捷菜單中選擇選擇“套用套用”命令。命令。在屬性檢查器的在屬性檢查器的“類類”的下拉列表中選擇的下拉列表中選擇“blur”。8保存并在瀏覽器中預(yù)覽網(wǎng)頁，效果如圖所示。保存并在瀏覽器中預(yù)覽網(wǎng)頁，效果如圖所示。（二）陰影效果濾鏡（二）陰影效果濾鏡（shadow）1新建一個網(wǎng)頁并在網(wǎng)頁中插入表格輸入文本，如圖新建一個網(wǎng)頁并在網(wǎng)

31、頁中插入表格輸入文本，如圖所示，保存文檔。所示，保存文檔。 2在在CSS樣式面樣式面板中，單擊板中，單擊 按鈕，打按鈕，打開開“新建新建CSS規(guī)則規(guī)則”對對話框。如圖所示。話框。如圖所示。 3名稱中輸入名稱中輸入“.shadow”，“選擇器類型選擇器類型”選擇選擇“類類”，“定義在定義在”選擇選擇“僅對該文檔僅對該文檔”。4設(shè)置完成后，單擊設(shè)置完成后，單擊“確定確定”按鈕，打開按鈕，打開“.shadow的的CSS規(guī)則定義規(guī)則定義”對話框，切換到對話框，切換到“擴展擴展”類別，如圖所示。類別，如圖所示。5在在“濾鏡濾鏡”中選擇中選擇Shadow濾鏡，參數(shù)設(shè)置如下：濾鏡，參數(shù)設(shè)置如下：Shadow

32、 (Color=#666666,Direction=45)。6設(shè)置完成后，單擊設(shè)置完成后，單擊“確定確定”，創(chuàng)建的，創(chuàng)建的CSS樣式出現(xiàn)樣式出現(xiàn)在在CSS面板。面板。7選中文檔中左側(cè)單元格，執(zhí)行以下操作之一：選中文檔中左側(cè)單元格，執(zhí)行以下操作之一：在在CSS面板中，右擊面板中，右擊.shadow樣式，在彈出的快捷菜單中選擇樣式，在彈出的快捷菜單中選擇“套用套用”命令。命令。在屬性檢查器的在屬性檢查器的“類類”的下拉列表中選擇的下拉列表中選擇“shadow”。8保存并在瀏覽器中預(yù)保存并在瀏覽器中預(yù)覽網(wǎng)頁，效果如圖所示。覽網(wǎng)頁，效果如圖所示。 回顧 CSS 的優(yōu)點之前，我要先介紹一下它的歷史。We

33、b 管理組織 W3C 在 1996 年 11 月推薦使用 CSS，并批準(zhǔn)了 CSS 1 級規(guī)范。CSS 1 級規(guī)范說明了用于 HTML 頁面的屬性。這些屬性代替了傳統(tǒng)的字體標(biāo)簽和其他“樣式”標(biāo)記，例如顏色和邊距。1998 年 5 月，W3C 批準(zhǔn)了 CSS 2 級規(guī)范，將一些附加功能添加到 1 級規(guī)范，并引進了定位屬性。這些屬性代替了表格標(biāo)簽普遍（但是錯誤）的用法，用來設(shè)計頁面元素的表示。CSS 規(guī)范的最新版本是 CSS 2.1，它改進了某些屬性，并刪除了在當(dāng)前瀏覽器里沒有作用或作用很小的屬性。為什么使用CSS？ 不幸的是，就像很多新技術(shù)一樣，CSS 經(jīng)歷了漫長的過程才被廣泛采納。其中的重要原

34、因在于瀏覽器，以及為這些瀏覽器建立站點的 Web 設(shè)計者們。CSS 批準(zhǔn)期間，Netscape Navigator (NN) 仍然是主導(dǎo)瀏覽器，而該瀏覽器基本上不支持 CSS。Microsoft 在其第 3 版瀏覽器中添加了對 CSS 非常有限的支持，但當(dāng)時大多數(shù)的 Web 設(shè)計者（本人在內(nèi)）仍然將 NN 作為首選平臺進行頁面編碼。 很多年來，每發(fā)行一個新版本，瀏覽器制作者們都擴展了對 CSS 的支持。今天，Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但這并不意味著我們作為 Web 設(shè)計者和開發(fā)者的生涯不存在問題。盡管上述所有瀏覽器都支持 CSS Level 2，它們的兼容程度仍然各不相同。而且在某些情況下，特定屬性仍然會帶給你很多麻煩。也就是說，您仍然需要遵守老的信條“測試再測試”。但如果您堅持使用 CSS 規(guī)范的核心屬性，您將能夠正確地呈現(xiàn)頁面。但是為什么 W3C 認(rèn)為需要創(chuàng)建 CSS 規(guī)范呢？當(dāng)我創(chuàng)建基于 HTML 的 Web 站點和應(yīng)用程序