08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表 8-4 選擇器的類型
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
8-2 CSS 樣式規則與選擇器 CSS 樣式表是由一條一條的樣式規則 (style rule) 所組成,而樣式規則包 含選擇器 (selector) 與宣告 (declaration) 兩個部分: 例如: 回首頁 P.8-4
下面是一個例子。 P.8-5
8-3 連結HTML 文件與CSS 樣式表 8-3-1 在 <head> 元素裡面嵌入樣式表 下面是一個例子。 回首頁 P.8-7
8-3-2 使用HTML 元素的style 屬性指定樣式表 前一節的例子可以改寫成如下。 P.8-8
8-3-3 將外部的樣式表匯入HTML 文件 下面是一個例子,它將 <\Ch08\linkcss1.html> 所定義的樣式表另外儲 存在純文字檔 <body.css>。 <\Ch08\body.css> <\Ch08\linkcss3.html> P.8-8~9
8-3-4 將外部的樣式表連結至HTML 文件 我們可以將樣式表連結至HTML 文件,下面是一個例子。 P.8-9
8-4 選擇器的類型 8-4-1 類型選擇器 例如: 8-4-2 後裔選擇器 8-4-3 萬用選擇器 回首頁 P.8-10
8-4-4 類別選擇器 使用類別選擇器定義樣式規則的語法如下: P.8-11~12
8-4-5 ID 選擇器 使用ID 選擇器定義樣式規則的語法如下: P.8-13~14
8-4-6 屬性選擇器 下面是一個例子。 P.8-16
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
下面是一個例子。 P.8-18