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

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.4

課堂實戰(zhàn)8.5

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

CSS概述8.2

創(chuàng)建CSS樣式8.3

CSS規(guī)則定義8.