第8章CSS網頁美化技術網頁設計與制作案例實戰教程目錄Contents8.1

CSS概述8.2

創建CSS樣式8.3

CSS規則定義8.4

課堂實戰8.5

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

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

CSS概述8.2

創建CSS樣式8.3

CSS規則定義8.4

課堂實戰8.5

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

CSS概述8.2

創建CSS樣式8.3

CSS規則定義8.4

課堂實戰8.5

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

CSS概述8.2

創建CSS樣式8.3

CSS規則定義8.4

課堂實戰8.5

課后練習8.4課堂實戰躍野自行車本案例將以躍野自行車網頁的制作為例，介紹CSS樣式的應用。目錄Contents8.1

CSS概述8.2

創建CSS樣式8.3

CSS規則定義8.