第八講 css技術

【教學內容】

CSS樣式的基礎知識，認識“CSS樣式”及管理樣式的面板，

建立CSS樣式的具體操作

8種CSS樣式的定義方法

管理CSS樣式（編輯、刪除、連結）等。

【教學目的】

瞭解CSS的基本概念

認識CSS樣式及樣式面板

熟練掌握Dreamweaver中CSS樣式建立、管理及應用的方法。

【教學重、難點】

重點：Dreamweaver中樣式的建立、編輯及應用的具體方法

難點：8中CSS樣式設定的方法，及各屬性的含義

【教學方式】

採取講授、討論和案例分析相結合的方式。

一、css技術應用網頁效果預覽

二、例項製作步驟：

1。設定字型的css樣式。

點選文字|css樣式|新建，或者在css樣式表面板中點選新建按鈕。

彈出對話方塊，選擇類輸入一個英文名稱，選擇“僅對該文件”點選確定按鈕。

彈出對話方塊

所有的css樣式的引數為：

2。設定超級連結的css樣式。

點選文字|css樣式|新建，或者在css樣式表面板中點選新建按鈕。彈出對話方塊如圖。選擇高階，僅對該文件。從選擇器的下拉列表中選擇a：hover。

點選確定按鈕後彈出對話方塊，進行如圖引數設定。

3。應用樣式，首先選中要應用樣式的文字，在屬性面板中點選樣式的下拉選單，彈出所有的樣式，從中選擇一個即可，也可以在css樣式表面板當中右擊要應用的樣式，選擇“套用”。

注意事項：

類需要在屬性面板當中選擇應用。而高階和標籤不需要應用，只要css樣式被匯入就會自動應用上去。

三、本例css樣式的html語法結構分析

。rh {font-size： 9pt；//字號為9磅color： #FFFFFF；//文字顏色text-decoration： none；//無修飾}

。zr {font-size： 9pt；color： #FF6600；text-decoration： none；}

。zr1 {font-size： 9pt；color： #000066；}

。z {font-size： 9pt；color： #006600；text-decoration： none；}

。rk {font-size： 9pt；color： #009900；//文字顏色text-decoration： none；background-color： #FFFFFF；//背景顏色為白色height： 16px；//方框高度為16象素border： 1px solid #006600；//邊框為實線，寬度為1象素，顏色程式碼}

。k {font-size： 9pt；color： #009900；text-decoration： none；border： 1px solid #666666；}

a：hover {font-size： 9pt；color： #FF6600；//超級連結的顏色text-decoration： none；

四、建立css樣式的html語法總結

CSS型別包括三種：類、標籤和高階。在Dreamweaver中可以輕鬆設定不同型別的CSS樣式。

1。類（可用於任何標籤）

可作為 class 屬性應用於文字範圍或文字塊的自定義樣式。注意類名稱必須以句點開頭，可以包含任何字母和數字組合。如果沒有輸入開頭的句點，Dreamweaver 將自動輸入句點。

2。標籤（重新定義特定標籤的外觀）

重定義特定 HTML 標籤的預設格式設定。當讀者選擇該選項時，可以在“標籤”項的下拉選單中選擇一個標籤或直接輸入一個標籤。

3。使用css選擇器，用於對超級連結的四種狀態進行設定。

A：active活動超級連結狀態，即擊下滑鼠時的狀態。

A：hover滑鼠指向超級連結時的狀態。

A：link預設的超級連結狀態，即沒有任何動作是的狀態。

A：visited被訪問過的超級連結狀態。

4。“定義在”有兩個單選項：

。新建樣式表文件，生成專門的。css檔案此樣式可應用於多個文件，即為外部連結式樣式。

。僅對該文件，只在當前文件中應用，即為嵌入式樣式。

5。連結一個外部樣式表的操作步驟如下：

（1）選擇“視窗”|“CSS樣式”命令，開啟CSS樣式面板。

（2）單擊該面板上的“附加樣式表”按鈕，或單擊該面板頂部右邊的三角按鈕，從彈出的選單中選擇“附加樣式表”命令，出現“連結外部樣式表”對話方塊。

（3）在該對話方塊中選擇新增為“連結”或“匯入”，並在“檔案/URL”文字框中輸入外部樣式表文件名，或單擊“瀏覽”按鈕選擇外部樣式表文件（外部樣式表文件必須以。css為副檔名），單擊“確定”按鈕。

【課後小結】

現在，對於一個高質量的網站來說，應用CSS樣式表是必不可少的。CSS樣式表的主要優點是便於對網頁整體風格進行控制，當更新一處的 CSS 規則時，使用該已定義樣式的所有文件的格式都會自動更新為新樣式，並且CSS還可以製作網頁特性。

【練習題】

模仿練習題：

把前邊的班級網頁利用 建立的css樣式同一風格。

要求：

（1）建立超級連結的css樣式；

（2）為所有圖片加上邊框；

（3）設定字號統一為9磅字，字型為宋體。

（4）建立外部樣式表，將外部樣式表匯入。