CSS學習之一：CSS樣式的引入

HTML中，我們通常使用link元素引入外部樣式表，link有以下幾個屬性：

1、rel，代表“關係”（relation），在這裡，關係（即rel值）為“stylesheet”；

2、type，總是設定為“text/css”，描述了使用link載入的資料類型；

3、href，值為樣式表的URL，可以是相對的也可以是絕對的；

4、media，預設值是“all”，說明樣式表要運用於表現的媒體，還有其他取值：aural（用於語音合成器、螢幕助讀程式和文檔的其他聲音表現）、braille（用Braille裝置表現文檔時使用）、embossed（用Braille裝置列印時使用）、handheld（用於手持功能）、print（為視力正常的使用者列印文檔時使用，還會在顯示文檔的“預覽列印”時使用）、projection（用於投影儀）、screen（在螢幕媒體，如電腦顯示器中使用）、tty（在固定間距環境，如電傳印表機中顯示文檔時使用）、tv（在電視上顯示文檔時使用）。不過，各個瀏覽器對它們的支援情況可能不同。

5、title，不常用，但是當rel值為“alternate stylesheet”時，使用title屬性可以產生一個候選樣式表列表供使用者選擇。

當rel值為“alternate stylesheet”時，還可以提供候選樣式表，只有在使用者選擇這個樣式表時才用於文檔表現。程式碼範例如下：

<link rel="stylesheet" type="text/css" href="style1.css" media="screen,print" /><!-- media屬性可以有多個值，用逗號隔開 --><link rel="alternate stylesheet" type="text/css" href="style2.css" media="screen,print" title="big" /><!-- alternate指定候選樣式表 --><link rel="alternate stylesheet" type="text/css" href="style3.css" media="screen,print" title="small" />

除此之外，我們還可以使用內部樣式表為頁面添加樣式：

<style type="text/css"><!-- /* 把聲明的樣式包含在一個html注釋中，這樣可以解決較老的瀏覽器不識別style的問題 */body {background:grey;}--></style>

經常看到很多朋友在<style>後面加入HTML注釋，然後再在裡面寫樣式，終於知道原因如上。

還有一種方法，就是使用@import方法匯入樣式表，只是要注意以下，擺放的位置，因為@import是css定義的引用樣式的方法，所以它應該放在<style>元素裡面，而且，它前面不能夠有任何其他規則（當然，不包括其它的@import，因為一個<style>裡可以放不止一個@import），否則，後面匯入的樣式講失效，程式碼範例：

<style type="text/css"><!-- /* 把聲明的樣式包含在一個html注釋中，這樣可以解決較老的瀏覽器不識別style的問題 */@import url("style2.css");/* @import出現在樣式表開頭 */body {background:grey;}@import url(style3.css);/* @import前面有樣式，所以被忽略 */--></style>

關於匯入樣式表的補充：

    匯入樣式表的方式主要體現於能在一個樣式檔案中再次匯入其他樣式表，可以降低HTML文檔的複雜性，並且允許在一個樣式表中管理所有樣式表。由於匯入樣式表在其他樣式前面，所以匯入樣式表的規則可能會被隨後的樣式覆蓋，這個必須考慮。

    雖然在使用@import關鍵字匯入樣式表的方式時，@import寫在樣式表最前面，但瀏覽器解析的時候是最後才解析的，這樣很容易導致IE6中的閃屏或者在開啟頁面的過程中無樣式直到頁面載入完畢才會載入樣式的現象出現。

----參考《CSS那些事兒》

接下來就是內聯樣式了，即在HTML標籤裡添加style屬性，裡面寫需要的樣式，但是要注意，@import是不可以用在內聯樣式中的，程式碼範例：

<p style="@import url('style3.css');">CSS document</p><!-- 不能在style屬性中使用@import -->

像上面的做法是不對的。

暫時這麼多，以後會繼續補充。^_^