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

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

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

3、Cascading Style Sheet-PositionCSS的功能在幾乎所有的瀏覽器上都可使用以前通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在通過(guò)CSS可以實(shí)現(xiàn)使網(wǎng)頁(yè)字體變得更漂亮，更容易編排可以輕松控制網(wǎng)頁(yè)布局可以將許多網(wǎng)頁(yè)風(fēng)格同時(shí)更新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 獨(dú)立獨(dú)立class Selector.classnameproperty:value.center text-align: center This paragraph will also be center-aligned. (3)ID Selector:#red color:red; #green color:green;這個(gè)段落是紅色。 這個(gè)段落是綠色。(1)嵌入式樣式表（2）行內(nèi)樣式表(3)外部樣式表P.doubleline-Height:2P.centertext-align:centerp.greentex

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

6、可以重新定義包含特定id屬屬性的標(biāo)簽的格式設(shè)置。性的標(biāo)簽的格式設(shè)置。單擊菜單欄中單擊菜單欄中“窗口窗口”|“CSS樣式樣式”命令或用組合命令或用組合鍵鍵Shift+F11鍵打開(kāi)鍵打開(kāi)CSS樣式面板，如圖所示。樣式面板，如圖所示?！叭咳俊蹦Ｊ侥Ｊ?“正在正在”模式模式CSS樣式面板有“全部”和“正在”兩種模式?！叭俊蹦Ｊ剑猴@示兩個(gè)窗格：“所有規(guī)則”窗格（上部）和“屬性”窗格（下部）?！罢凇蹦Ｊ剑猴@示三個(gè)窗格：顯示文檔中當(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單擊菜單欄中單擊菜單欄中“文件文件”|“新建新建”命令，打開(kāi)新建文命令，打開(kāi)新建文檔對(duì)話(huà)框。檔對(duì)話(huà)框。2在對(duì)話(huà)框左側(cè)在對(duì)話(huà)框左側(cè)“類(lèi)別類(lèi)別”中選擇中選擇“CSS樣式表樣式表”類(lèi)別，類(lèi)別，在中間在中間“CSS樣式表樣式表”欄選擇需要的樣式，右側(cè)是樣式表預(yù)欄選擇需要的樣式，右側(cè)是樣式表預(yù)覽圖。覽圖。3點(diǎn)擊點(diǎn)擊“創(chuàng)建創(chuàng)建”按鈕，

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29、保存網(wǎng)頁(yè)。2在在CSS樣式面板中，單擊樣式面板中，單擊 按鈕，打開(kāi)按鈕，打開(kāi)“新建新建CSS規(guī)規(guī)則則”對(duì)話(huà)框。如圖所示。對(duì)話(huà)框。如圖所示。 3名稱(chēng)中輸入名稱(chēng)中輸入“.blur”，“選擇器類(lèi)型選擇器類(lèi)型”選擇選擇“類(lèi)類(lèi)”，“定義在定義在”選擇選擇“僅對(duì)該文檔僅對(duì)該文檔”。4設(shè)置完成后，單擊設(shè)置完成后，單擊“確定確定”按鈕，打開(kāi)按鈕，打開(kāi)“.blur的的CSS規(guī)則定義規(guī)則定義”對(duì)話(huà)框，切換到對(duì)話(huà)框，切換到“擴(kuò)展擴(kuò)展”分類(lèi)。分類(lèi)。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樣式，在彈出的快捷菜單中樣式，在彈出的快捷菜單中選擇選擇“套用套用”命令。命令。在屬性檢查器的在屬性檢查器的“類(lèi)類(lèi)”的下拉列表中選擇的下拉列表中選擇“blur”。8保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，效果如圖所示。保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，效果如圖所示。（二）陰影效果濾鏡（二）陰影效果濾鏡（shadow）1新建一個(gè)網(wǎng)頁(yè)并在網(wǎng)頁(yè)中插入表格輸入文本，如圖新建一個(gè)網(wǎng)頁(yè)并在網(wǎng)

31、頁(yè)中插入表格輸入文本，如圖所示，保存文檔。所示，保存文檔。 2在在CSS樣式面樣式面板中，單擊板中，單擊 按鈕，打按鈕，打開(kāi)開(kāi)“新建新建CSS規(guī)則規(guī)則”對(duì)對(duì)話(huà)框。如圖所示。話(huà)框。如圖所示。 3名稱(chēng)中輸入名稱(chēng)中輸入“.shadow”，“選擇器類(lèi)型選擇器類(lèi)型”選擇選擇“類(lèi)類(lèi)”，“定義在定義在”選擇選擇“僅對(duì)該文檔僅對(duì)該文檔”。4設(shè)置完成后，單擊設(shè)置完成后，單擊“確定確定”按鈕，打開(kāi)按鈕，打開(kāi)“.shadow的的CSS規(guī)則定義規(guī)則定義”對(duì)話(huà)框，切換到對(duì)話(huà)框，切換到“擴(kuò)展擴(kuò)展”類(lèi)別，如圖所示。類(lèi)別，如圖所示。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樣式，在彈出的快捷菜單中選擇樣式，在彈出的快捷菜單中選擇“套用套用”命令。命令。在屬性檢查器的在屬性檢查器的“類(lèi)類(lèi)”的下拉列表中選擇的下拉列表中選擇“shadow”。8保存并在瀏覽器中預(yù)保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，效果如圖所示。覽網(wǎng)頁(yè)，效果如圖所示。 回顧 CSS 的優(yōu)點(diǎn)之前，我要先介紹一下它的歷史。We

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

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