義烏網(wǎng)站設(shè)計CSS語法之外部引用CSS

2012-09-20　瀏覽：150
義烏網(wǎng)站設(shè)計CSS語法之外部引用CSS

CSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代碼量最小,表現(xiàn)最統(tǒng)一,也是標(biāo)準(zhǔn)網(wǎng)頁設(shè)計推薦的).
使用 link 標(biāo)簽引用CSS
示例
<head>
 <link rel="stylesheet" type="text/css" href="http://megkemner.com/style.css" />
</head>
 href -- 指定需要加載的資源(CSS文件)的地址URI
 rel -- 指定鏈接類型
 type -- 包含內(nèi)容的類型,一般使用type="text/css"
使用 @import 引用CSS
 示例
<head>
 <style type="text/css">@import url(http://megkemner.com/style.css);</style>
</head> 
相對路徑與絕對路徑
加載文件的時候可以使用相對路徑或者絕對路徑.
絕對路徑:文件的完整路徑,主頁上的文件或目錄在硬盤上真正的路徑.
http://megkemner.com/html/default.html就是絕對路徑,/html/default.html也是絕對路徑,C:winntsystem.sys也是絕對路徑
相對路徑:相對于我們查看文檔的路徑.
../default.html或者default.html或者../../default.html都是相對路徑
外部引用CSS中 link與@import的區(qū)別
差別1：老祖宗的差別。link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。
link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

差別2：加載順序的差別。當(dāng)一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網(wǎng)速慢的時候還挺明顯。

差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。

差別4：使用dom控制樣式時的差別。當(dāng)使用javascript控制dom去改變樣式的時候，只能使用link標(biāo)簽，因為@import不是dom可以控制的。

上一條: 義烏網(wǎng)頁設(shè)計CSS入門例子
下一條: 義烏網(wǎng)站設(shè)計CSS語法之內(nèi)部引用CSS

新聞資訊

相關(guān)資訊