引入CSS樣式的三種方法

樣式表放在不同的地方，產生作用的範圍也不同。大致來說，樣式表分為內聯樣式表和外聯樣式表，即有頁面內放置、外部參考、外部匯入三種方式。
1 、內聯樣式表
內聯樣式表就是把樣式表規則放在 < HEAD> 和 < /HEAD> 的中間，從而使樣式表對整個當前 HTML 頁面產生作用。
內聯樣式表還包括一種直接插入方式，即單獨指定 HMTL 頁面中某一個標誌，規定其風格樣式，可以寫為：

   < Table style=" font-size:10pt; color:blue;">

定義該表格內的字元大小為 10pt ，顏色為藍色。

2 、外部樣式表
編製一個網站的分類頁面，其風格往往是相同的或說是類似的，每次都在 < HEAD> 和 < /HEAD> 中插入相同的繁瑣複雜的樣式表規則，顯然不是我們的願望。
寫一個樣式表，以期實現於各風格相同的不同頁面，這一點即可藉助於引入外部樣式表來實現。並且當外部樣式表被更改時，各引用該樣式表的 HTML 頁面風格也隨之發生變化，而不需要手工一個個去更改。
外部樣式表是指建立一個完全獨立的文字檔，其副檔名為 .css ，檔案內容則輸入樣式表資訊，除去任何相關的 HTML 語言。
例如在外部樣式表中輸入：

我們看到，只是少了 < STYLE> 和注釋標記，其餘書寫外部樣式表沒有任何改變。輸入完畢，儲存它為 example.css 。
有兩種辦法可以實現引用外部樣式表。
（一）使用 < LINK> 標記連結外部樣式表
用以下語句來實現外部樣式表的連結：
< LINK REL=STYLESHEET HREF="example.css">
HREF 中應包含路徑資訊，這裡所指是該樣式表檔案與 HTML 文檔在同一目錄下。
一個 HTML 文檔中可以引用多個外部樣式表，例如：

   < LINK REL=STYLESHEET HREF="example.css">   < LINK REL=STYLESHEET HREF="style/other.css">

首先連結的 example.css 作為該文檔預設樣式表，當樣式定義產生衝突時，應當首先滿足前者。
（二）使用 @IMPORT 匯入樣式表資訊
使用 @import 命令用以把外部樣式表資訊匯入頁面中，它是存在於在 < STYLE> 和 < /STYLE> 標記中的。例如：

< STYLE TYPE="text/css"> @import "example.css"; @import "style/other.css"; < /STYLE>

顯然，這個方法也可以同時引用多個外部樣式表資訊，樣式表產生作用的優先順序按照匯入的先後順序來設定。
這三種方法可以混合使用，即能夠在一個頁面中，同時使用這三種方法，不過，當樣式表資訊規則一多，就比較容易產生衝突。比如在引用的數個樣式表資訊中都有關於對 H1 標題的設定，那麼以哪一個為主呢？這時就看哪一個樣式表被引用在前，它就是具有第一優先權的。因此我們在處理複雜的樣式表資訊時，要充分考慮到樣式表衝突這一可能性，較好的解決矛盾，使之相互協調匹配。