引入方法:1、使用link標簽引入,語法“<link href="css文件路徑" rel="stylesheet"/>”;2、在style標簽內(nèi)使用“@import”規(guī)則引入,語法“@import url("css文件路徑");”。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
外部樣式表必須導入到網(wǎng)頁文檔中,才能夠被瀏覽器識別和解析。外部樣式表文件可以通過兩種方法導入到 HTML 文檔中。
1、使用 <link> 標簽導入
使用 <link> 標簽導入外部樣式表文件:
<link href="外部樣式表文件路徑" rel="stylesheet" type="text/css" />
對各個屬性的說明:
-
href
屬性設置外部樣式表文件的地址,可以是相對地址,也可以是絕對地址。 -
rel
屬性定義關聯(lián)的文檔,這里表示關聯(lián)的是樣式表。 -
type
屬性定義導入文件的類型,同 style 元素一樣,text/css表明為 CSS 文本文件。
一般在定義 <link> 標簽時,應定義 3 個基本屬性,其中 href 是必須設置屬性。
也可以在 link 元素中添加 title 屬性,設置可選樣式表的標題,即當一個網(wǎng)頁文檔導入了多個樣式表后,可以通過 title 屬性值選擇所要應用的樣式表文件。
提示:在 Firefox 瀏覽器中可以在菜單中選擇“查看 –> 頁面樣式”選項,然后在子菜單中會顯示 title 屬性值,只需選擇不同的 title 屬性值,可以有選擇地應用需要的樣式表文件。IE 瀏覽器不支持該功能。
另外,title 屬性與 rel 屬性存在聯(lián)系,按 W3C 組織的計劃,未來的網(wǎng)頁文檔會使用多個 <link> 元素導入不同的外部文件,如樣式表文件、腳本文件、主題文件,甚至可以包括個人自定義的其他補充文件。導入這么多不同類型、名稱各異的文件后,可以使用 title 屬性進行選擇,這時 rel 屬性的作用就顯現(xiàn)出來了,它可以指定網(wǎng)頁文件初始顯示時應用的導入文件類型,目前只能關聯(lián) CSS 樣式表類型。
外部樣式是 CSS 應用的最佳方案,一個樣式表文件可以被多個網(wǎng)頁文件引用,同時一個網(wǎng)頁文件可以導入多個樣式表,方法是重復使用 link 元素導入不同的樣式表文件。
2、使用 @import 關鍵字導入
在 <style> 標簽內(nèi)使用@import
關鍵字導入外部樣式表文件:
<style type="text/css"> @import url("外部樣式表文件路徑"); </style>
在 @import
關鍵字后面,利用 url() 函數(shù)包含具體的外部樣式表文件的地址。
對比
兩種導入樣式表的方法比較:
-
link 屬于 HTML 標簽,而 @import 是 CSS 提供的。
-
頁面被加載時,link 會同時被加載,而 @import 引用的 CSS 會等到頁面被加載完再加載。
-
@import 只在 IE 5 以上才能識別,而 link 是 HTML 標簽,無兼容問題。
-
link 方式的樣式的權(quán)重高于 @import 權(quán)重。
一般推薦使用 link 導入樣式表的方法,@import 可以作為補充方法使用。
(學習視頻分享:css視頻教程)