让版面更活泼.ppt

第11章 讓版面更活潑的CSS 本章提要 11 1CSS的優點和語法11 2如何定義CSS樣式11 3類別選擇器 ClassSelector 11 4識別碼選擇器 IDSelector 前言 目前的網頁設計趨勢逐步走向 HTML CSS 在開始學習CSSCascadingStyleSheets 串接樣式表 之前 讓我們先建立基本概念 簡而言之 CSS是一種程式語言 Language 主要用來控制如何顯示網頁 它的功能有一大部分與HTML重疊 之所以如此 乃是為了簡化HTML的工作 將控制網頁外觀的部分交由CSS來做 前言 HTML將單純地只負責網頁的架構 例如 哪裡擺圖 哪裡是大標題 哪裡是中標題 到哪裡算是一個段落等等 W3C組織於1996年制訂了CSS的標準 由於是第一個版本 所以稱為CSS1 CSSLevel1 後來又於1998年5月公布CSS2 CSSLevel2 標準 CSS1只有50個屬性 但CSS2大幅增加到120個屬性 前言 目前大多數的瀏覽器支援CSS1的全部功能與CSS2的部分功能 讀者如果有興趣 在http www w3 org Style CSS 網站有許多關於CSS的資料可供參考 11 1CSS的優點和語法 CSS之所以廣受歡迎 快速走紅 可不是因為大家趕時髦 喜新厭舊 事實上 CSS的確引進了更多樣化 更具前瞻性的設計理念 所以才能帶動風潮 成為大勢所趨 11 1 1CSS的優點 優點1 讓網頁的內容與格式脫鉤優點2 避免重複撰寫程式碼優點3 縮小網頁的體積 簡化網頁的維護 優點1 讓網頁的內容與格式脫鉤 內容包括文字 圖片 超連結等等各種供人觀賞 選取 下載的目標 格式則攸關網頁的外觀 例如 文字顏色 字型 圖片是否加外框 背景圖片與背景顏色等等 這兩者雖有相輔相成的關係 但不應該互相 綁住對方 使得一方若有更動 另一方也必須隨之改變 舉例來說 一本書的內容與版面可以交由不同人員獨立作業 內容由寫作人員撰寫 版面由美工人員設計 優點1 讓網頁的內容與格式脫鉤 修改內容時不應該更動到版面 同理 更換版面時也沒理由影響內容 然而早期的網頁設計人員 經常採用一些特殊的技巧來呈現網頁外觀 雖然表現出令人耳目一新的效果 卻使得內容與格式的依賴性太高 導致一旦要更新文字或圖片內容 格式也必須隨之修改 其結果是要耗費大量人力與時間在網頁的維護上 優點1 讓網頁的內容與格式脫鉤 近年來 W3C極力鼓吹在撰寫HTML檔時 只使用與內容結構相關的HTML標籤 例如 等等 不要使用與格式 外觀 相關的標籤 例如 等等 凡是涉及變更格式的工作 一律改由CSS來做 這也正是誕生CSS的主要目的 我們瀏覽http www codehelp co uk html deprecated html網頁 便可以知道有哪些HTML標籤和屬性已經被W3C列為 建議勿用 Deprecate 爾後應避免使用 優點2 避免重複撰寫程式碼 在HTML中 假設要對所有的標籤設定 紅色文字 屬性 就必須對每個標籤都加上 color red 若標籤出現10次 就必須重複10次 如今藉由CSS來做 只需在網頁的開頭定義一次 後續用到的標籤毋須再定義便能有相同的效果 省略了重複輸入的工作 等於也縮短了設計網頁的時間 優點2 避免重複撰寫程式碼 優點3 縮小網頁的體積 簡化網頁的維護 在大型商業網站裡 可能有多達數百頁的網頁 若在每一頁都加上相同的CSS定義 不但浪費儲存空間 將來逐頁修改時更是浪費時間 而CSS的特色便是可以將定義寫在一個單獨的CSS檔 網頁再利用匯入或連結等方式 為HTML檔與CSS檔搭起聯繫的橋樑 優點3 縮小網頁的體積 簡化網頁的維護 優點3 縮小網頁的體積 簡化網頁的維護 在實務上 我們通常將共同的CSS定義彙整在一個CSS檔 再使得用到這些定義的網頁都匯入或連結到該CSS檔 這樣不但可減少每一頁網頁的長度 將來要修改CSS定義時 只須修改CSS檔的內容即可 不必逐頁修改 11 1 2CSS的語法 簡言之 CSS程式碼由一條一條的規則 Rule 所組成 這些規則如同程式語言的指令 可以控制網頁要呈現什麼樣的外貌 所以CSS的基本功 就是要認清CSS規則的語法 選擇器與宣告 CSS規則由選擇器 Selector 和宣告 Declaration 兩個部分所組成 而宣告又區分為屬性 Property 和值 Value 如下圖 選擇器與宣告 選擇器與宣告 選擇器 Selector 用來選擇這條規則要套用的對象 依據對象的不同 可以區分為以下三類 標籤選擇器 TagSelector 又稱為TypeSelector 類別選擇器 ClassSelector 識別碼選擇器 IDSelector 標籤選擇器 TagSelector 又稱為TypeSelector 以HTML元素作為選擇對象 所以它的名稱必定是某一個HTML元素名稱 例如 p h1 div span等等 不可使用自訂的名稱 因為這種選擇器比較易學易懂 所以在後續的範例我們先以它來示範 類別選擇器 ClassSelector 這種選擇器的格式為 XXX 其中XXX為自訂的名稱 例如 warning s1 class a 等等 不過因為 可以省略 所以我們通常會看到 warning s1 class a 這類的名稱 使用了類別選擇器 代表以XXX類別為套用對象 說得再清楚一點 就是 對於隸屬於XXX類別的元素 套用此規則 識別碼選擇器 IDSelector 這種選擇器的格式為 XXX 其中XXX為自訂的名稱 例如 3dmark my style type 1 等等 同樣地 因為可省略 通常看到的是 3dmark my style type 1 之類的名稱 使用了id選擇器 代表以id XXX的元素為套用對象 換言之 就是 對於名稱為XXX的元素 套用此規則 選擇器與宣告 而宣告 Declaration 則是用來指定某個屬性 Property 的設定值 Value 如同在HTML中以 屬性 屬性值 來設定屬性 在CSS則是以 屬性 屬性值 來設定屬性 HTML用等號 CSS用冒號 千萬別搞混了 選擇器與宣告 接著我們以HTML的 h1 元素來示範 在HTML的定義中 套用標籤只會改變字型大小 如下圖 選擇器與宣告 現在 我們將以h1為選擇器 定義以下一條規則 h1是選擇器 color red是宣告 此規則的意思是 將標籤的文字顏色屬性設為紅色 選擇器與宣告 接著我們要將這條規則加入ex11 01 htm程式中 不過HTML並不認識CSS規則的格式 所以我們必須用標籤和標籤 將CSS規則包圍起來 形成如下的內容 選擇器與宣告 而且因為這三列並非要顯示的內容 所以不能放在段落 必須在段落 加入段落之後的程式碼如下 規則的合併 具有相同宣告的規則可以合併針對相同選擇器的規則可以合併 具有相同宣告的規則可以合併 假設我們現在針對h1 h2和h3都制訂一條規則如下 由於這3條規則都有相同的宣告 因此可以合併為以下一條規則 各個選擇器之間必須用逗號 隔開 針對相同選擇器的規則可以合併 假設要對h3設定兩種屬性 我們可以制訂以下兩條規則 由於 color green 和 text align left 兩個宣告都是針對同一個選擇器 所以可以合併如下 針對相同選擇器的規則可以合併 不過 當宣告的數量比較多時 為了易於閱讀 通常會分成多列 對齊顯示 例如 使用CSS時的注意事項 在輸入CSS程式碼的過程中 請注意以下事項 1 所有的宣告都必須包含在大括弧 之中 2 每一種宣告必須用分號 結束 雖然最後一個宣告可以例外 但是加上去才是好習慣 使用CSS時的注意事項 3 若要加上註解 必須用 和 圍住註解文字 這一段註解在大括弧內或外都可以 所以下列兩種寫法都可以 使用CSS時的注意事項 4 若屬性值包含空格 必須用英文雙引號 或英文單引號 包圍起來 例如 因為 CourierNew 中間包含一個空格 因此要用 圍住 11 1 3樣式表的多種來源 樣式表並不侷限於單一的來源 除了寫在網頁中之外 瀏覽器也有一套預設的樣式表 而瀏覽器操作者也可以設定使用自訂的樣式表 也就是說我們可自己設計一個專用的樣式表 讓瀏覽器依此樣式表的設定來顯示網頁 以IE為例 使用者要自訂樣式表時應執行 工具 網際網路選項 命令 在一般頁次按右下角的存取設定鈕 11 1 3樣式表的多種來源 11 1 3樣式表的多種來源 原則上 不同來源的樣式可以串接在一起 形成一個聯集 然而 不同來源的樣式表可能對同一個對象做不同的設定 導致發生衝突 例如 網頁作者設為紅色 使用者卻自訂為綠色 所以大家必須按照一定的規則來決定優先順序 在沒有特別設定的情形下 3種來源的優先順序為 11 2如何定義CSS樣式 以下4種方式都可以定義CSS樣式 1 用標籤定義樣式 2 在標籤使用style屬性 3 將樣式表定義在css檔案 以標籤連結該檔 4 將樣式表定義在css檔案 以 import指令匯入該檔 11 2 1使用標籤定義樣式 在head段落中使用標籤來定義樣式表 可說是最常見的方式 其格式如下 緊跟在style之後的type text css是告訴瀏覽器 從下一列開始 是用來定義CSS樣式 直到為止 雖然沒定義這個type屬性 在某些瀏覽器還是能正確解讀 但是寫出來更能確保相容性 11 2 1使用標籤定義樣式 11 2 1使用標籤定義樣式 11 2 1使用標籤定義樣式 在輸入時 要特別注意標籤必須在段落中 亦即在到之間 若是誤植到段落就無效了 11 2 2在標籤中使用style屬性 先前使用標籤來定義樣式的作法 影響的範圍是整個網頁 亦即整個HTML檔 換言之 假如用標籤改變p元素的屬性之後 後面凡是用到標籤的地方都受到影響 如果我們只想在這一次用到標籤時改變屬性 後續的標籤都不受影響時 就必須針對該標籤 使用style屬性來定義樣式 其語法如下 11 2 2在標籤中使用style屬性 以h2元素為例 其格式如下 這種定義方式 它的效力僅到標籤為止 下次使用標籤就沒有同樣效果了 但是因為將宣告都寫在角括弧之間 不但無法加入註解 閱讀起來也容易讓人覺得雜亂 所以當宣告的數量較多時 最好避免使用這種寫法 11 2 3用標籤連結到css檔 無論是使用標籤或style屬性 CSS的定義都是寫在網頁裡 因此稱為內部CSS InternalCSS 若將CSS的定義從網頁中抽離 另外存成一個css檔 這種方式便稱為外部CSS ExternalCSS 此時網頁必須利用標籤或 import指令來讀取css檔的內容 以下我們先學習標籤的使用 之後再學習如何用 import指令 11 2 3用標籤連結到css檔 css檔的內容其實就是一條條的規則 遵照先前提過的語法撰寫即可 但是不可加上標籤和標籤 例如 11 2 3用標籤連結到css檔 所有的宣告還是都得包括在 之間 而且都要以 結束 註解文字則必須用 和 圍起來 至於在網頁部分 必須在head段落以標籤呼叫CSS檔 其語法如下 11 2 3用標籤連結到css檔 rel StyleSheet告訴瀏覽器要連結的對象是一份樣式表 rel代表Relation 而type text css則更明確指出該樣式表是CSS樣式表 因為另有JSS樣式表 但罕見 而href的用法如同在HTML的標籤 以URL格式指到某一個檔案 11 2 3用標籤連結到css檔 假設external css的內容如下 11 2 3用標籤連結到css檔 當網頁要以標籤連結external css時 範例如下 11 2 3用標籤連結到css檔 明明改了樣式表的定義 為何網頁卻沒改變 在設計網頁的過程中 若我們採用外部樣式表的作法 可能會遇到一個問題 明明已經修改了樣式表的內容 為何在網頁卻還是顯示舊的內容 此問題的關鍵在於 快取 Cache 的使用 由於瀏覽器預設會將下載的所有網頁內容 包含html檔和圖形檔等等儲存在某一塊特定的記憶體中 一旦下次還要載入相同的檔案時 便優先從該記憶體中載入 省下透過網路傳輸的時間 明明改了樣式表的定義 為何網頁卻沒改變 這塊記憶體就是所謂的快取記憶體 通常簡稱為 快取 因此 雖然我們已經修改了外部css檔的內容 可是當瀏覽器發現快取中已經有該檔案 包含舊內容 時 便不再從硬碟讀取新的css檔 而直接使用快取中的舊css檔 明明改了樣式表的定義 為何網頁卻沒改變 要解決此問題有以下兩種方式 1 強迫瀏覽器不使用快取中的檔案 重新載入所有檔案 若是在IE 按 Ctrl F5 鍵可強迫重新載入所有檔案 若是在FireFox 則應按 Ctrl Shift R 鍵 明明改了樣式表的定義 為何網頁卻沒改變 2 關閉瀏覽器的快取功能 倘若必須經常修改css檔 而且覺得每次都得按 Ctrl F5 鍵之類的組合鍵太麻煩 不妨乾脆關閉瀏覽器的快取功能 若是在IE6 請執行工具 網際網路選項命令 明明改了樣式表的定義 為何網頁卻沒改變 明明改了樣式表的定義 為何網頁卻沒改變 明明改了樣式表的定義 為何網頁卻沒改變 若是在IE7 則是按右上方的工具鈕 執行網際網路選項命令 明明改了樣式表的定義 為何網頁卻沒改變 11 2 4用 import指令匯入css檔 在網頁中呼叫外部css檔的另一種方式是使用 import指令 其語法如下 或是css檔的內容同樣是遵照先前提過的語法即可 毋須加上和 但是網頁中的 import則必須在head段落的到之間 而且該列的結尾務必要加上分號 11 2 4用 import指令匯入css檔 假設external css的內容如下 11 2 4用 import指令匯入css檔 當網頁要以 import指令匯入external css時 範例如右 11 2 5與 import的差異 雖然與 import都是用來載入外部css檔 但是兩者有以下的差異 import的應用技巧 因為 import指令可以寫在css檔 因此具有 從這個css檔呼叫另一個css檔 的功能 等於是把兩個css檔結合起來 而這是標籤所無法做到的 在某些情形下 這種功能就可以派上用場 假設網站內包括A B兩類網頁 它們會用到的樣式如下圖 import的應用技巧 若是將上述三類的樣式寫在一個css檔 然後以 import載入 則對於A類網頁而言 載入B類樣式根本是浪費時間 同理 B類網頁也毋須載入A類樣式 因此 不如將它們分別存成三個css檔 import的應用技巧 然後在a css和b css中都加入 importurl common css 以載入common css的內容 import的應用技巧 接著只要在A類網頁加入 importurl a css 便能載入 A類樣式 與 共用樣式 而不會載入B類樣式 import的應用技巧 同理 在B類網頁加入 importurl b css 也就只會載入 B類樣式 和 共用樣式 註解符號大不同 在HTML和CSS的程式設計中 都應該在適當的地方加上註解 以利於往後的維護工作 但是在加上註解文字時 務必要分清楚兩者係採用不同的符號 在HTML 註解文字必須被包圍在之間 例如 註解符號大不同 在CSS 註解文字必須被包圍在 和 之間 例如 h2 color blue 將h2標籤的文字屬性設為藍色 11 2 6不同定義方式的優先順序 既然樣式表有4種定義方式 而且網頁可以同時使用多種定義方式 倘若對於同一個元素 不同定義方式的設定都不一樣時 CSS決定優先順序的原則如下 1 用style屬性來定義的方式 優先權最高 2 其它三種定義方式 則是以出現的順序來決定 原則上是 後出現的設定覆蓋先前的設定 換言之 愈晚出現的設定 優先權愈高 11 3類別選擇器 ClassSelector 所謂的 類別選擇器 ClassSelector 就是在定義時 選擇以某個類別 Class 為套用對象 使得隸屬於該類別的所有元素或特定元素 都可以套用此樣式 11 3 1類別內所有元素都能套用的樣式 以上的 代表所有的元素 通常省略不寫 我們直接來看一個例子 11 3 1類別內所有元素都能套用的樣式 以上的 代表所有的元素 通常省略不寫 我們直接來看一個例子 11 3 1類別內所有元素都能套用的樣