CSS引用(link)和導入(@import)的區別(2009年4月13日更新)

日期：2013-11-30  來源：攀枝花惠康網絡公司

巨匠知道頁面要使用外部css文件的體例有兩種，一種是引用(link)，例如：<link rel=’stylesheet’ href=http://www.css88.com/archives/’a.css’>；另一種是導入(@import)，例如：<style>@import url(‘a.css’);</style>；兩者引用的體例在頁面上的揭示效不美觀卻是一樣的，可是兩者又有著很重年夜的區別：就是頁面的機能問題！
當然如不美觀站點的流量沒達到必然的流量（好比說10萬ip或者更年夜），我感受用link 或者 @import或者都是無所謂的，只要你維護便利。

假設我們一張頁面使用了兩個樣式文件:a.css和b.css;

第一種體例，兩個都導入：

我們可以用使用工具剖析一下網頁的加載情形，如圖：

即兩個css同時加載；

<link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>
<style>
@import url('b.css');
</style>

再來看看截圖：

也就是等a.css下載完成了后再下載b.css,頁面機能較著下降；

第三種體例，引用a.css，在a.css導入b.css：

機能就釀成了這樣的：

==========以下2009年4月13日更新========

</link><link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>

在b.css中導入a.css

我們看截圖：機能仍是欠好！

第四種體例，引用a.css和b.css(b.css只是導入c.css)，b.css導入c.css：

</link><link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>
</link><link rel='stylesheet' type='text/css' href='b.css'>

在b.css中導入c.css

@import url('b.css');

巨匠可看看這個文章，他強烈建議我們不要使用@imports：

我們再來看截圖：

這是ie下的截圖，機能仍是很差：

第二種體例，一個引用，一個導入：

這是ie外其他流量器的截圖，機能好于IE：

@import url(b.css');

<style>
<!--
@import url('a.css');
@import url('b.css');
-->
</style>

第五種體例，導入良多：

<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>

最后來看看第6種體例，兩個都引用：

</link><link rel='stylesheet' type='text/css' href=http://www.css88.com/archives/'a.css'>
</link><link rel='stylesheet' type='text/css' href='b.css'>

機能就釀成了這樣的：

http://www.stevesouders.com/blog/

css9.net上說：

《高機能網站培植指南》（《High Performance Web Sites》）第5章如是說：“Link標簽庖代@imort標簽能帶來機能上的收益；@import軌則有可能導致白屏現象；使用@import會導致組件下載的無序性。”