dw教程--五、使用css美化頁(yè)面

《dw教程--五、使用css美化頁(yè)面》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。

1、第五節(jié)?使用CSS美化頁(yè)面層疊樣式表(CSS)是一系列格式設(shè)置規(guī)則，它們控制Web頁(yè)面內(nèi)容的外觀。使用CSS設(shè)置頁(yè)面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開(kāi)的。頁(yè)面內(nèi)容（HTML代碼）位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)則位于另一個(gè)文件（外部樣式表）或HTML文檔的另一部分（通常為部分）中。使用CSS可以非常靈活并更好地控制頁(yè)面的外觀，從精確的布局定位到特定的字體和樣式等。術(shù)語(yǔ)“層疊”是指對(duì)同一個(gè)元素或Web頁(yè)面應(yīng)用多個(gè)樣式的能力。例如，可以創(chuàng)建一個(gè)CSS規(guī)則來(lái)應(yīng)用顏色，創(chuàng)建另一個(gè)規(guī)則來(lái)應(yīng)用邊距，然后將兩者應(yīng)用于一個(gè)頁(yè)面中的同一文本。所定義的樣式

2、“層疊”到您的Web頁(yè)面上的元素，并最終創(chuàng)建您想要的設(shè)計(jì)。CSS樣式表的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁(yè)文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。在Dreamweaver8中CSS樣式的設(shè)置方式有了很大的改進(jìn)，更為方便、實(shí)用、快捷。???一、創(chuàng)建CSS樣式???1、選中菜單“窗口”>“CSS樣式”。打開(kāi)CSS樣式面板。2、單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕，打開(kāi)“新建CSS規(guī)則”對(duì)話框。在“選擇器類(lèi)型”選項(xiàng)中，可以選擇創(chuàng)建CSS樣式的方法包括以下三種：???類(lèi)：我們可以在文檔窗口的任何區(qū)域或文本中應(yīng)用類(lèi)樣式，如果將類(lèi)樣式應(yīng)用于一整段文字，那么會(huì)在相應(yīng)的標(biāo)簽

3、中出現(xiàn)CLASS屬性，該屬性值即為類(lèi)樣式的名稱。???標(biāo)簽（重新定義特定標(biāo)簽的外觀）：重新定義HTML標(biāo)記的的默認(rèn)格式。我們可以針對(duì)某一個(gè)標(biāo)簽來(lái)定義層疊樣式表，也就是說(shuō)定義的層疊樣式表將只應(yīng)用于選擇的標(biāo)簽。例如，我們?yōu)?body>和標(biāo)簽定義了層疊樣式表，那么所有包含在和標(biāo)簽的內(nèi)容將遵循定義的層疊樣式表。???高級(jí)（ID、偽類(lèi)選擇器等）：為特定的組合標(biāo)簽定義層疊樣式表，使用ID作為屬性，以保證文檔具有唯一可用的值。高級(jí)樣式是一種特殊類(lèi)型的樣式，常用的有4種：???a:link?設(shè)定正常狀態(tài)下鏈接文字的樣式。???a:active?

4、?設(shè)定鼠標(biāo)單擊時(shí)鏈接的外觀。???a:visited?設(shè)定訪問(wèn)過(guò)的鏈接的外觀。???a:hover??設(shè)定鼠標(biāo)放置在鏈接文字之上時(shí)，文字的外觀。???3、為新建CSS樣式輸入或選擇名稱、標(biāo)記或選擇器，其中：???對(duì)于自定義樣式，其名稱必須以點(diǎn)（.）開(kāi)始，如果沒(méi)有輸入該點(diǎn)，則DW回自動(dòng)添加上。自定義樣式名可以是字母與數(shù)字的組合，但.之后必須是字母。???對(duì)于重新定義HTML標(biāo)記，可以在“標(biāo)簽”下拉列表中輸入或選擇重新定義的標(biāo)記。???對(duì)于CSS選擇器樣式，可以在“選擇器”下拉列表中輸入或選擇需要的選擇器。???4、在“定義在”區(qū)域選擇定義的樣式位置，可以是“新建樣式表文

5、件”或“僅對(duì)該文檔”。單擊“確定”按鈕，如果選擇了“新建樣式表文件”選項(xiàng)，回彈出“保存樣式表文件為”對(duì)話框，給樣式表命名，保存后，回彈出“CSS規(guī)則定義”對(duì)話框。如果選擇了“僅對(duì)該文檔”，則單擊“確定”后，直接彈出“CSS規(guī)則定義”，在其中設(shè)置CSS樣式。5、“CSS規(guī)則定義”對(duì)話框中設(shè)置CSS規(guī)則定義。主要分為類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展8項(xiàng)。每個(gè)選項(xiàng)都可以對(duì)所選標(biāo)簽做不同方面的定義，可以根據(jù)需要設(shè)定。定義完畢后，單擊“確定”按鈕，完成創(chuàng)建CSS樣式。???二、使用CSS樣式美化頁(yè)面???在“CSS規(guī)則對(duì)話框”中，我們可以通過(guò)類(lèi)型、背景、區(qū)塊、方框

6、、邊框、列表、定位和擴(kuò)展項(xiàng)的設(shè)置，來(lái)美化我們的頁(yè)面，當(dāng)然啦，我們?cè)诙x某個(gè)CSS樣式的時(shí)候，不需要對(duì)每一個(gè)項(xiàng)都進(jìn)行設(shè)置，需要什么效果，選擇相應(yīng)的項(xiàng)進(jìn)行設(shè)置就可以了。???1、文本樣式的設(shè)置???新建CSS樣式,“選擇器類(lèi)型”為類(lèi)，名稱為“style1”定義在“僅對(duì)該文檔”。保存至站點(diǎn)根目錄下的CSS文件夾內(nèi)，彈出“CSS規(guī)則定義”對(duì)話框，默認(rèn)顯示的就是對(duì)文本進(jìn)行設(shè)置的“類(lèi)型”項(xiàng)。???字體：可以在下拉菜單種選擇相應(yīng)的字體。???大?。捍笮【褪亲痔?hào)，可以直接填入數(shù)字，然后選擇單位。???樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。???行高：這項(xiàng)設(shè)置在網(wǎng)頁(yè)制作種很常用

7、。設(shè)置行高，可以選擇“正?！?，讓計(jì)算機(jī)自動(dòng)調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號(hào)數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，如果要?jiǎng)?chuàng)建一倍行距，則行高應(yīng)該為24pt。???變量：在英文種，大寫(xiě)字母的字號(hào)一般比較大，采用“變量”中的“小型大寫(xiě)字母”設(shè)置，可以縮小大寫(xiě)字母。顏色：設(shè)置文字的色彩。???2、背景樣式的設(shè)置???在HTML中，背景只能使用單一的色彩或利用圖像水平垂直方向的平鋪。使用CSS之后，有了更加靈活的設(shè)置。???在CSS規(guī)則定義”對(duì)話框左側(cè)選擇“背景”項(xiàng)，可以在右邊區(qū)域設(shè)