1.串連到一個外部的樣式表
將一個外部的樣式表加入到HTML網頁中使用下列的格式:
<LINK REF= HREF= TYPE= MEDIA=>
<LINK>標記放置到文檔的head部分。
其中REF屬性用於定義的串連檔案與HTML文檔之間的聯絡。REL=StyleSheet指定一個固定的首選樣式。固定樣式在樣式表被啟用時總是被應用。網頁製作者不能指定多於一個的首選樣式。
互動樣式通過REL="Alternate StyleSheet"指出。例子中的第三個<LINK>標記定義一個互動樣式,使用者可以選擇用來代替首選樣式表。
注意現在的瀏覽器一般都缺乏選擇互動樣式的能力。
單一的樣式也可以通過多個樣式表給出
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
在這個例子中,三個樣式表組合成一個"Contemporary"樣式,作為一個首選樣式表被應用。要組合多個樣式表成一個單一樣式,必須在每個樣式表中使用相同TITLE。
可選的TYPE屬性用於指定媒體類型--text/css是一個層疊樣式表--允許瀏覽器忽略它們不支援的樣式表類型
<LINK>標記也有一個可選的MEDIA屬性,用於指定樣式表被接受的介質或媒體。允許的值有
screen (預設值),提交到電腦螢幕;
print, 輸出到印表機;
projection,提交到投影機;
aural,擴音器;
braille,提交到凸字觸覺感知裝置;
tty,電傳打字機 (使用固定的字型);
tv,電視機;
all,所有輸出裝置。
當樣式被應用到很多的網頁時,一個外部樣式表是理想的。網頁製作者使用外部樣式表可以改變整個網站的外觀而僅僅通過改變一個檔案。同樣的,大多數瀏覽器會儲存外部樣式表在緩衝區,從而如果樣式表在緩衝區就避免了在展示網頁時的延遲。
2.嵌入一個樣式表一個樣式表可以使用STYLE元素在文檔中嵌入:
一個樣式表可以使用STYLE元素在文檔中嵌入:
<STYLE TYPE="text/css" MEDIA=screen><!-- BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em }--></STYLE>STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用於指定媒體類型,LINK元素也一樣。同樣地,TITLE和MEDIA屬性也可以用STYLE指定。