專業 HTML 網頁設計

P303 專業HTML網頁設計 HTML/DHTML/CSS/JavaScript 陳錦輝

第十三章　CSS樣式表 • 13.1 樣式表 • 13.2 樣式表標籤<STYLE>的基本格式 • 13.3 多重定義的樣式表 • 13.4 CSS樣式表的繼承 • 13.5 樣式表的來源種類以及優先順序 • 13.6 樣式標籤<span>與<div> • 13.7 各類CSS元素介紹與整合範例 • 13.8 方塊模型(Box Model) • 13.9 網頁DIY

13.1　樣式表 • 在製作網頁的同時，相信許多人都曾有不斷重複相同工作的經驗，例如設定文字顏色、字型大小等等。 • 對於維護大型網站來說，若只是使用HTML標籤，實在不是很方便，因為光是為了設定一個字型的變化就必須使用一長串的HTML標籤。

13.1　樣式表 • 樣式表(Style Sheet)是一堆網頁效果設定的集合，透過HTML的<style>標籤就可以引用這些事先定義好的設定值，享受相同設定重複使用的優點。 • W3C很早就開始規劃樣式表的標準，以彌補HTML的不足。W3C所規劃的HTML樣式表稱為CSS樣式表(Cascading Style Sheet)，於1996年通過CSS1的推薦標準，CSS2則於1998年通過推薦標準。目前正在審議當中的則是CSS3。

13.1　樣式表 • 在瀏覽器支援度方面，IE與Netscape支援大多數的CSS1標準，並且支援部分的CSS2。但在W3C的規劃中，一開始就不希望使用<font>之類的標籤來設定字型變化，而是希望透過CSS來設定字型變化，所以對於新一代的XHTML而言，W3C則是強烈建議使用CSS樣式表來控制各種網頁變化。

13.1　樣式表 圖13-1 使用CSS做出來的網頁

13.2　樣式表標籤<style>的基本格式 • 在HTML網頁要使用樣式表，主要是靠<style>標籤來完成。然後在<style>標籤中定義各標籤與效果的配對。標籤位於文件檔頭，即<head>與</head>之內。

13.2.1　<style>基本語法 • <style>標籤為成對標籤，它的功能為宣告樣式表。位於文件檔頭，即<head>與</head>之內。 • 格式： • 說明： • type屬性：除了CSS樣式表之外，還存在一種JSS樣式表(JSS為早期Netscape所發明)。為了區隔兩種樣式表，因此需要註明。 • 標籤n：定義各標籤的樣式。 • 樣式元素:元素值：以配對方式，宣告該標籤所採用的樣式元素以及效果(元素值)，每一組配對以分號『;』加以區隔。 <style type="text/css"> 標籤1{樣式元素:元素值;樣式元素:元素值;........;樣式元素:元素值標籤2{樣式元素:元素值;樣式元素:元素值;........;樣式元素:元素值} : 標籤n{樣式元素:元素值;樣式元素:元素值;........;樣式元素:元素值} </style>

13.2.1　<style>基本語法 • 範例13-1： • 內容執行結果 • 以下範例為定義多個HTML標籤的CSS樣式的宣告。 • 範例13-2： • 內容執行結果

13.2.2　相同樣式內容的定義 • 在CSS中，如果樣式宣告完全相同的話，還可以透過下列格式來簡化。 • 格式： <style type="text/css"> 標籤1,標籤2,標籤3{樣式元素:元素值;........;樣式元素:元素值} ：標籤n1,標籤n2,標籤n3{樣式元素:元素值;........;樣式元素:元素值} </style>

13.2.2　相同樣式內容的定義 • 說明： • 若樣式相同的標籤，可以直接由逗號『,』加以分隔，如此一來，樣式就可以共用了。例如：上述的標籤1、標籤2、標籤3的CSS樣式完全相同，就可以如上的宣告方式，我們來看一個實際的範例。 • 範例13-3： • 內容執行結果

13.2.3　多層標籤的樣式定義 • HTML的標籤呈現巢狀分布，因此某些時候會希望某一層的HTML標籤使用樣式A，而另一層的標籤使用樣式B。 • 這時候，只要將標籤的父標籤同時宣告在一起，中間以空白隔開，瀏覽器便會自動搜尋符合該階層結構的標籤來套用樣式表了。 • 範例13-4： • 內容執行結果

13.2.4　<style>標籤的註解格式 • 由於某些瀏覽器無法識別樣式表的宣告，因此，為了避免這些CSS樣式定義的文字被顯示出來，可以在樣式表外面加入HTML的註解符號。 • 如此一來，能夠解讀樣式表的瀏覽器會自動將註解符號去除，不能解讀樣式表的瀏覽器則會將樣式宣告當作是註解。 • 範例13-5： • 內容執行結果

13.3　多重定義的樣式表 • 在前面的範例中，只對於單一標籤定義單一的樣式表，如此做的好處似乎僅在於可以重新定義各個HTML標籤的顯示細節而已，並且如果每個標籤都只能定義單一的樣式表，網頁也仍舊只會呈現單調無變化的效果。 • CSS是為了補足HTML標籤的不足之處，其能力也就不只如此而已。

13.3　多重定義的樣式表 • 當對於同一個標籤定義多個樣式表時，可以使用多重定義樣式表的方法。 • 多重定義樣式表又分成兩種方法，分別是指定樣式名稱(使用id)以及指定樣式類別(使用class)。

13.3.1　指定樣式名稱法(使用id) • 使用id來指定樣式，就是將樣式以樣式名稱加以定義，所有的標籤都可以透過id屬性來指定要套用的樣式名稱，如此一來樣式就可以被重複使用了，並且標籤所對應的樣式也不會被固定住。 • 依照可被取用特性來加以區分，使用id指定樣式又可以分為兩種，一種是允許所有標籤指定的樣式宣告法，另一種則是只允許固定標籤指定的樣式宣告法。

13.3.1　指定樣式名稱法(使用id) • 使用id並允許所有標籤指定的樣式宣告法： • 格式： • 設定： • 範例13-6： • 內容執行結果 <style type="text/css"> #樣式名稱1{樣式元素:元素值;........;樣式元素:元素值} #樣式名稱2{樣式元素:元素值;........;樣式元素:元素值} : #樣式名稱n{樣式元素:元素值;........;樣式元素:元素值} </style> <標籤名稱 id="樣式名稱">…………………</標籤名稱>

13.3.1　指定樣式名稱法(使用id) • 使用id並只允許特定標籤指定的樣式宣告法： • 格式： • 設定： • 範例13-7： • 內容執行結果 <style type="text/css"> 特定標籤名稱1#樣式名稱1{樣式元素:元素值;........;樣式元素:元素值} ：特定標籤名稱n#樣式名稱n{樣式元素:元素值;........;樣式元素:元素值} </style> <特定標籤名稱 id="樣式名稱">…………………</特定標籤名稱>

13.3.2　指定樣式類別法(使用class) • 除了宣告樣式名稱之外，也可以宣告樣式類別，然後在HTML標籤中透過class屬性來指定要套用的樣式類別。 • 使用類別方式最主要的好處在於，可以在同一類別的樣式中定義子類別，以方便樣式類別的管理。 • 使用類別方式宣告樣式的種類同樣可以分為3種來加以討論，分別是不限制引用標籤的樣式類別宣告、限制引用標籤的樣式類別宣告以及多層類別的樣式宣告。

13.3.2　指定樣式類別法(使用class) • 不限制引用標籤的樣式類別宣告法： • 格式： • 設定： • 範例13-8： • 內容執行結果 <style type="text/css"> *.樣式類別1{樣式元素:元素值;........;樣式元素:元素值} *.樣式類別2{樣式元素:元素值;........;樣式元素:元素值} ： *.樣式類別n{樣式元素:元素值;........;樣式元素:元素值} </style> <標籤名稱 class="樣式類別">…………………</標籤名稱>

13.3.2　指定樣式類別法(使用class) • 限制引用標籤的樣式類別宣告： • 格式： • 設定： • 範例13-9： • 內容執行結果 <style type="text/css"> 特定標籤名稱1.樣式類別1{樣式元素:元素值;........;樣式元素:元素值} ：特定標籤名稱n.樣式類別n{樣式元素:元素值;........;樣式元素:元素值} </style> <特定標籤名稱 class="樣式類別">…………………</特定標籤名稱>

13.3.2　指定樣式類別法(使用class) • 多層類別的樣式宣告(不指定標籤)： • 格式( 2層) ： • 設定： • 範例13-10： • 內容執行結果 <style type="text/css"> *.樣式類別.子類別{樣式元素:元素值;........;樣式元素:元素值} ： *.樣式類別.子類別{樣式元素:元素值;........;樣式元素:元素值} </style> <特定標籤名稱 class="樣式類別或子類別">…………</特定標籤名稱>

13.4　CSS樣式表的繼承 • CSS樣式表的繼承出現在HTML的巢狀標籤內，當外層標籤指定了某一個CSS樣式表之後，內層的子標籤也同時繼承了這個樣式表的所有特性，除非子標籤另外指定了其他的CSS樣式表，並且改變相同CSS樣式元素的內容。 • 範例13-11： • 內容執行結果 • 範例13-12： • 內容執行結果

13.5　樣式表的來源種類以及優先順序 • 樣式表的來源除了可以在<head>、</head>之中使用定義<style>來宣告之外，還有其他3種方法，分別是插入樣式表、匯入外部樣式表以及連結外部樣式表。 • 當超過兩種以上的樣式表來源出現時，會依照其優先順序決定產生作用的樣式表。樣式表來源的優先順序如下： • 最高優先權： • 插入樣式表。(style屬性) • 普通優先權： • 定義樣式表(<style>標籤)、匯入樣式表(@import)、連結外部樣式表(<link>標籤)。3者優先權相同，同時出現時，以最後出現的樣式表為有效樣式表。

13.5.1　插入樣式表(style屬性) • 任何HTML標籤都可以插入樣式表，插入樣式表所使用的屬性是style屬性，並且擁有最高的優先權，但所插入的樣式表效果僅限於該標籤以及其子標籤而已。 • 範例13-13： • 內容執行結果

13.5.2　匯入外部樣式表(@import) • 當兩個網頁的樣式定義完全相同時，可以將樣式定義放到外部的CSS檔案，然後將外部的樣式表檔案插入HTML文件中，如此一來，樣式表就可以重複使用了。 • 使用外部樣式表有兩種方法，分別是匯入樣式表與連結樣式表。 • 格式：匯入外部樣式表 • 範例13-14： • HTML內容 • CSS內容 • 執行結果 <style type="text/css"> @import url("外部CSS檔案URL"); </style>

13.5.3　連結外部樣式表(<link>) • <link>標籤為獨立標籤，功能為連結外部樣式表，位於<head>、</head>之內。 • HTML格式： • XHTML格式： • 範例13-15： • HTML內容 • CSS內容 • 執行結果 <link type="text/css" rel="stylesheet" href="外部CSS檔案URL"> <link type="text/css" rel="stylesheet" href="外部CSS檔案URL"/>

13.5.4　普通等級的樣式表優先順序 • 既然匯入外部樣式表、連結外部樣式表的優先次序都是相同的，那麼當同時存在2種的樣式表來源時，瀏覽器會依照越後面找到的樣式表元素覆蓋越前面的樣式表元素。 • 範例13-16： • HTML內容 • CSS1內容 • CSS2內容 • 執行結果

13.5.5　強制不被覆蓋(!important屬性) • 既然前後順序會改變樣式表的效力，這對於樣式表的維護無疑是一大煩惱，尤其是當樣式表所包含的CSS樣式眾多時，此狀況更形明顯。 • 當每個CSS檔案都很複雜時，很難明確記得哪一個樣式表內包含哪些CSS樣式，所以CSS為了讓使用者可以明確指定一些重要的樣式宣告不會因為先後順序而被覆蓋，特別定義一個『!important』屬性。 • 範例13-17： • HTML內容CSS1內容CSS2內容 • 執行結果

13.6　樣式標籤<span>與<div> • 雖然每個HTML標籤都可以使用id、class、style來指定或插入樣式表，但是當指定樣式次數變得很多的時候，會造成整個HTML文件看起來很混亂。 • 為了避免這種狀況，可以在指定樣式的時候，使用一個特別的<span>或<div>標籤來指定樣式，如此便可以很快速地找到HTML文件中使用樣式的部分。 • 範例13-18： • 內容執行結果

13.7　各類CSS元素介紹與整合範例 • 由於CSS的元素眾多，實在無法單用一章就全部說明完畢，本節中將對於幾個比較常用到的CSS元素以範例方式來加以說明，完整的CSS元素表，尚請參閱『CSS2網頁結構建築師』一書。

13.7.1　CSS元素值的資料型態 • 由於CSS元素值也有眾多種類，因此在CSS2規格書中，將元素值以資料型態加以表示。以下是各種CSS元素值資料型態的列表。 CSS元素值的資料型態

13.7.2　文字特效之CSS元素 • 最常見的CSS特效應該就是文字特效了，文字特效的CSS元素名稱大多以font為開頭，各元素如下表。有關文字特效的CSS元素

13.7.2　文字特效之CSS元素 • 範例13-19： • 內容執行結果有關文字特效的CSS元素

13.7.3　排版特效之CSS元素 • 所謂排版，包含了對齊設定、間隔設定等等，以下是與排版有關的CSS元素列表。有關排版的CSS元素

13.7.3　排版特效之CSS元素 有關排版的CSS元素

13.7.3　排版特效之CSS元素 • 範例13-20： • 內容執行結果有關排版的CSS元素

13.7.4　清單特效之CSS元素 • 所謂排版，包含了對齊設定、間隔設定等等，以下是與排版有關的CSS元素列表。有關清單的CSS元素

13.7.4　清單特效之CSS元素 有關清單的CSS元素

13.7.4　清單特效之CSS元素 • 範例13-21： • 內容執行結果有關清單的CSS元素

13.7.5　背景特效之CSS元素 • CSS提供了許多關於背景設定的特效，這些特效包含有背景圖片是否隨捲軸移動、背景圖片位置、背景圖片顯示方式、背景顏色等等，而CSS的網頁背景特效並不限定於網頁的背景設定，包含表格也可以設定表格的背景設定。以下是與背景有關的CSS元素列表。

13.7.5　背景特效之CSS元素

13.7.5　背景特效之CSS元素 • 範例13-22： • 內容執行結果

13.8　方塊模型(Box Model) • 方塊模型(BOX Model)是CSS樣式表的重要設計。方塊模型主要是用來控制文字或圖片在瀏覽器中的位置，藉此來取代用表格對齊的排版方式。 • 方塊模型所使用的參數很多，首先必須了解一個方塊模型各參數的意義，下圖是取材自W3C的一張CSS方塊模型示意圖。

13.8　方塊模型(Box Model) 方塊模型

13.8　方塊模型(Box Model) • 在上圖中，一共可看到4條線：Content Edge、Padding Edge、Border Edge、Margin Edge。以下是該4條線的涵義。 • Content Edge： • 其內包含主要的文字或圖片。邊框為上下左右4個Content Edge，這些邊框在顯示的時候並不會出現，只是用來方便了解區域的邊界所在。 • Padding Edge： • 內容到外邊框的邊界稱為padding，其實padding就是內容到外框線之間的空白部分，如果當作是空白線，就稱為Padding Edge，所以Padding Edge越粗時，代表空白部分越大，也代表內容與外框線距離越遠。

13.8　方塊模型(Box Model) • Border Edge： • 外邊框稱為border，當外邊框很粗的時候就好像該處形成了一個區域。本區域的顏色為外邊框的顏色。 • Margin Edge： • 代表整個方塊的範圍，通常該線條(最外層的線條)並不會顯示。

13.8.1　方塊模型解說 • 您所看到的4個區域，嚴格說來，應該是3個區域加上一個非常粗的線條(border)，其中非常粗的線條常導致誤認為也是一個區域。方塊模型(貼近實作)

13.8.1　方塊模型解說 • 方塊模型的作用是用來決定網頁各元件的位置。因此針對每一個使用方塊模型的元件必須先規劃號一個大的平面空間，並且該空間屬於該元件專有。因此一個網頁就是由許許多多的方塊組成，如下圖。在下圖中的各個方塊是可以重疊的，也可以不完全填滿整個網頁。網頁中的方塊(不重疊時)

專業 HTML 網頁設計