CSS中l(wèi)ink和@import的區(qū)別
你對CSS中l(wèi)ink和@import的區(qū)別是否熟悉，這里和大家分享一下，@import 屬性用來指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型， link除了調(diào)用CSS外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能 調(diào)用CSS。
CSS中l(wèi)ink和@import有什么區(qū)別？
定義
◆link元素
HTML和XHTML都有一個結(jié)構(gòu)，它使網(wǎng)頁作者可以增加于HTML文檔相關(guān)的額外信息。這些額外資源可以是樣式化信息（CSS）、導(dǎo)航助手、屬于另 外形式的信息（RSS）、聯(lián)系信息等等。
◆@import
指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。
其實(shí)link和@import的最根本區(qū)別就是，link是一個html的一個標(biāo)簽，而@import是CSS的一個標(biāo)簽, link除了調(diào)用CSS外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能 調(diào)用CSS。如果單獨(dú)從外部引用CSS來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。
link和@import孰好孰壞？
上面說了因?yàn)樯厦娴睦洗蟛灰粯?，所以在使用上就會有一些?xì)節(jié)的區(qū)別，不能說總體誰好誰壞， 只能說具體情況具體分析。
1）我要用javascript進(jìn)行樣式選擇；
這個時候就要用link,因?yàn)閘ink是html元素，可用javascript去控制dom元素***達(dá)到改變樣式的效果。
看下列代碼
- <link rel="stylesheet" href="/CSS/styles.CSS"
- type="text/CSS" media="screen" />
- <link rel="stylesheet" href="/CSS/orange.CSS"
- type="text/CSS" media="screen" title="orange" />
- <link rel="alternate stylesheet" href="/CSS/blue.CSS"
- type="text/CSS" media="screen" title="blue" />
- <link rel="alternate stylesheet" href="/CSS/pink.CSS"
- type="text/CSS" media="screen" title="pink" />
- <link rel="alternate stylesheet" href="/CSS/slate.CSS"
- type="text/CSS" media="screen" title="slate" />
這是一段很經(jīng)典的改變頁面風(fēng)格的代碼，因?yàn)槲覀兘裉熘饕v的是link和import，所以我這里只列出了引用CSS部分。
我們先來看看link里面?zhèn)€個屬性都是表達(dá)了什么意思：
[1]rel:用來聲明鏈接對象的作用或者類型。
譬如上面的的代碼："stylesheet"表示鏈接一個默認(rèn)的CSS,而"alternate stylesheet"折表示備選的CSS
[2]href:這個就不用我說了吧，引用CSS的文件路徑。
[3]tyle:文件類型
[4]media:應(yīng)用的設(shè)備，"screen"是說明應(yīng)用在屏幕上。
[5]title:是CSS的名稱。
這段代碼中一共有5個CSS,***個是基本樣式，而其他四個是風(fēng)格樣式,利用javascript去控制默認(rèn)顯示的樣式title就ok了。
2）我要在應(yīng)用打印樣式；
打印樣式顧名思義就是打印頁面時候的樣式。
這個樣式在普通瀏覽下是沒有效果的，只有在打印的時候生效。如果要為頁面單獨(dú)引用打印樣式的話，link和@import都可以的。
【編輯推薦】
- Chroma屬性實(shí)現(xiàn)CSS濾鏡透明效果
- CSS Sprites圖片切割術(shù)與圖片優(yōu)化
- CSS中Display與Visibility屬性的區(qū)別
- CSS中margin:0auto;無法居中解決方法
- CSS分欄布局的兩種方法：絕對定位和浮動
