義烏網站設計CSS語法之外部引用CSS
2012-09-20 瀏覽：150
CSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代碼量最小,表現最統一,也是標準網頁設計推薦的).
使用 link 標簽引用CSS
示例
<head>
<link rel="stylesheet" type="text/css" href="http://metaverseregal.com/style.css" />
</head>
href -- 指定需要加載的資源(CSS文件)的地址URI
rel -- 指定鏈接類型
type -- 包含內容的類型,一般使用type="text/css"
使用 @import 引用CSS
示例
<head>
<style type="text/css">@import url(http://metaverseregal.com/style.css);</style>
</head>
相對路徑與絕對路徑
加載文件的時候可以使用相對路徑或者絕對路徑.
絕對路徑:文件的完整路徑,主頁上的文件或目錄在硬盤上真正的路徑.
http://metaverseregal.com/html/default.html就是絕對路徑,/html/default.html也是絕對路徑,C:winntsystem.sys也是絕對路徑
相對路徑:相對于我們查看文檔的路徑.
../default.html或者default.html或者../../default.html都是相對路徑
外部引用CSS中 link與@import的區別
差別1：老祖宗的差別。link屬于XHTML標簽，而@import完全是CSS提供的一種方式。
link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。