Menu - Pages

網頁教學:如何用套用CSS樣式表

 

      如何將網頁內容套用CSS樣式呢?一般來說有三種方式,包括『連結外部樣式檔』、『內嵌宣告』及『行內宣告』等三種。簡略說明如下:

  • 第一種是『連結外部樣式檔』:這種方式就是將CSS樣式表儲存成獨立的檔案(*.CSS),然後在網頁程式碼中以連結之方式宣告。以圖1之內容來看,先將CSS樣式表儲存成『test.css』之檔案,然後在網頁程式碼中以連結之方式宣告,其連結之語法如下:
                                               連結外部樣式檔之語法:<link rel=stylesheet type="text/css" href="test.css">

CSS之基本格式2 

圖1  在網頁程式碼中以連結之方式宣告CSS樣式表

  • 第二種是『內嵌宣告』,就係將CSS樣式表放在放在HTML程式碼的標頭(<head>標記)區域,也就是指<head>與</head>標記裡。圖2之內容中,<style type="text/css">與</style>標記係用來宣告CSS樣式表,其中『type』屬性是用來通知瀏覽器(IE、FIREFOX)這個宣告係使用CSS樣式。『內嵌宣告』之好處係可以該網頁裡的CSS樣式統一管理,但僅能套用於設定之網頁本身,如果要讓網站裡所有網頁都要使用相同的樣式,就必須要一頁一頁設定,所以碰到網頁頁面很多之網站時,此種作法會讓後續維修很麻煩,所以檔你製作之網站其頁面很多時,可以考慮『連結外部樣式檔』之方式。

 

如何套用CSS樣式表

圖2  『內嵌宣告』,將CSS樣式表放在放在HTML程式碼的標頭(<head>標記)區域

如何套用CSS樣式表2 

圖3  以圖2之內容製作之網頁內容(以瀏覽器執行之結果)

  • 第三種是『行內宣告』,在HTML標記裡利用『style』屬性宣告CSS語法,並寫明『樣式規則』。此種方法適用在網頁內容中僅有少數HMTL程式碼需要套用CSS樣式。其輸入之語法如下:
               <h1 style="font-family:Broadway BT";border:1px #FF00FF solid;">The honesty is the policy!</h1>

    圖4為『行內宣告』之範例。由圖4之內容可以看到,其HTML程式碼中有二個<h1>標記,第一個<h1>標記有使用到『style』屬性,『style』屬性係用來宣告CSS樣式表,所以在網頁內容之呈現上,就有二種不同的樣式(示如圖5)。利用此種型式套用CSS樣式表,只對該行之程式碼有效,所以當有許多HTML程式碼都需要套用CSS樣式表時,不僅費時,也會讓網頁之程式碼看起來非常複雜,並且增加日後進行維護作業之困難度。

如何套用CSS樣式表3

圖4   『行內宣告』之輸入語法

如何套用CSS樣式表4

圖5  以圖4內容製作之網頁內容(以瀏覽器執行之結果)

【小提示:CSS全名為「串接式樣式表」,而且有三種套用之方法,表示是可串接使用的。但如果套用之CSS樣式表之內容有重複『樣式規則』時,優先之順序為『行內宣告』-->『內嵌宣告』-->『連結外部樣式檔』。】