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

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

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

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

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

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

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

新聞資訊

相關(guān)資訊