Download presentation
Presentation is loading. Please wait.
1
第 11 章 讓版面更活潑 的 CSS
2
本章提要 11-1 CSS 的優點和語法 11-2 如何定義 CSS 樣式 11-3 類別選擇器（Class Selector）
11-4 識別碼選擇器（ID Selector）
3
前言 目前的網頁設計趨勢逐步走向 『HTML+CSS』。
在開始學習 CSS Cascading Style Sheets, 串接樣式表）之前, 讓我們先建立基本概念。 簡而言之, CSS 是一種程式語言（Language）, 主要用來控制如何顯示網頁。 它的功能有一大部分與 HTML 重疊, 之所以如此, 乃是為了簡化 HTML 的工作, 將控制網頁外觀的部分交由 CSS 來做。
4
前言 HTML 將單純地只負責網頁的架構, 例如：哪裡擺圖、哪裡是大標題、哪裡是中標題、到哪裡算是一個段落等等。
W3C 組織於 1996 年制訂了 CSS 的標準, 由於是第一個版本, 所以稱為 CSS1（ CSSLevel 1）, 後來又於 1998 年 5 月公布 CSS2 (CSS Level 2) 標準。CSS1 只有 50 個屬性, 但CSS2 大幅增加到 120 個屬性。
5
前言 目前大多數的瀏覽器支援 CSS 1 的全部功能與 CSS 2 的部分功能。
6
11-1 CSS 的優點和語法 CSS 之所以廣受歡迎、快速走紅, 可不是因為大家趕時髦、喜新厭舊。
7
CSS 的優點 優點 1－讓網頁的內容與格式脫鉤 優點 2－避免重複撰寫程式碼 優點 3－縮小網頁的體積, 簡化網頁的維護
8
優點 1－讓網頁的內容與格式脫鉤 內容包括文字、圖片、超連結等等各種供人觀賞、選取、下載的目標；格式則攸關網頁的外觀, 例如：文字顏色、字型、圖片是否加外框、背景圖片與背景顏色等等。 這兩者雖有相輔相成的關係, 但不應該互相 『綁住對方』, 使得一方若有更動, 另一方也必須隨之改變。 舉例來說, 一本書的內容與版面可以交由不同人員獨立作業：內容由寫作人員撰寫, 版面由美工人員設計。
9
優點 1－讓網頁的內容與格式脫鉤 修改內容時不應該更動到版面；同理, 更換版面時也沒理由影響內容。
然而早期的網頁設計人員, 經常採用一些特殊的技巧來呈現網頁外觀, 雖然表現出令人耳目一新的效果, 卻使得內容與格式的依賴性太高。 導致一旦要更新文字或圖片內容, 格式也必須隨之修改, 其結果是要耗費大量人力與時間在網頁的維護上。
10
優點 1－讓網頁的內容與格式脫鉤 近年來, W3C 極力鼓吹在撰寫 HTML 檔時, 只使用與內容結構相關的 HTML 標籤, 例如：<p>、<h1>…<h6> 等等, 不要使用與格式 (外觀) 相關的標籤, 例如：<font>、<small>、<big> 等等。 凡是涉及變更格式的工作, 一律改由 CSS 來做, 這也正是誕生 CSS 的主要目的。 我們瀏覽 deprecated.html 網頁, 便可以知道有哪些 HTML 標籤和屬性已經被 W3C 列為『建議勿用』（Deprecate）, 爾後應避免使用。
11
優點 2－避免重複撰寫程式碼 在 HTML 中, 假設要對所有的 <h3> 標籤設定『紅色文字』屬性, 就必須對每個 <h3>標籤都加上『color = red』。 若 <h3>標籤出現 10 次, 就必須重複 10 次！如今藉由 CSS 來做, 只需在網頁的開頭定義一次, 後續用到的 <h3> 標籤毋須再定義便能有相同的效果。 省略了重複輸入的工作, 等於也縮短了設計網頁的時間。
12
優點 2－避免重複撰寫程式碼
13
優點 3－縮小網頁的體積, 簡化網頁的維護 在大型商業網站裡, 可能有多達數百頁的網頁, 若在每一頁都加上相同的 CSS 定義, 不但浪費儲存空間, 將來逐頁修改時更是浪費時間。 而 CSS 的特色便是可以將定義寫在一個單獨的 CSS 檔, 網頁再利用匯入或連結等方式, 為 HTML 檔與 CSS 檔搭起聯繫的橋樑。
14
優點 3－縮小網頁的體積, 簡化網頁的維護
15
優點 3－縮小網頁的體積, 簡化網頁的維護 在實務上, 我們通常將共同的 CSS 定義彙整在一個 CSS 檔, 再使得用到這些定義的網頁都匯入或連結到該 CSS 檔。 這樣不但可減少每一頁網頁的長度, 將來要修改 CSS 定義時, 只須修改 CSS 檔的內容即可, 不必逐頁修改。
16
CSS 的語法 簡言之, CSS 程式碼由一條一條的規則（Rule）所組成, 這些規則如同程式語言的指令, 可以控制網頁要呈現什麼樣的外貌。 所以 CSS 的基本功, 就是要認清 CSS 規則的語法。
17
選擇器與宣告 CSS 規則由選擇器（Selector）和宣告（Declaration）兩個部分所組成, 而宣告又區分為屬性（Property）和值（Value）, 如下圖：
18
選擇器與宣告
19
選擇器與宣告 選擇器（Selector）用來選擇這條規則要套用的對象, 依據對象的不同, 可以區分為以下三類：
標籤選擇器（Tag Selector, 又稱為 Type Selector） 類別選擇器（Class Selector） 識別碼選擇器(ID Selector）
20
標籤選擇器（Tag Selector, 又稱為 Type Selector）
以 HTML 元素作為選擇對象, 所以它的名稱必定是某一個 HTML 元素名稱, 例如：p、h1、div、span 等等, 不可使用自訂的名稱。 因為這種選擇器比較易學易懂, 所以在後續的範例我們先以它來示範。
21
類別選擇器（Class Selector）
這種選擇器的格式為 『*.XXX』, 其中 XXX 為自訂的名稱, 例如：『*.warning』、『*.s1』、『*.class_a』 等等。不過因為『*』可以省略, 所以我們通常會看到『.warning』、『.s1』、『.class_a』 這類的名稱。 使用了類別選擇器, 代表以 XXX 類別為套用對象。說得再清楚一點, 就是『對於隸屬於 XXX 類別的元素, 套用此規則』。
22
識別碼選擇器（ID Selector） 這種選擇器的格式為 『*#XXX』 , 其中 XXX 為自訂的名稱, 例如：『*#3dmark』、『*#my_style』、『*#type_1』 等等。同樣地, 因為可省略『*』, 通常看到的是『#3dmark』、『#my_style』、『#type_1』 之類的名稱。 使用了 id 選擇器, 代表以 id=XXX 的元素為套用對象, 換言之, 就是『對於名稱為 XXX的元素, 套用此規則』。
23
選擇器與宣告 而宣告（Declaration）則是用來指定某個屬性（Property）的設定值（Value）。
如同在 HTML 中以『屬性＝屬性值』來設定屬性, 在 CSS 則是以『屬性：屬性值』來設定屬性。HTML 用等號；CSS 用冒號, 千萬別搞混了！
24
選擇器與宣告 接著我們以 HTML 的『h1』元素來示範, 在 HTML 的定義中, 套用 <h1> 標籤只會改變字型大小, 如下圖：
25
選擇器與宣告 現在, 我們將以 h1 為選擇器, 定義以下一條規則：
h1 是選擇器, color:red 是宣告, 此規則的意思是： 『將 <h1> 標籤的文字顏色屬性設為紅色』。
26
選擇器與宣告 接著我們要將這條規則加入 ex11-01.htm 程式中, 不過 HTML 並不認識 CSS 規則的格式, 所以我們必須用 <style> 標籤和 </style> 標籤, 將 CSS 規則包圍起來, 形成如下的內容：
27
選擇器與宣告 而且因為這三列並非要顯示的內容, 所以不能放在 <body> 段落, 必須在 <head> 段落。加入 <head> 段落之後的程式碼如下：
28
規則的合併 具有相同宣告的規則可以合併 針對相同選擇器的規則可以合併
29
具有相同宣告的規則可以合併 假設我們現在針對 h1、h2 和 h3 都制訂一條規則如下：
由於這 3 條規則都有相同的宣告, 因此可以合併為以下一條規則： 各個選擇器之間必須用逗號『,』隔開。
30
針對相同選擇器的規則可以合併 假設要對 h3 設定兩種屬性, 我們可以制訂以下兩條規則：
由於 『color:green』 和 『text-align:left』 兩個宣告都是針對同一個選擇器, 所以可以合併如下：
31
針對相同選擇器的規則可以合併 不過, 當宣告的數量比較多時, 為了易於閱讀, 通常會分成多列、對齊顯示, 例如：
32
使用 CSS 時的注意事項 在輸入 CSS 程式碼的過程中, 請注意以下事項： 1.所有的宣告都必須包含在大括弧 {} 之中。
2.每一種宣告必須用分號『；』結束－雖然最後一個宣告可以例外, 但是加上去才是好習慣。
33
使用 CSS 時的注意事項 3.若要加上註解, 必須用 /* 和 */ 圍住註解文字, 這一段註解在大括弧內或外都可以, 所以下列兩種寫法都可以：
34
使用 CSS 時的注意事項 4.若屬性值包含空格, 必須用英文雙引號『“』或英文單引號『‘』包圍起來, 例如：
因為 『Courier New』中間包含一個空格, 因此要用" "圍住。
35
樣式表的多種來源 樣式表並不侷限於單一的來源, 除了寫在網頁中之外, 瀏覽器也有一套預設的樣式表；而瀏覽器操作者也可以設定使用自訂的樣式表。 也就是說我們可自己設計一個專用的樣式表, 讓瀏覽器依此樣式表的設定來顯示網頁。 以 IE 為例, 使用者要自訂樣式表時應執行『工具/網際網路選項』命令, 在一般頁次按右下角的存取設定鈕：
36
樣式表的多種來源
37
樣式表的多種來源 原則上, 不同來源的樣式可以串接在一起, 形成一個聯集。然而, 不同來源的樣式表可能對同一個對象做不同的設定, 導致發生衝突, 例如：網頁作者設為紅色, 使用者卻自訂為綠色。 所以大家必須按照一定的規則來決定優先順序。在沒有特別設定的情形下, 3 種來源的優先順序為：
38
11-2 如何定義 CSS 樣式 以下 4 種方式都可以定義 CSS 樣式： 1. 用 <style> 標籤定義樣式。
3. 將樣式表定義在 css 檔案, 以 <link> 標籤連結該檔。 4. 將樣式表定義在 css 檔案, 指令匯入該檔。
39
11-2-1 使用 <style> 標籤定義樣式
在 head 段落中使用 <style> 標籤來定義樣式表, 可說是最常見的方式, 其格式如下： 緊跟在 style 之後的 type=text/css 是告訴瀏覽器：「從下一列開始, 是用來定義 CSS樣式, 直到 </style> 為止」。雖然沒定義這個 type 屬性, 在某些瀏覽器還是能正確解讀, 但是寫出來更能確保相容性。
40
11-2-1 使用 <style> 標籤定義樣式
41
11-2-1 使用 <style> 標籤定義樣式
42
11-2-1 使用 <style> 標籤定義樣式
在輸入時, 要特別注意 <style> 標籤必須在 <head> 段落中（亦即在 <head> 到</head> 之間）, 若是誤植到 <body> 段落就無效了。
43
在標籤中使用 style 屬性 先前使用 <style> 標籤來定義樣式的作法, 影響的範圍是整個網頁（亦即整個 HTML檔）。 換言之, 假如用 <style> 標籤改變 p 元素的屬性之後, 後面凡是用到 <p> 標籤的地方都受到影響。如果我們只想在這一次用到 <p> 標籤時改變屬性, 後續的 <p> 標籤都不受影響時, 就必須針對該標籤, 使用 style 屬性來定義樣式, 其語法如下：
44
11-2-2 在標籤中使用 style 屬性 以 h2 元素為例, 其格式如下：
這種定義方式, 它的效力僅到 </h2> 標籤為止, 下次使用 <h2> 標籤就沒有同樣效果了。但是因為將宣告都寫在角括弧 < > 之間, 不但無法加入註解, 閱讀起來也容易讓人覺得雜亂, 所以當宣告的數量較多時, 最好避免使用這種寫法。
45
11-2-3 用 <link> 標籤連結到 css 檔
無論是使用 <style> 標籤或 style 屬性, CSS 的定義都是寫在網頁裡, 因此稱為內部 CSS （Internal CSS）。 若將 CSS 的定義從網頁中抽離, 另外存成一個 css 檔, 這種方式便稱為外部 CSS（External CSS）。 此時網頁必須利用 <link> 指令來讀取 css 檔的內容, 以下我們先學習 <link> 標籤的使用, 指令。
46
11-2-3 用 <link> 標籤連結到 css 檔
css 檔的內容其實就是一條條的規則, 遵照先前提過的語法撰寫即可, 但是不可加上 <style> 標籤和 </style> 標籤, 例如：
47
11-2-3 用 <link> 標籤連結到 css 檔
所有的宣告還是都得包括在 {} 之間, 而且都要以 ； 結束。註解文字則必須用 /* 和 */ 圍起來。 至於在網頁部分, 必須在 head 段落以 <link> 標籤呼叫 CSS 檔, 其語法如下：
48
11-2-3 用 <link> 標籤連結到 css 檔
rel=StyleSheet 告訴瀏覽器要連結的對象是一份樣式表(rel 代表 Relation), 而 type=text/css 則更明確指出該樣式表是 CSS 樣式表（因為另有 JSS 樣式表, 但罕見）。 而 href 的用法如同在 HTML 的 <a> 標籤, 以 URL 格式指到某一個檔案。
49
11-2-3 用 <link> 標籤連結到 css 檔
假設 external.css 的內容如下：
50
11-2-3 用 <link> 標籤連結到 css 檔
當網頁要以 <link> 標籤連結 external.css 時, 範例如下：
51
11-2-3 用 <link> 標籤連結到 css 檔
52
明明改了樣式表的定義, 為何網頁卻沒改變？ 在設計網頁的過程中, 若我們採用外部樣式表的作法, 可能會遇到一個問題：明明已經修改了樣式表的內容, 為何在網頁卻還是顯示舊的內容？ 此問題的關鍵在於『快取』（Cache）的使用。 由於瀏覽器預設會將下載的所有網頁內容, 包含html 檔和圖形檔等等儲存在某一塊特定的記憶體中, 一旦下次還要載入相同的檔案時, 便優先從該記憶體中載入, 省下透過網路傳輸的時間。
53
明明改了樣式表的定義, 為何網頁卻沒改變？ 這塊記憶體就是所謂的快取記憶體, 通常簡稱為『快取』。
因此, 雖然我們已經修改了外部 css 檔的內容, 可是當瀏覽器發現快取中已經有該檔案（包含舊內容）時, 便不再從硬碟讀取新的 css 檔, 而直接使用快取中的舊css 檔。
54
明明改了樣式表的定義, 為何網頁卻沒改變？ 要解決此問題有以下兩種方式： 1.強迫瀏覽器不使用快取中的檔案, 重新載入所有檔案。
若是在 IE, 按 [Ctrl] + [F5] 鍵可強迫重新載入所有檔案；若是在 FireFox, 則應按 [Ctrl] + [Shift] + [R] 鍵。
55
明明改了樣式表的定義, 為何網頁卻沒改變？ 2.關閉瀏覽器的快取功能。
倘若必須經常修改 css 檔, 而且覺得每次都得按 [Ctrl] + [F5] 鍵之類的組合鍵太麻煩,不妨乾脆關閉瀏覽器的快取功能。 若是在 IE6, 請執行工具/ 網際網路選項命令：
56
明明改了樣式表的定義, 為何網頁卻沒改變？
57
明明改了樣式表的定義, 為何網頁卻沒改變？
58
明明改了樣式表的定義, 為何網頁卻沒改變？ 若是在 IE7, 則是按右上方的工具鈕, 執行網際網路選項命令：
59
明明改了樣式表的定義, 為何網頁卻沒改變？
60
11-2-4 用 @import 指令匯入 css 檔 在網頁中呼叫外部 css 檔的另一種方式是使用 @import 指令, 其語法如下：
或是 css 檔的內容同樣是遵照先前提過的語法即可, 毋須加上 <style> 和 則必須在 head 段落的 <style> 到 </style> 之間, 而且該列的結尾務必要加上分號。
61
指令匯入 css 檔 假設 external.css 的內容如下：
62
指令匯入 css 檔 指令匯入 external. css 時, 範例如右：
63
11-2-5 <l ink> 與 @import 的差異
雖然 <link> 都是用來載入外部 css 檔, 但是兩者有以下的差異：
64
@import 的應用技巧 指令可以寫在 css 檔, 因此具有『從這個 css 檔呼叫另一個 css 檔』的功能, 等於是把兩個 css 檔結合起來－而這是 <link> 標籤所無法做到的。在某些情形下, 這種功能就可以派上用場。 假設網站內包括 A、B 兩類網頁, 它們會用到的樣式如下圖：
65
@import 的應用技巧 若是將上述三類的樣式寫在一個 css 檔, 載入, 則對於 A 類網頁而言, 載入 B 類樣式根本是浪費時間；同理, B 類網頁也毋須載入 A 類樣式。因此, 不如將它們分別存成三個 css 檔：
66
@import 的應用技巧 然後在 a.css 和 b.css url(common.css)』, 以載入 common.css 的內容：
67
@import 的應用技巧 接著只要在 A url(a.css)』, 便能載入『A 類樣式』與『共用樣式』, 而不會載入 B 類樣式：
68
@import 的應用技巧 同理, 在 B 類網頁加入 url(b.css)』, 也就只會載入『B 類樣式』和『共用樣式』。
69
註解符號大不同！ 在 HTML 和 CSS 的程式設計中, 都應該在適當的地方加上註解, 以利於往後的維護工作。但是在加上註解文字時, 務必要分清楚兩者係採用不同的符號： 在 HTML, 註解文字必須被包圍在 <!-- 和 --> 之間, 例如： <body background=beach.jpg> <!--以 beach.jpg 作為網頁背景圖案-->
70
註解符號大不同！ 在 CSS, 註解文字必須被包圍在 /* 和 */ 之間, 例如：
<style> h2 {color:blue;} /* 將 h2 標籤的文字屬性設為藍色 */ </style>
71
不同定義方式的優先順序 既然樣式表有 4 種定義方式, 而且網頁可以同時使用多種定義方式, 倘若對於同一個元素, 不同定義方式的設定都不一樣時, CSS 決定優先順序的原則如下： 1.用 style 屬性來定義的方式, 優先權最高。 2.其它三種定義方式, 則是以出現的順序來決定, 原則上是『後出現的設定覆蓋先前的設定』。換言之, 愈晚出現的設定, 優先權愈高。
72
11-3 類別選擇器（Class Selector）
所謂的『類別選擇器』（Class Selector）, 就是在定義時, 選擇以某個類別(Class)為套用對象, 使得隸屬於該類別的所有元素或特定元素, 都可以套用此樣式。
73
類別內所有元素都能套用的 樣式 以上的『*』代表所有的元素, 通常省略不寫。我們直接來看一個例子：
74
類別內所有元素都能套用的 樣式 以上的『*』代表所有的元素, 通常省略不寫。我們直接來看一個例子：
75
類別內所有元素都能套用的 樣式 上面這條規則選擇了 red_text 類別的所有元素為套用對象, 至於哪些元素隸屬於 red_text 類別呢？就必須以『class』屬性來指定, 其語法為：
76
類別內所有元素都能套用的 樣式 舉例而言：
77
類別內所有元素都能套用的 樣式
78
類別內所有元素都能套用的 樣式
79
在類別中特定標籤才能套用的樣式 如果我們只允許類別內的某個元素套用規則, 就在定義時將 『*』 更換為該元素名稱： 例如：
80
在類別中特定標籤才能套用的樣式
81
11-3-2 在類別中特定標籤才能套用的樣式 若允許 red_text 類別內的 h1、h2 和 h3 等元素都能套用, 則寫為：
各元素名稱之間以逗號『,』分開, 而最後一個元素名稱以點號『.』與類別名稱區隔。
82
11-4 識別碼選擇器（ID Selector） 所謂的『識別碼選擇器』, 就是在定義時, 選定某個識別碼（ID,Identifier）作為套用對象。 它與類別選擇器的最大差異, 在於此 ID 應該只對應到一個元素, 不像類別中可以包含許多個素。 使用識別碼選擇器時的語法如下：
83
11-4 識別碼選擇器（ID Selector） 識別碼代表的元素, 必須在網頁以『id=識別碼』來指定： 舉例而言：
84
11-4 識別碼選擇器（ID Selector）
85
11-4 識別碼選擇器（ID Selector） 由於 ID 在整個網頁中必須唯一, 為了避免在定義之後被別的元素誤用, 搞得該用的元素反而不能用, 我們可以在定義時就指定只給某個元素使用：
86
11-4 識別碼選擇器（ID Selector） 也就是在井字符號『＃』之前加上元素名稱即可。
87
11-4 識別碼選擇器（ID Selector）
88
11-4 識別碼選擇器（ID Selector）
89
11-4 識別碼選擇器（ID Selector）
Similar presentations
