css中l(wèi)ink和import的區(qū)別

本質(zhì)上，這兩種方式都是為了加載CSS文件，但還是存在著細(xì)微的差別。

創(chuàng)新互聯(lián)建站制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為1000多家服務(wù),創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

1. 老祖宗的差別。link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。 link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

2. 加載順序的差別。當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍），網(wǎng)速慢的時(shí)候還挺明顯。

3. 兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無此問題。

4. 使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。

@import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個(gè)主樣式表，在主樣式表中再引入其他的樣式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

sub1.css

———————-

p {color:red;}

sub2.css

———————-

.myclass {color:blue}

這樣更利于修改和擴(kuò)展。

大致就這幾種差別了，其它的都一樣，從上面的分析來看，還是使用link標(biāo)簽比較好。標(biāo)準(zhǔn)網(wǎng)頁制作加載CSS文件時(shí)，還應(yīng)該選定要加載的媒體（media），比如screen，print，或者全部all等。

提示：這樣做有一個(gè)缺點(diǎn)，會(huì)對(duì)網(wǎng)站服務(wù)器產(chǎn)生過多的HTTP請(qǐng)求，以前是一個(gè)文件，而現(xiàn)在卻是兩個(gè)或更多文件了，服務(wù)器的壓力增大，瀏覽量大的網(wǎng)站還是謹(jǐn)慎使用。有興趣的可以觀察一下像新浪等網(wǎng)站的首頁或欄目首頁代碼，他們總會(huì)把css或js直接寫在html里，而不用外部文件。

CSS里 @import用法

引入CSS的方法有兩種，一種是@import，一種是link

@import url('地址');

link href="地址" rel="stylesheet" type="text/css" /

現(xiàn)在絕大部分的網(wǎng)站都采用后一種link方式，原因在于

@import先加載HTML，后加載CSS

link先加載CSS，后加載HTML。

所以前者加載網(wǎng)頁會(huì)出現(xiàn)令瀏覽者以外的格式，后者則是帶格式的加載網(wǎng)頁。

css中為什么要把@import放在樣式表的最前面?

實(shí)際上，@import并不是一定要在最前面

W3C的CSS2.1標(biāo)準(zhǔn)中，對(duì)@import作了以下規(guī)定：

In CSS 2.1, any @import rules must precede all other rules (except the @charset rule,if present).

在CSS2.1中，任何@import命令必須放在所有其它語句之前（除了用到@charset時(shí)）。

而在CSS3標(biāo)準(zhǔn)中，則是這樣規(guī)定：

Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet.

在樣式表中，任何@import命令必須緊跟在@charset命令之后（如果有的話），放在其它@命令和樣式語句之前。

還有，@import命令放在注釋之后同樣生效。你不需要知道為什么，只要記住如果不這樣做@import就會(huì)失效就行了。假如你一定要追究為什么要做這樣的硬性規(guī)定，我認(rèn)為主要出于這樣的考慮：

p id="intro" class="frame head"I'm just a p element used test specificity of selectors. So leave me alone!/p

p#intro { font: italic 1em Candara, Arial, sans-serif; }

p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

p { font: italic 2em Georgia, serif; }

你認(rèn)為頁面最終會(huì)使用哪條規(guī)則的font樣式？是第一條p#intro。這里涉及到一個(gè)優(yōu)先級(jí)(specificity)的問題：#id .class element(標(biāo)簽名)。所以即便p{font}樣式出現(xiàn)在p#intro{font}和p.frame{}之后，最終被應(yīng)用的還是p#intro{font}。而容易導(dǎo)致問題的是下一種情況：

p.head { font: italic 1em Candara, Arial, sans-serif; }

p.frame { font: bold 3em Arial, Helvetica, sans-serif; }

這次你認(rèn)為會(huì)使用哪條font樣式？是第二條p.frame。這里涉及到cascading的問題。p.head的優(yōu)先級(jí)和p.frame的優(yōu)先級(jí)相同，但p.frame寫在p.head之后，按規(guī)則p.frame的font樣式會(huì)覆蓋p.head的font樣式。

在這種情況下，再允許把@import放在一堆樣式當(dāng)中，到底@import引入的樣式表中有沒有會(huì)覆蓋當(dāng)前樣式表的條目，諸如此類的判斷會(huì)更加困難。實(shí)際上，即便CSS標(biāo)準(zhǔn)里沒有作這樣的規(guī)定，程序員也還是會(huì)這樣做，因?yàn)檫@樣可以減少很多不必要的麻煩。

關(guān)于@import css樣式表問題

這里是指相對(duì)路徑，舉個(gè)例子比較好理解：

假如有兩個(gè)樣式文件，main.css和index.css（它們?cè)谕晃募A中），我們要在main.css里引用index.css，那么這里的寫法就是：

@import url(index.css);