CSS 語法簡介

電腦於物理治療運用 >> CSS 語法 >> 文字的特效 | 表格的特效 | 版面的特效 | 進階的 CSS 特效 |

基本認識
  • 關於 CSS 樣式表
  • 樣式指令 STYLE 的語法
  • 樣式指令 CLASS 的語法
  • 樣式指令 ID 的語法
  • 連結外部樣式表檔案
  • 重新設定 HTML 標記
    		• CSS 語法
  • 文字的特效
  • 表格的特效
  • 版面的特效
  • 進階的 CSS 特效

    • 關於 CSS 樣式表

    　

    HTML 雖為網頁撰寫的主要標記語言，但早期的 HTML 功能薄弱，無法滿足使用者對文字控制及版面編輯的諸多需求。全球資訊網協會 (World Wide Web Consortium, W3C) 遂公佈「共用樣式表 (cascading style sheets, CSS)」，以擴充 HTML 的功能，增加許多文字及版面的變化，並可有效的管理網站。

    　

    CSS 樣式表的優點如下：

  • 可以設定所有元件 (object) 的變化，包括文字、圖片、按鈕、視窗等 。
  • 可以重新定義所有的 HTML 標記，以符合個別網站的需求。
  • 可以建立共同樣式指令，在不同的物件套用相同的樣式設定。
  • 可以製作個人化的的樣式設定檔案，以統一更新網站內的各網頁變化。

    • 　

    CSS 樣式表的使用方式有三種：

  • 標記加註式 (in-line)：如果只有一個 HTML 標記需要設定樣式，則可在該標記內，加上屬性 style="CSS語法"，則可個別修訂樣式。

  • 網頁內嵌式 (embedded)：在 HTML 文件的 <head> </head> 之間，以 <style> </style> 來定義共同樣式，使整個網頁使用同一樣式。

  • 外部設定式 (external)：由於一個網站由許多網頁所組成，最好是可以統一樣式，以免看得眼花繚亂，失去瀏覽的重點。 而且如果每一網頁均個別做樣式設定，萬一將來要修改時，耗費時日，且很容易挂一漏萬，因此可使每個網頁均連結到同一個 .css 的純文字檔，以設定整個網站的樣式。

    • 　

    使用 CSS 樣式表，有幾點需注意：

  • 如果同一 HTML 文件內有兩個樣式定義，以最後的定義為準。

  • 在瀏覽器方面，IE 5.0 版與 NetScape Communicator 均支援 CSS 語法，但部份瀏覽器則不支援 CSS 樣式指令。如果這些瀏覽器在無法辨識時，將會把 CSS 語法當成本文，而變成亂碼。 為免此狀況發生，則可以在 <style> </style> 之間用 <!--  --> 將 CSS 指令隱藏起來。

  • 一般使用 Notepad 來撰寫 CSS 指令。在網頁編輯軟體方面，IE 的 FrontPage 2000 可撰寫 CSS，但 NetScape Composer 沒有撰寫 CSS 的功能。

    •   back to top

    樣式指令 STYLE 的語法

    　

    CSS 樣式表的基本語法是標記加註式 (in-line) 的表示法，亦即在 HTML 標記後面，加上 style="CSS 語法"，內含樣式參數 (properties) 與屬性 (value)，以定義樣式。 兩個參數間，以分號 (；) 區隔；而參數與屬性間，以冒號 (：) 分開；至於多個以上屬性，則以空白分開。亦即

    style="參數一：屬性一  屬性二  屬性三；參數二：屬性；參數三：屬性一  屬性二"

    　

    例如：右圖就是設計「歡迎光臨」文字的標記加註式 CSS 語法。原來標題文字之 HTML 標記為
    <h2>標題文字</h2>
    若想要此標題文字變成紅色且改變字型為標楷體，可使用 CSS 的標記加註式語法如下：
    <h2 style="font-family:'標楷體 新細明體';
    color:#FF0000;size=48">
    其中 font-famlily、color、size 分別是 CSS 的參數，而標楷體、新細明體、#FF0000、48 等，則是該參數之屬性。標楷體與新細明體間以空白分開，表示
    如果瀏覽者電腦沒有標楷體，則選擇新細明體。 這樣網頁才會控制在自己的設計下，不會因缺乏該字體而走樣。

      back to top

    樣式指令 CLASS 的語法

    　

    如果每一個 HTML 標記都要使用 style 來加註，那樣會變得與 HTML 標記一樣地麻煩。在 CSS 語法中，可以先定義一組標記樣式指令，並將之命名，在需要使用樣式指令的 HTML 標記內，以 class = "標記名稱" 來執行該標記樣式指令。如此則可以在多處標記使用同一套樣式指令，而不需要一再地定義相同的樣式。這種方法稱之為「網頁內嵌式 (embedded)」語法。網頁內嵌式的語法有兩種：一為使用 classs 樣式指令，另一為使用 id 樣式指令。

    　

    Class 的語法包含定義樣式指令及執行樣式指令兩部份：

  • 定義樣式指令： 在 <head> </head> 之間，以 <style> </style> 來設定一個標記樣式指令組，其語法是以句號開頭， 後接標記名稱，再加上一個大括號 { }，內含樣式參數與屬性，即可定義樣式指令。 一如 style 指令，兩個參數間，以分號 (；) 區隔；而參數與屬性值間，以冒號 (：) 分開，如下：
    <style>
    .CSS 標記名稱 {參數一：屬性一  屬性二  屬性三；參數二：屬性}
    </style>
    每一個 <style> </style> 之間可以有多個樣式指令組，但須注意的是： <style> </style> 必須放在 <head> </head> 之間，不可以放在 <body> </body> 之間。

  • 執行樣式指令：在需要加註的 HTML 標記內，加上 class=標記名稱 即可執行該標記樣式指令組。每一個 HTML 標記之內可以有多個標記樣式指令組，但以最後一個設定為執行的結果。
    •

    　

    例如：右圖就是使用 CLASS 指令設計「歡迎光臨」文字的網頁內嵌式 CSS 語法。原來標題文字之 HTML 標記為
    <h2>標題文字</h2>
    若想要此標題文字變成藍色且改變字型為標楷體，可使用 class 的語法如下：
    <head>
    <style>
    .heading {font-family:"標楷體";color:#0000FF}
    </style>
    </head>
    <h2 class=heading>標題文字</h2>
    其中 heading 為 class 的標記名稱，font-famlily 與 color 分別是 CSS 語法的樣式參數，而標楷體 與 #0000FF，則是該參數之屬性。這樣地指令可以在同一網頁中重複使用，而不需要一再定義。

    　

    如果有兩個或以上的標記樣式指令組需要被設定，則可以寫在同一個網頁的 <style></style> 之內，只要命名不同即可。 詳見此超連結的例題。

      back to top

    樣式指令 ID 的用法

    　

    ID 也是一種網頁內嵌式的 CSS 語法，與 class 指令類似，使用 id 樣式指令可以在同一網頁內重複使用同一組標記樣式指令，而不需要一再地定義。但與 class 樣式指令不同的是一個 HTML 文件只能有一個 id 樣式指令，且 id 樣式指令是以 # 表示。

    　

    ID 的語法的定義及執行方式與 class 指令相似，包含定義及執行兩部份：

  • 定義 id 指令：在 <style> </style> 之間設定一個 id 樣式指令，其語法是以 # 開頭，後接標記名稱，再加上一個大括號 { }，內含樣式參數與屬性，即可定義樣式指令。兩個參數間，以分號 (；) 區隔；而參數與屬性值間，以冒號 (：) 分開，如下：
    <style>
    #CSS 標記名稱 {參數一：屬性一  屬性二  屬性三；參數二：屬性}
    </style>
  • 執行 id 指令：在 HTML 標記內，加上 id=標記名稱 即可執行。

    • 　

    例如：右圖就是使用 ID 指令來設計「歡迎光臨」文字的網頁內嵌式的 CSS 語法。原來標題文字之 HTML 標記為
    <h2>標題文字</h2>
    若想要此標題文字變成綠色且改變字型為標楷體，可使用 class 的語法如下：
    <head>
    <style>
    #heading {font-family:"標楷體";color:#00FF00}
    </style>
    </head>
    <h2 id=heading>標題文字</h2>
    其中 text 為 id 標記名稱， font-famlily 與 color 分別是 CSS 語法的樣式參數，而標楷體 與 #00FF00，則是該參數之屬性。這樣地指令可以在同一網頁中重複使用，而不需要一再定義。

      back to top

    連結外部樣式表檔案

    　

    通常一個網站會有許多網頁，如果各網頁均使用相同的樣式，則可指定一個外掛的樣式表檔案， 而不需要在各網頁中定義，且萬一要修改時，也可一次解決，不會挂一漏萬。

    　

    連結樣式表的方法分為下列三步驟：

  • 製定樣式表檔案：將在 <style></style> 之間的 CSS 標記樣式指令組內容儲存到一個純文字檔案，並將其副檔名訂為 .css。
  • 執行連結樣式表：在 HTML 文件 <head> </head> 之間，加入 <link type="text/css" rel="stylesheet" href="css檔名">， 即可連結到該樣式指令表檔案。
  • 執行樣式指令：在 HTML 標記內，加上 class=標記名稱 或 id=標記名稱 即可執行該標記。

    •   back to top

    重新設定 HTML 標記

    　

    CSS 的優點之一就是可以重新改變 HTML 的原始設定，使之成為較符合個別網站需求的標記。其 CSS 語法為在 <head></head> 之間使用 <style></style> 參數來重新定義 HTML 標記，亦即 如

    <style>
    HTML標記{參數一：屬性一  屬性二  屬性三；參數二：屬性}
    </style>
    則該網頁在使用此 HTML 標記時，則會變成新的設定。例如： Body{font-family:新細明體; font-size:12pt; color:#0000FF} 則在鍵入 時整個網頁的字型設定將會變成使用 12 號字、藍色的新細明體。若你的網頁排版影響視覺效果很大時，建議最好用 CSS 樣式表重新定義一次 HTML 的基本標記，以免瀏覽者使用不同的字型或大小，而影響網頁版面的設定。

    　

    此外，在一個網站或網頁內，同樣的 HTML 標記在不同地方可能會有些微的變化，可以採用次指令的形式如下：

    <style>
    HTML標記.CSS標記名稱{參數一：屬性一  屬性二  屬性三；參數二：屬性}
    </style>
    以符合不同標記的需求。使用時則以 <HTML標記  class=.CSS標記名稱> 來呼叫即可對同一 HTML 標記作不同的設定。

      back to top

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