CSS樣式入門
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屬性,用于指定樣式表被接受的介質或媒體。允許的值有
當樣式被應用到很多的網頁時,一個外部樣式表是理想的。網頁制作者使用外部樣式表可以改變整個網站的外觀而僅僅通過改變一個文件。同樣的,大多數瀏覽器會保存外部樣式表在緩沖區,從而如果樣式表在緩沖區就避免了在展示網頁時的延遲。
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指定。
舊版本的瀏覽器,并不能識別STYLE元素,會將其當作BODY的一部分照常展示其內容,從而使這些樣式表對用戶是可見的。要防止這樣做,STYLE元素的內容要包含一個SGML注解(<!-- comment -->)在里面,像上述例子那樣。
嵌入的樣式表可用于當一個文檔具有獨一無二的樣式的時候(即只有少數網頁需要這樣的樣式時)。如果多個文檔都使用同一樣式表,那么外部樣式表會更適用。(當一個網站需要統一樣式時,則用連接一個外部的樣式表(方法一)比較方便,更能優化網站的速度與維護)