首頁 > web前端 > css教學 > 引入CSS樣式的三種方法

引入CSS樣式的三種方法

高洛峰
發布: 2016-12-16 15:41:08
原創
3146 人瀏覽過

樣式表放在不同的地方,產生作用的範圍也不同。大致來說,樣式表分為內嵌樣式表和外聯樣式表,即有頁面內放置、外部引用、外部導入三種方式。
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中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板