Download presentation
Presentation is loading. Please wait.
2
08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表
8-4 選擇器的類型
3
8-1 CSS 的演進 CSS Level 1 (CSS 1) CSS Level 2 (CSS 2)
CSS Level 2 Revision 1 (CSS 2.1) CSS Level 3 (CSS 3) CSS Level 4 (CSS 4) 回首頁 P.8-2~3
4
8-2 CSS 樣式規則與選擇器 CSS 樣式表是由一條一條的樣式規則 (style rule) 所組成，而樣式規則包 含選擇器 (selector) 與宣告 (declaration) 兩個部分： 例如： 回首頁 P.8-4
5
下面是一個例子。 P.8-5
6
8-3 連結HTML 文件與CSS 樣式表 8-3-1 在 <head> 元素裡面嵌入樣式表 下面是一個例子。 回首頁
P.8-7
7
8-3-2 使用HTML 元素的style 屬性指定樣式表
前一節的例子可以改寫成如下。 P.8-8
8
8-3-3 將外部的樣式表匯入HTML 文件 下面是一個例子，它將 <\Ch08\linkcss1.html> 所定義的樣式表另外儲 存在純文字檔 <body.css>。 <\Ch08\body.css> <\Ch08\linkcss3.html> P.8-8~9
9
8-3-4 將外部的樣式表連結至HTML 文件 我們可以將樣式表連結至HTML 文件，下面是一個例子。 P.8-9
10
8-4 選擇器的類型 8-4-1 類型選擇器 例如： 8-4-2 後裔選擇器 8-4-3 萬用選擇器 回首頁 P.8-10
11
8-4-4 類別選擇器 使用類別選擇器定義樣式規則的語法如下： P.8-11~12
12
8-4-5 ID 選擇器 使用ID 選擇器定義樣式規則的語法如下： P.8-13~14
13
8-4-6 屬性選擇器 下面是一個例子。 P.8-16
14
8-4-7 虛擬類別選擇器(:link、 :visited、 :hover、 :focus、:active、:enabled、 :disabled...)
CSS 提供了數個虛擬類別選擇器，如下所示： 連結虛擬類別 (link pseudo-classes)：包括 :link 和 :visited。 使用者動作虛擬類別 (user action pseudo-classes)：包 括 :hover、:focus 和 :active。 語言虛擬類別 (language pseudo-class)：包括 :lang。 目標虛擬類別 (target pseudo-class) ：包括 :target。 UI 元素狀態虛擬類別 (UI element states pseudo-classes) ：包 括 :enabled、:disabled、:checked、:indeterminate。 結構化虛擬類別 (structural pseudo-classes) ：包括 :root、:nth- child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first- child、:last-child、:first-of-type、:last-of-type、:only-child、:only- of-type、:empty。 否定虛擬類別 (negation pseudo-class) ：包括 :not()。 P.8-17
15
下面是一個例子。 P.8-18
Similar presentations
