網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第8章 CSS網(wǎng)頁(yè)美化技術(shù)

第8章CSS網(wǎng)頁(yè)美化技術(shù)網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.1.1CSS的特點(diǎn)CSS是描述網(wǎng)頁(yè)元素格式的一組規(guī)則，一般具有以下5個(gè)特點(diǎn)：樣式定義豐富：CSS可以設(shè)置豐富的文檔樣式外觀。便于使用和修改：使用CSS時(shí)，可以完成修改一個(gè)小的樣式從而更新所有與其相關(guān)的頁(yè)面元素的操作，簡(jiǎn)化操作步驟，使CSS樣式的修改與使用更為便捷。重復(fù)使用：在Dreamweaver軟件中，可以創(chuàng)建單獨(dú)的CSS文件，在多個(gè)頁(yè)面中進(jìn)行使用，從而制作頁(yè)面風(fēng)格統(tǒng)一的網(wǎng)頁(yè)。層疊：通過(guò)CSS，可以對(duì)一個(gè)元素多次設(shè)置樣式，后面定義的樣式將重寫(xiě)前面的樣式設(shè)置，在瀏覽器中可以看到最后設(shè)置的樣式效果。精簡(jiǎn)HTML代碼：通過(guò)使用CSS，可以將樣式聲明單獨(dú)放到CSS樣式表中，減少文件大小，減少加載頁(yè)面和下載的時(shí)間。8.1.2

CSS的定義CSS格式設(shè)置規(guī)則由選擇器和聲明兩部分組成，選擇器是標(biāo)識(shí)已設(shè)置格式元素的術(shù)語(yǔ)，聲明大多數(shù)情況下為包含多個(gè)聲明的代碼塊，用于定義樣式屬性。聲明又包括屬性和值兩部分。1.CSS語(yǔ)法CSS基本語(yǔ)法如下：選擇器{屬性名:屬性值;}即selector{properties:value;}2.選擇器CSS中的選擇器分為標(biāo)簽選擇器、類選擇器、ID選擇器、偽類選擇器等，不同選擇器的作用也有所不同。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.2.1CSS設(shè)計(jì)器“CSS設(shè)計(jì)器”面板中可以創(chuàng)建CSS樣式及選擇器等內(nèi)容，執(zhí)行“窗口>CSS設(shè)計(jì)器”命令，打開(kāi)“CSS設(shè)計(jì)器”面板。8.2.2創(chuàng)建CSS樣式通過(guò)“CSS設(shè)計(jì)器”面板可以創(chuàng)建內(nèi)部或外部CSS樣式。1.創(chuàng)建新的CSS文件“創(chuàng)建新的CSS文件”選項(xiàng)可以創(chuàng)建新CSS文件并將其附加到文檔。2.附加現(xiàn)有的CSS文件用戶還可以為不同的網(wǎng)頁(yè)的HTML元素附加相同外部樣式，節(jié)省操作時(shí)間。3.在頁(yè)面中定義“在頁(yè)面中定義”命令可以將CSS文件定義在當(dāng)前文檔中。8.2.3CSS屬性CSS屬性可以調(diào)整網(wǎng)頁(yè)元素的格式和外觀，是CSS樣式的重要組成部分。在Dreamweaver軟件中，用戶可以選中選擇器后在“屬性”選項(xiàng)組設(shè)置CSS屬性。該選項(xiàng)組中包括布局、文本、邊框和背景4個(gè)屬性列表。8.2.4實(shí)操案例：?jiǎn)?lè)運(yùn)動(dòng)本案例將以啟樂(lè)運(yùn)動(dòng)網(wǎng)頁(yè)的制作為例，對(duì)CSS的樣式的創(chuàng)建及應(yīng)用進(jìn)行介紹。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.3.1類型在“CSS設(shè)計(jì)器”面板中選中選擇器中的CSS規(guī)則，在“屬性”面板中設(shè)置“目標(biāo)規(guī)則”為選中對(duì)象，單擊“編輯規(guī)則”按鈕，即可打開(kāi)“CSS規(guī)則定義”對(duì)話框。8.3.2背景“背景”選項(xiàng)卡中選項(xiàng)的功能主要是在網(wǎng)頁(yè)元素后面添加固定的背景顏色或圖像。8.3.3區(qū)塊“區(qū)塊”選項(xiàng)卡中選項(xiàng)功能主要是定義樣式的間距和對(duì)齊設(shè)置。8.3.4方框網(wǎng)頁(yè)中的所有元素包括文本、圖像等都被看作為包含在方框內(nèi)。8.3.5邊框“邊框”選項(xiàng)卡中的選項(xiàng)可用來(lái)設(shè)置網(wǎng)頁(yè)元素的邊框外觀。8.3.6列表“列表”選項(xiàng)卡中包括List-style-type、List-style-type、List-style-position等選項(xiàng)。8.3.7定位“定位”選項(xiàng)卡中的選項(xiàng)包括Position、Visibility、placement、clip等。8.3.8擴(kuò)展“擴(kuò)展”選項(xiàng)卡中的選項(xiàng)包括break-before、break-after、Cursor、Filter。8.3.9過(guò)渡使用“過(guò)渡”選項(xiàng)卡中的選項(xiàng)可將平滑屬性變化更改應(yīng)用于基于CSS的頁(yè)面元素，以響應(yīng)觸發(fā)器事件，如懸停、單擊和聚焦。8.3.10實(shí)操案例：微景綠植本案例將以微景綠植網(wǎng)頁(yè)樣式的設(shè)置為例，對(duì)“CSS規(guī)則定義”對(duì)話框的應(yīng)用進(jìn)行介紹。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實(shí)戰(zhàn)8.5

課后練習(xí)8.4課堂實(shí)戰(zhàn)躍野自行車本案例將以躍野自行車網(wǎng)頁(yè)的制作為例，介紹CSS樣式的應(yīng)用。目錄Contents8.1

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.