让版面更活泼.ppt

第 11 章 讓版面更活潑 的 CSS 本章提要 11-1 CSS 的優點和語法 11-2 如何定義 CSS 樣式 11-3 類別選擇器（Class Selector） 11-4 識別碼選擇器（ID Selector） 前言 目前的網頁設計趨勢逐步走向 『HTML+CSS』。 在開始學習 CSS Cascading Style Sheets, 串接樣式表）之前, 讓我們先建立基本概念。 簡而言之, CSS 是一種程式語言（Language）, 主要用來控制如何顯示網頁。 它的功能有一大部分與 HTML 重疊, 之所以如此, 乃是為了簡化 HTML 的工作, 將控制網頁外觀的部分交由 CSS 來做。 前言 HTML 將單純地只負責網頁的架構, 例如：哪裡擺圖、哪裡是大標題、哪裡是中標題、到哪裡算是一個段落等等。 W3C 組織於 1996 年制訂了 CSS 的標準, 由於是第一個版本, 所以稱為 CSS1（ CSSLevel 1）, 後來又於 1998 年 5 月公布 CSS2 (CSS Level 2) 標準。CSS1 只有 50 個屬性, 但CSS2 大幅增加到 120 個屬性。 前言 目前大多數的瀏覽器支援 CSS 1 的全部功能與 CSS 2 的部分功能。 讀者如果有興趣, 在 /Style/CSS/ 網站有許多關於 CSS 的資料可供參考。 11-1 CSS 的優點和語法 CSS 之所以廣受歡迎、快速走紅, 可不是因為大家趕時髦、喜新厭舊。 事實上, CSS的確引進了更多樣化、更具前瞻性的設計理念, 所以才能帶動風潮、成為大勢所趨。 11-1-1 CSS 的優點 優點 1－讓網頁的內容與格式脫鉤 優點 2－避免重複撰寫程式碼 優點 3－縮小網頁的體積, 簡化網頁的維護 優點 1－讓網頁的內容與格式脫鉤 內容包括文字、圖片、超連結等等各種供人觀賞、選取、下載的目標；格式則攸關網頁的外觀, 例如：文字顏色、字型、圖片是否加外框、背景圖片與背景顏色等等。 這兩者雖有相輔相成的關係, 但不應該互相 『綁住對方』, 使得一方若有更動, 另一方也必須隨之改變。 舉例來說, 一本書的內容與版面可以交由不同人員獨立作業：內容由寫作人員撰寫, 版面由美工人員設計。 優點 1－讓網頁的內容與格式脫鉤 修改內容時不應該更動到版面；同理, 更換版面時也沒理由影響內容。 然而早期的網頁設計人員, 經常採用一些特殊的技巧來呈現網頁外觀, 雖然表現出令人耳目一新的效果, 卻使得內容與格式的依賴性太高。 導致一旦要更新文字或圖片內容, 格式也必須隨之修改, 其結果是要耗費大量人力與時間在網頁的維護上。 優點 1－讓網頁的內容與格式脫鉤 近年來, W3C 極力鼓吹在撰寫 HTML 檔時, 只使用與內容結構相關的 HTML 標籤, 例如：p、h1…h6 等等, 不要使用與格式 (外觀) 相關的標籤, 例如：font、small、big 等等。 凡是涉及變更格式的工作, 一律改由 CSS 來做, 這也正是誕生 CSS 的主要目的。 我們瀏覽 http://www.codehelp.co.uk/html/deprecated.html 網頁, 便可以知道有哪些 HTML 標籤和屬性已經被 W3C 列為『建議勿用』（Deprecate）, 爾後應避免使用。 優點 2－避免重複撰寫程式碼 在 HTML 中, 假設要對所有的 h3 標籤設定『紅色文字』屬性, 就必須對每個 h3標籤都加上『color = red』。 若 h3標籤出現 10 次, 就必須重複 10 次！如今藉由 CSS 來做, 只需在網頁的開頭定義一次, 後續用到的 h3 標籤毋須再定義便能有相同的效果。 省略了重複輸入的工作, 等於也縮短了設計網頁的時間。 優點 2－避免重複撰寫程式碼 優點 3－縮小網頁的體積, 簡化網頁的維護 在大型商業網站裡, 可能有多達數百頁的網頁, 若在每一頁都加上相同的 CSS 定義, 不但浪費儲存空間, 將來逐頁修改時更是浪費時間。 而 CSS 的特色便是可以將定義寫在一個單獨的 CSS 檔, 網頁再利用匯入或連結等方式, 為 HTML 檔與 CSS 檔搭起聯繫的橋樑。 優點 3－縮小網頁的體積, 簡化網頁的維護 優點 3－縮小網頁的體積, 簡化網頁的維護 在實務上, 我們通常將共同的 CSS 定義彙整在一個 CSS 檔, 再使得用到這些定義的網頁都匯入或連結到該 CSS 檔。 這樣不但可減少每一頁網頁的長度, 將來要修改 CSS 定義時, 只須修改 CSS 檔的內容即可, 不必逐頁修改。 11-1-2 CSS 的語法 簡言之, CSS 程式碼由一條一條的規則（Rule）所組成, 這些規則如同程式語言的指令, 可以控制網頁要呈現什麼樣的外貌。 所以