 |
|
||||||||||||||
 |
||
將樣式表用到網頁上第一種用法是使用於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設定檔，不用每份網頁重複一次。 三種方式可以混合使用 | ||