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

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

3、Cascading Style Sheet-PositionCSS的功能在幾乎所有的瀏覽器上都可使用以前通過圖片轉換實現的功能，現在通過CSS可以實現使網頁字體變得更漂亮，更容易編排可以輕松控制網頁布局可以將許多網頁風格同時更新CSS定義selectorproperty:value;property:valueCSS定義selectorproperty:value;property:valueSelector分為三種形式：（1）HTML Selector:等等（2）class Selector：a 相關相關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）行內樣式表(3)外部樣式表P.doubleline-Height:2P.centertext-align:centerp.greentex

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

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

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

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

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

10、菜單中選擇擇“附加樣式表附加樣式表”命令。命令。3打開打開“鏈接外部樣式表鏈接外部樣式表”對話框，如圖所示。對話框，如圖所示。 4點擊點擊“瀏覽瀏覽”按扭，選擇要添加的樣式文件。添加按扭，選擇要添加的樣式文件。添加的形式有兩種：的形式有兩種：“鏈接鏈接”：網頁與樣式表文件的關系是鏈接關系，而：網頁與樣式表文件的關系是鏈接關系，而且不將樣式表的信息導入網頁中。且不將樣式表的信息導入網頁中?！皩雽搿保簩⑼獠繕邮奖砦募男畔氲疆斍熬W頁：將外部樣式表文件的信息導入到當前網頁文檔中。文檔中。5單擊單擊“確定確定”按鈕。這樣外部的按鈕。這樣外部的CSS樣式就會鏈接樣式就會鏈接或導入到當前文檔中。或

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

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

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

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

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

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

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

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

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

20、方塊、數字、羅馬數字等。點、方塊、數字、羅馬數字等。2項目符號圖像：可以為項目符號指定圖像。項目符號圖像：可以為項目符號指定圖像。3位置：設置列表項文本是否換行和縮進以及文本是位置：設置列表項文本是否換行和縮進以及文本是否換行到左邊距。有二個選項：否換行到左邊距。有二個選項：“內內”：當列表項超出范圍后會自動換行，將顯示在：當列表項超出范圍后會自動換行，將顯示在旁邊的空白上，不進行任何縮進。旁邊的空白上，不進行任何縮進?！巴馔狻保寒斄斜眄棾龇秶髸詣訐Q行，以縮進方：當列表項超出范圍后會自動換行，以縮進方式顯示。式顯示。在在“CSS規則定義規則定義”對話框中選擇對話框中選擇“定位定位”類別，

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

22、樣式所控制的對象之前或者之后強分頁：打印時在樣式所控制的對象之前或者之后強行分頁。行分頁。2光標：在下拉列表中，選擇光標顯示屬性設置。當光標：在下拉列表中，選擇光標顯示屬性設置。當指針位于樣式所控制的對象上時光標指針圖像會發生改變。指針位于樣式所控制的對象上時光標指針圖像會發生改變。光標屬性的相關說明見表。光標屬性的相關說明見表。屬性說明屬性說明Auto自動改變樣式Crosshair精確定位+Default默認指針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濾鏡：又稱過濾器，可以為網頁中的元素添加濾鏡：又稱過濾器，可以為網頁中的元素添加各種效果。主要濾鏡及說明見表各種效果。主要濾鏡及說明見表濾鏡說明濾鏡說明Alpha 透明的漸進效果Gray彩色圖片變灰度圖BlendTrans淡入淡出效果Invert底片效果Blur風吹模糊的效果Light模擬光源效果Chroma指定顏色透明Mask矩形遮罩效果DropShadow陰影效果RevealTrans動態效果FlipH水平翻轉Shadow輪廓陰影效果FlipV垂直翻轉Wave波浪扭曲變形效果

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

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

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

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

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

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

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

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

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

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

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