CSS 樣式表簡介

上一頁        回首頁        下一頁

基本認識
  • 關於 CSS 樣式表
  • CSS 樣式表的基本語法
  • 樣式指令 Class 的用法
  • 樣式指令 ID 的用法
  • 連結樣式表
  • CSS 語法
  • 文字的特效
  • 表格的特效
  • 版面的特效
  • 進階的 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


    本網頁於 02/10/2003 製作,並於 10/02/2003更新 © 2003 版權為柴惠敏所有,如需引用請先告知