昨天碰到同事問了一個問題，@impor導入外部樣式與link鏈入外部樣式的優先級是怎樣的，為什么實驗的結果是按照樣式表導入后的位置來決定優先級。今天就這個問題具體總結如下：
先解釋一下網頁添加css樣式的方法，一共有四種，分別是：
一、內嵌樣式——直接在頁面的標簽里加<div style="border:1px red solid;">測試信息</div>
二、內部樣式表——在head部分加入 <style type="text/css">div{margin: 0;padding: 0;border:1px red solid;}</style>
三、
鏈入外部樣式表——在head部分加入<link rel="stylesheet" type="text/css" href="my.css" media="all" />，引入外部的CSS文件
四、導入外部樣式表——在head部分加入<style type="text/css">@import url(my.css);</style>
樣式表的優先級順序從高到低依次為：內嵌樣式 > 內部樣式表 > 導入外部樣式表（其實是屬於內部樣式表）
鏈入外部樣式表與
內部樣式表之間的優先級取決於所處位置的先后，最后定義的優先級最高。
本文主要是做@import導入樣式表與link鏈入樣式表的區別探討，所以其他的不做詳談。
1. 鏈入外部樣式表
鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用<link>標記鏈接到這個樣式表文件，這個<link>標記必須放到頁面的<head>區內，如下：
<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>
上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。media是選擇媒體類型，這些媒體包括：屏幕，紙張，語音合成設備，盲文閱讀設備等。
2.導入外部樣式表
導入外部樣式表是指在內部樣式表的<style>里導入一個外部樣式表，導入時用@import，看下面這個實例：
<head>
……
<style type=”text/css”>
<!--
@import “mystyle.css”
其他樣式表的聲明
-->
</style>
……
</head>
例中@import “mystyle.css”表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，實質上它相當於存在內部樣式表中的。
注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。
綜合度娘的多篇文章和個人理解，兩者的區別總結如下：
1：老祖宗的差別。link屬於XHTML標簽，而@import完全是CSS提供的一種方式。
link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性，等，@import就只能加載CSS了。
2：加載時間及順序不同。使用link鏈接的css是客戶端瀏覽你的網頁時先將外部的CSS文件加載到網頁當中，然后再進行編譯顯示，所以這種情況下顯示出來的網頁跟我們預期的效果一樣，即使一個頁面link多個css文件，網速再慢也是一樣的效果；而使用@import導入的CSS就不同了，客戶端在瀏覽網頁時是先將html的結構呈現出來，再把外部的CSS文件加載到網頁當中，當然最終的效果也是跟前者是一樣的，只是當網速較慢時會出現先顯示沒有CSS統一布局時的html網頁，這樣就會給閱讀者很不好的感覺。這也是現在大部分網站的CSS都采用鏈接方式的最主要原因。
3：兼容性不同。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
4：使用dom控制樣式時出現問題。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。
5：導入樣式可以避免過多頁面指向一個css文件。當網站中使用同一個CSS文件的頁面不是非常多時，這兩種方式在效果方面幾乎是沒有不同的，但網站的頁面數達到一定程度時（比如新浪等門戶），如果采用鏈接的方式可能就會使得由於多個頁面調用同一個CSS文件而造成速度下降，但是一般頁面能達到這種程度的網站也會有資本用最好的硬盤，所以這方面的因素也不用怎么擔心。
綜上所述，一般普通的站點在調用外部樣式表的時候，還是
盡量選擇link鏈入外部樣式表比較好。關於區別中第二點的加載順序的差別中，找到一個國外的參考文章作為補充資料：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/