CSS層疊樣式的學習[1]

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屬性，用於指定樣式表被接受的介質或媒體。允許的值有

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指定。
舊版本的瀏覽器，並不能識別STYLE元素，會將其當作BODY的一部分照常展示其內容，從而使這些樣式表對使用者是可見的。要防止這樣做，STYLE元素的內容要包含一個SGML註解(<!-- comment -->)在裡面，像上述例子那樣。
嵌入的樣式表可用於當一個文檔具有獨一無二的樣式的時候（即只有少數網頁需要這樣的樣式時）。如果多個文檔都使用同一樣式表，那麼外部樣式表會更適用。（當一個網站需要統一樣式時，則用串連一個外部的樣式表（方法一）比較方便，更能最佳化網站的速度與維護）