網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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或者都是無所謂的,只要你維護便利。

import-import1


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

第一種體例,兩個都導入:

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

import-import

即兩個css同時加載;

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

再來看看截圖:

link-import

也就是等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

我們看截圖:機能仍是欠好!

link-with-import

第四種體例,引用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下的截圖,機能仍是很差:

第二種體例,一個引用,一個導入:

link-blocks-import

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

link-blocks-import-not-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'>

機能就釀成了這樣的:

many-links

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

css9.net上說:

《高機能網站培植指南》(《High Performance Web Sites》)第5章如是說:“Link標簽庖代@imort標簽能帶來機能上的收益;@import軌則有可能導致白屏現象;使用@import會導致組件下載的無序性?!?/link>

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图