資源描述：
《網(wǎng)頁(yè)制作-層疊樣式》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。
1、6.1層疊樣式表概述6.2層疊樣式表的創(chuàng)建與編輯6.2.1創(chuàng)建CSS樣式和CSS樣式表6.2.2外部樣式表鏈接、導(dǎo)入和編輯6.3CSS樣式表的應(yīng)用6.3.1簡(jiǎn)單舉例6.3.2濾鏡的概述6.3.3透明度濾鏡的應(yīng)用6.3.4模糊濾鏡的應(yīng)用第6章層疊樣式6.1層疊樣式表概述樣式是預(yù)先定義好的、格式化文檔的工具。在前面已經(jīng)介紹過(guò)HTML，用HTML可一次完成多種格式化操作任務(wù)。但是，HTML樣式的不足之處是，在控制網(wǎng)頁(yè)的外觀上受到較多的限制。本節(jié)中介紹的層疊樣式表（CascadingStyleSheets,以下簡(jiǎn)稱CSS樣式表）是由W3C（WordWideWebConsorti
2、um）組織批準(zhǔn)的一種網(wǎng)頁(yè)元素定義規(guī)則，是一種可以對(duì)網(wǎng)頁(yè)文檔內(nèi)容進(jìn)行精確格式化控制的工具。利用CSS樣式表可自動(dòng)格式化網(wǎng)頁(yè)文檔，可將CSS樣式表直接存儲(chǔ)在網(wǎng)頁(yè)文檔中，也可以將CSS樣式表定義在網(wǎng)頁(yè)文檔之外，然后將它鏈接到多個(gè)文檔中。當(dāng)CSS樣式表被修改后，使用CSS樣式表的網(wǎng)頁(yè)文檔格式也都將自動(dòng)更新。CSS樣式表與HTML樣式相比，它的優(yōu)勢(shì)在于能夠同時(shí)控制多個(gè)文檔的格式。另外，CSS樣式表能夠控制大多數(shù)常用的文本格式屬性，如字體、尺寸、對(duì)齊方式等，還可以控制位置、特殊效果、鼠標(biāo)翻轉(zhuǎn)等很多HTML樣式不能控制的屬性。6.2層疊樣式表的創(chuàng)建與編輯在Dreamweaver8中，
3、單擊網(wǎng)頁(yè)編輯窗口中狀態(tài)欄右下角的按鈕，或選擇【窗口】
4、【CSS樣式】命令，還可以單擊【設(shè)計(jì)】浮動(dòng)面板組的【CSS樣式】選項(xiàng)卡，便可打開(kāi)【CSS樣式】面板。切換到所有文檔模式/當(dāng)前選擇模式類別視圖、列表視圖、設(shè)置屬性視圖附加樣式表、新建CSS規(guī)則、編輯樣式、刪除樣式類別視圖列表視圖設(shè)置屬性視圖樣式表文件名CSS規(guī)則列表屬性和屬性值列表工具按鈕欄6.2.1創(chuàng)建CSS新建一個(gè)CSS樣式，該樣式的存放方式有3種：1.如果僅作用于當(dāng)前網(wǎng)頁(yè)文檔的CSS樣式，則與網(wǎng)頁(yè)文件一起保存。2.存放在某個(gè)已建好的外部CSS樣式表文件中。應(yīng)先附加該樣式表文件，然后將新建的CSS樣式存放其中。
5、3.存放在一個(gè)新建的CSS樣式表文件中。應(yīng)先新建該樣式表文件，然后將新建的CSS樣式存放其中。在【CSS樣式】面板中，設(shè)計(jì)者可以創(chuàng)建CSS樣式來(lái)格式化HTML文檔，在一個(gè)CSS樣式表文件中可以包含一個(gè)或多個(gè)CSS樣式。設(shè)置選擇器類型設(shè)置CSS規(guī)則定義在文檔內(nèi)還是定義在外部CSS文件中設(shè)置CSS規(guī)則名稱1.類選擇符2.用CSS重新定義HTML標(biāo)簽3.標(biāo)識(shí)選擇符或者偽類CSS選擇符有類選擇符和標(biāo)識(shí)選擇符兩種。類選擇符以英文句點(diǎn)（.）開(kāi)頭，而標(biāo)識(shí)選擇符以英文井號(hào)（#）開(kāi)頭。1.類選擇符_創(chuàng)建類選擇符步驟如下：（1）【窗口】
6、【CSS樣式】命令，打開(kāi)【CSS樣式】面板。（2）
7、單擊【CSS樣式】面板右上角的快捷菜單按鈕，在彈出的快捷菜單中,選擇【新建CSS樣式】命令，或單擊浮動(dòng)面板右下方的【新建樣式】按鈕，打開(kāi)【新建CSS樣式】對(duì)話框。（3）在【選擇器類型】中：◆選中【類（可應(yīng)用于任何標(biāo)簽）】單選按鈕后，可在【名稱】下拉列表框中輸入樣式的名稱，該名稱必須以“.”開(kāi)始，確認(rèn)后便可以創(chuàng)建一個(gè)應(yīng)用于文本范圍和選擇區(qū)域的Class屬性的樣式；（4）在【定義在】選項(xiàng)組的下拉列表框中，選擇當(dāng)前要?jiǎng)?chuàng)建的樣式定義在哪個(gè)樣式表中?？梢允嵌x在新的樣式表文件中，也可以是將CSS樣式定義在某個(gè)已經(jīng)創(chuàng)建好的樣式表文件中。若要?jiǎng)?chuàng)建僅僅作用于當(dāng)前文檔的新樣式，可選中【
8、僅對(duì)該文檔】單選按鈕。1．在“屬性”面板應(yīng)用樣式2．利用【標(biāo)簽選擇器】選擇樣式套用樣式表的方法主要有:3．利用CSS面板套用樣式4．使用右鍵快捷菜單創(chuàng)建CSS樣式時(shí)，在“新建CSS規(guī)則”對(duì)話框中，將“選擇器類型”設(shè)置為“標(biāo)簽（重新定義特定標(biāo)簽的外觀）”，可以實(shí)現(xiàn)用CSS重新定義HTML標(biāo)簽的外觀的功能。2.用CSS重新定義HTML標(biāo)簽——以p標(biāo)簽為例，用CSS重新定義HTML標(biāo)簽的外觀。1．修改HTML標(biāo)簽
2．設(shè)置p標(biāo)簽的屬性√CSS選擇符有類選擇符和標(biāo)識(shí)選擇符兩種。類選擇符以英文句點(diǎn)（.）開(kāi)頭，類選擇符用在不止一個(gè)的元素上，標(biāo)識(shí)選擇符以英文井號(hào)（#）開(kāi)頭
9、，標(biāo)識(shí)選擇符又可以稱為ID選擇符，這種選擇符樣式只能用在一個(gè)元素上。ID屬性是HTML標(biāo)簽的一個(gè)重要屬性，一個(gè)網(wǎng)頁(yè)中的標(biāo)簽的ID屬性值不能重復(fù)，因此在利用ID屬性應(yīng)用標(biāo)識(shí)選擇符CSS樣式時(shí)，只能應(yīng)用于一個(gè)標(biāo)簽。如果應(yīng)用于多個(gè)標(biāo)簽，就會(huì)造成標(biāo)簽的ID屬性沖突。簡(jiǎn)單的理解——那些只會(huì)在頁(yè)面中出現(xiàn)一次的元素應(yīng)該用id來(lái)表示。比如頁(yè)頭（header），頁(yè)尾（footer），導(dǎo)航菜單（main-menu）等。3.標(biāo)識(shí)選擇符或者偽類標(biāo)識(shí)選擇符，即ID—————標(biāo)識(shí)選擇符或者偽類_偽類例：——網(wǎng)頁(yè)中的文本上建立超級(jí)鏈接后，文字就會(huì)變成藍(lán)色，同時(shí)還出現(xiàn)下
