CSS的三種引用方式:
1.內聯樣式(行間樣式):直接在標簽內部通過使用style屬性添加CSS樣式
<p style="color:red;font-size:12px;">這是一個段落</p>
2.內部樣式:在<head>標簽里面通過使用<style>標簽來引進CSS樣式
<head>
<style>
p{
corlor:red;
font-size:12px;
}
</head>
3.外部樣式:先在外部新建一個外部樣式表,然后在<head>標簽里面通過<link>標簽進行關聯
<head>
<link rel="stylesheet" type="text/css" href="base.css"/>
</head>
或者用@import引入
<style type="text/css" >
@import url("CSS文件");
</style>
link和@import的區別:
1.老祖宗的差別。link屬於XHTML標簽,而@import完全是CSS提供的一種方式。link 標簽除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
2.加載順序的差別。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再被加載,網速慢時會影響視覺效果.
link確保並行下載css文件,@import是一個一個下載。在IE中,link會阻斷@import延長加載時間,多個@import的使用還會打亂資源文件的下載順序引發js問題。
3.兼容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。
4.使用DOM控制樣式的區別.當使用javascript控制dom去改變樣式的時候,只能使用 link標簽,因為@import不是dom可以控制的。
使用link: link可以選定要加載的媒體media。由於上述加載、兼容與IE的原因,普通站點應當盡量使用link
使用@impo:大型門戶網站(如淘寶)多個頁面link同一個css文件會造成速度下降,@import可以在css中調入樣式表,方便對css進行模塊化管理。