將樣式表用到網頁上

第一種用法是使用於HTML標籤中的STYLE指令

在每個HTML標籤中，都可用STYLE參數，將CSS設定於後，

例如︰ <DIV STYLE="position:absolute; width:20px; height:20px">

這就是利用STYLE參數設定CSS，注意這個CSS字串要用引號括住。基本上CSS的指令都是一個性質名稱對應一個值，再以分號分隔不同的性質名稱。一次要用幾個性質隨需要而定，只要能達成任務就好

第二種用法在<HEAD>與</HEAD>之間宣告

宣告方式為使用<STYLE>.................</STYLE>

如下範例

<HTML>

<HEAD>

<STYLE TYPE="text/css">------------指明為CSS樣式,另一種為text/javascript樣式

<!--

  H1 { color:blue; }

其他樣式

-->

</STYLE>

</HEAD>

其他HTML內容

所有的<H1>標籤都會套用這個設定。

如要許多標籤都套用同一組設定，可用如下語法︰

H1,H2,H3,FONT {color:#FF0000; font-family:Arial}

這樣所指定到的標籤都會被套用此設定，中間只須讀號隔開就可以了

第三種用法，是寫在<STYLE>標籤中，但是並不套用於任何標籤。我們只先給它一個名字，將設定寫好，想在某標籤中套用時，再利用CLASS參數指定此名字，就可套用

範例︰

.mainUser {color:#0000AA; font-size:20px}

這樣就將這一組設定取名為mainUser。需要套用這一組設定時再於標籤中用CLASS參數引入

例如︰  <FONT CLASS=mainUser>

這樣此標籤就套用了我們設定的CSS了。

接下來介紹一種進階用法，如果我們只想讓某個CSS只可被引入於某類型的標籤，可用以下的方法︰

SPAN.mainWin {color:#0000AA; font-size:20px}

設定好此行後，「只有SPAN標籤」可用CLASS參數套用此設定，其它不行。而且必需「用CLASS參數引入」後才會有作用，它不會自動套用於標籤中。如下︰

<SPAN CLASS=mainWin>

第四種用法，也是是寫在<STYLE>標籤中，但是這種用法會依據HTML中各標籤的ID值，而自動的套用

如:    #std {color:#FF0000; font-size:20px}

上面這行，是指有任何HTML標籤的ID值為std，就會套用此CSS。當然若ID不為std，就不會去套用它。如下面的標籤，會自動套用此CSS︰

<FONT ID=std>

接下來介紹一種進階用法，如果我們只想讓某個CSS只可被引入於某類型的標籤，可用以下的方法︰

SPAN#std {color:#0000AA; font-size:20px}

設定好此行後，「只有SPAN標籤」中ID為std的標籤會套用此設定，其它的標籤，即使ID為std也不會套用。說明如下︰

<SPAN ID=std>

<DIV ID=std>

在上面的例子，只有SPAN標籤會套用此CSS，而DIV標籤並不會套用。簡單的說，這種方法是以ID決定套用的CSS。

第五種使用方式為先建立好樣式檔,再連結

先將樣式內容打好存成*.CSS檔

然後以連結方式加入

<Link REL=stylesheet TYPE="text/css" HREF="檔名.css">

就可以將寫好的*.css設定檔引入網頁中，要注意的是，此指令只能用在<HEAD>標籤中。

第六種方式為匯入檔

與第二種方式類似,先建好CSS樣式檔

在HTML檔中<STYLE>與</STYLE>之間加入

@import URL("樣式檔位址") ;

此指令只能用在<STYLE>標籤中。這樣做的好處是多份網頁可共用同一份CSS設定檔，不用每份網頁重複一次。

三種方式可以混合使用