|
CSS 樣式表簡介
上一頁
回首頁
下一頁
關於 CSS 樣式表
HTML 雖為網頁撰寫的主要標記語言，但早期的 HTML 功能薄弱，
無法滿足大眾對文字控制及版面編輯的需求。
W3C (world wide web consortium) 遂公佈「共用樣式表 (cascading style sheets, CSS)」，
以擴充 HTML 的功能。
CSS 樣式表的優點如下：
可以設定所有物件 (object) 的變化，包括文字、圖片、按鈕、視窗等 。
可以建立樣式指令，在不同的物件套用相同的樣式設定。
可以製作個人化的的樣式檔案，以統一更新網站內的各網頁變化。
CSS 樣式表的使用方式有三種：
網頁內嵌式 (embedded)：
在 HTML 文件的 <head> </head>
之間，以 <style> </style>
來定義共同樣式，使整個網頁使用同一樣式。
標記加註式 (in-line)：如果只有一個 HTML 標記需要設定樣式，
則可在該標記內，加上屬性 style=" "
，以個別修訂樣式。
外部設定式 (external)：由於一個網站有許多網頁，最好是統一樣式，
以免眼花繚亂，失去瀏覽的重點。但如果每一網頁均個別做樣式設定，
萬一將來要修改時，又怕會挂一漏萬，
因此可使每個網頁均連結到一個 .css 的純文字檔，以設定整個網站的樣式。
如果同一 HTML 文件內有兩個樣式定義，以最後的定義為準。
在瀏覽器方面，IE 5.0 版與 NetScape Communicator 均支援 CSS，
但部份瀏覽器不支援 CSS 樣式指令。
為免這些瀏覽器在無法辨識時，將 CSS 語法當成本文，則在
<style> </style> 之間可用
<!-- --> 將 CSS 語法隱藏起來。
在網頁編輯軟體方面，IE 的 FrontPage 2000 可撰寫 CSS，但 NetScape Composer 無法使用 CSS。
back to top
CSS 樣式表的基本語法
CSS 樣式表的基本語法是標記加註式 (in-line) 的表示法，亦即在 HTML 標記後面，加上 style="..."，
內含屬性名稱 (properties) 與屬性值 (value)，以定義樣式。
兩個屬性間，以分號區隔；而屬性與屬性值間，以冒號分開。
例如：原來標題文字之 HTML 標記為
<h2>標題文字</h2>
若想要標題文字變成綠色且改變字型為標楷體， 使用 CSS 的標記加註式語法如下：
<h2 style="font-family:'標楷體';color:#FF0000;size=48">
其中 font-famlily、color、size 分別是 CSS 的一項屬性，而標楷體、#FF0000、48 等，則是對應之屬性值。
back to top
樣式指令 Class 的用法
使用 class 樣式指令可以使同時套用一個樣式指令在不同地方，而不需要一再定義。
Class 的語法包含定義樣式指令及執行樣式指令兩部份：
定義樣式指令是在 <style> </style>
之間設定一個樣式指令，其語法是以句號開頭，
後接樣式名稱，再加上一個大括號 { }，內含屬性名稱與屬性值，
即可定義樣式指令。兩個屬性間，以分號區隔；
而屬性與屬性值間，以冒號分開。
執行樣式指令時，則在 HTML 標記內，加上
class=樣式名稱 即可執行樣式指令。
例如：原來標題文字之 HTML 標記為
<h2>標題文字</h2>
若想要標題文字變成綠色且改變字型為標楷體， 使用 class 的語法如下：
<head>
<style>
.heading {font-family:"標楷體";color:#0000FF}
</style>
</head>
<h2 class=heading>標題文字</h2>
其中 heading 為樣式名稱，font-famlily 與 color 分別是 CSS 的一項屬性，而標楷體與 #00FFFF 則是對應之屬性值。
一個<style> </style>只能用一個樣式設定；
如果同時有二個或二個以上的樣式要設定，則需分別使用不同的 <style> </style>
back to top
樣式指令 ID 的用法
和 class 指令一樣，使用 id 樣式指令可以使同一個網頁重複使用同一個樣式指令，而不需要一再定義。
與 class 樣式指令不同的是一個 HTML 文件只能有一個 id 樣式指令，
且 id 樣式指令是以 # 表示。
id 的語法的定義及執行方式與 class 指令相似，包含定義及執行兩部份：
定義 id 指令是在 <style> </style>
之間設定一個 id 樣式指令，其語法是以 # 開頭，後接樣式名稱，再加上一個大括號 { }，內含屬性名稱與屬性值，
即可定義樣式指令。兩個屬性間，以分號區隔；
而屬性與屬性值間，以冒號分開。
執行 id 指令時，則在 HTML 標記內，加上
id=樣式名稱 即可執行。
例如：原來標題文字之 HTML 標記為
<h2>標題文字</h2>
若想要標題文字變成綠色且改變字型為標楷體， 使用 id 指令的語法如下：
<head>
<style>
#text {font-family:"標楷體";color:#00FFFF;size:48}
</style>
</head>
<h2 id=text>標題文字</h2>
其中 text 為 id 樣式名稱，font-famlily、color、size 分別是 CSS 的屬性，
而標楷體、#00FFFF、48 等，則是對應之屬性值。
back to top
連結樣式表
如果一個網站的許多網頁均使用相同的樣式，則可指定一個樣式表檔案，
而不需要一再定義，且萬一要修改時，可一次解決，不會挂一漏萬。
連結樣式表的方法分為製定樣式表檔案及定樣式表檔案兩步驟：
製定樣式表檔案，只須將 <style></style>
之間的樣式內容儲存到一個檔案，並將其副檔名訂為 .css 即可。
執行連結樣式表時，則在 HTML 文件
<head> </head>
之間，加入 <link rel="stylesheet" href="css檔名"
type="text/css">， 即可執行樣式指令。
back to top
|