css樣式的三種引用方式
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進行模塊化管理。
css樣式的三種引用方式