引入CSS樣式的三種方法

樣式表放在不同的地方，產生作用的範圍也不同。大致來說，樣式表分為內嵌樣式表和外聯樣式表，即有頁面內放置、外部引用、外部導入三種方式。
1 、內聯樣式表
內聯樣式表就是把樣式表規則放在 和 的中間，從而使樣式表對整個當前 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 標題的設定，那麼以哪一個為主呢？這時就看哪一個樣式表被引用在前，它就是具有第一優先權的。因此我們在處理複雜的樣式表資訊時，要充分考慮到樣式表衝突這一可能性，較好的解決矛盾，使之相互協調匹配。

更多引入CSS樣式的三種方法相關文章請關注PHP中文網！