引用css文件的方法:1、使用link標(biāo)簽,語法“<link rel="stylesheet" type="text/css" href="css文件路徑">”;2、使用“@import”規(guī)則,語法“@import url(文件路徑);”。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3版、Dell G3電腦。
1、使用link標(biāo)簽(鏈接式)
將css代碼寫在一個單獨的文件中,用link標(biāo)簽直接引入該文件到頁面中。一個頁面可以多次使用LINK標(biāo)簽引入多個外部css文件,注意這些CSS代碼的相互影響,通常是后引入的CSS文件會覆蓋前面引入的CSS文件的相同效果。這種引入CSS的方式是目前最為流行的,可以在站個網(wǎng)站范圍內(nèi)進行CSS代碼的規(guī)劃,方便復(fù)用和維護,但這樣將代碼高度集中,代碼量可能過大,維護不當(dāng)?shù)脑捰秩菀壮霈F(xiàn)混亂。
<link rel="stylesheet" type="text/css" href="style.css">
2、使用@import(導(dǎo)入式)
使用@import引入CSS文件有兩種方式,一種可以放在頁面中的<style>…</style> 中,用法如下:
@import url(index2.css);
另外也可以放在CSS文件中使用,用法如下:
@import "sub.css";
使用@import引入CSS可以很方便的引入外部文件的CSS代碼,方便維護和規(guī)劃。但是每多引入一個CSS文件,就會對服務(wù)器增加一次連接請求,當(dāng)訪問量較大時,需在維護性和性能上進行權(quán)衡。
鏈接式(link)與導(dǎo)入式(@import)的區(qū)別
link是XHTML標(biāo)簽,除了加載CSS外,還可以定義RSS等其他事務(wù);而@import屬于CSS范疇,只能加載CSS;
link引用CSS時,在頁面載入時同時加載;而@import需要頁面網(wǎng)頁完全載入以后加載。
link是XHTML標(biāo)簽,無兼容問題;而@import是在CSS2.1提出的,低版本的瀏覽器不支持。
ink支持使用Javascript控制DOM去改變樣式;而@import不支持。
@import可以在CSS文件中再次引入其他樣式表;而link不支持。
(學(xué)習(xí)視頻分享:css視頻教程)