css中l(wèi)ink和@import的區(qū)別分析詳解
發(fā)布時(shí)間：2012-03-31 23:12:21 作者：佚名 
我要評(píng)論
我要評(píng)論本文章詳細(xì)的介紹了關(guān)于link和@import的區(qū)別，有需要了解的朋友可以參考一下本文章
導(dǎo)入CSS文件主要有兩種方式：
鏈接式（link）
代碼如下
<link rel="stylesheet" href="style.css" type="text/css"/>
導(dǎo)入式（@impot）
<style type="text/css">
@import url("style.css");
</style>
以上是這兩種方式的語法區(qū)別。同時(shí)，瀏覽器處理這兩種方式也有所區(qū)別：
使用link方式，瀏覽器會(huì)先裝載完CSS文件再裝載HTML的主體部分，所以顯示出來的頁面從開始就是帶樣式效果的。
而采用@import方式，瀏覽器則會(huì)先裝載完整個(gè)HTML文件后再裝載CSS文件。
為什么會(huì)這樣呢，究其根本：
link屬于XHTML標(biāo)簽（功能不局限于導(dǎo)入CSS），而@import則是CSS提供的一種規(guī)則（CSS2.1以后，要考慮兼容）。
從用戶體驗(yàn)上來說，前者會(huì)更友好一些，特別是當(dāng)網(wǎng)頁文件比較大而網(wǎng)速比較慢的時(shí)候，后者頁面就會(huì)出現(xiàn)明顯的閃爍（開始會(huì)沒有樣式效果，當(dāng)CSS加載完成后，忽然呈現(xiàn)出樣式效果）。
另外，當(dāng)使用Javascript控制DOM去改變樣式的時(shí)候，只能使用link方式，因?yàn)锧import眼里只有CSS，不是DOM可以控制的。
一個(gè)例子:
<html>
<head>
<title>css demo</title>
<link rel=stylesheet type="text/css" href="css/name.css" title="cool">
<style>
@import url(css/name2.css);
H1 {color:red}
<style>
</head>
<body>
<H1>CSS demo by JET</H1>
<p style="color:blue">good luck.
</body>
</html>
1 用link進(jìn)行引用
<link rel="stylesheet" type="text/css" href="my.css">
2 用import進(jìn)行引用
<style type="text/css">
@import url(my.css);
</style>
第一種是直接在html頁面上進(jìn)行css書寫，而第二種和第三種是采用外部引用樣式單獨(dú)提取文件。
@import
指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。
其實(shí)link和@import的最根本區(qū)別就是，link是一個(gè)html的一個(gè)標(biāo)簽，而@import是css的一個(gè)標(biāo)簽,
link除了調(diào)用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能
調(diào)用css。如果單獨(dú)從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）
@import代碼
<style type="text/css">
@import url(foo.css) print;
</style>
另外對(duì)于css來說還有一種方式@media：
@media print {
@import "print.css"
}
用@media先制定設(shè)備為 print,然后再用@impor鏈接
附CSS與HTML文檔結(jié)合的4中方法：
1 使用<link>元素鏈接到外部的樣式文件
2 在<head>元素中使用"style"元素來指定
3 使用CSS "@import"標(biāo)記來導(dǎo)入樣式表單
4 在<body>內(nèi)部的元素中使用"style"屬性來定義樣式
好了大概就這些了，如果還有不明白的可以baidu,google搜索一下，不地都大同小義了。
鏈接式（link）
代碼如下
復(fù)制代碼
代碼如下:<link rel="stylesheet" href="style.css" type="text/css"/>
導(dǎo)入式（@impot）
復(fù)制代碼
代碼如下:<style type="text/css">
@import url("style.css");
</style>
以上是這兩種方式的語法區(qū)別。同時(shí)，瀏覽器處理這兩種方式也有所區(qū)別：
使用link方式，瀏覽器會(huì)先裝載完CSS文件再裝載HTML的主體部分，所以顯示出來的頁面從開始就是帶樣式效果的。
而采用@import方式，瀏覽器則會(huì)先裝載完整個(gè)HTML文件后再裝載CSS文件。
為什么會(huì)這樣呢，究其根本：
link屬于XHTML標(biāo)簽（功能不局限于導(dǎo)入CSS），而@import則是CSS提供的一種規(guī)則（CSS2.1以后，要考慮兼容）。
從用戶體驗(yàn)上來說，前者會(huì)更友好一些，特別是當(dāng)網(wǎng)頁文件比較大而網(wǎng)速比較慢的時(shí)候，后者頁面就會(huì)出現(xiàn)明顯的閃爍（開始會(huì)沒有樣式效果，當(dāng)CSS加載完成后，忽然呈現(xiàn)出樣式效果）。
另外，當(dāng)使用Javascript控制DOM去改變樣式的時(shí)候，只能使用link方式，因?yàn)锧import眼里只有CSS，不是DOM可以控制的。
一個(gè)例子:
復(fù)制代碼
代碼如下:<html>
<head>
<title>css demo</title>
<link rel=stylesheet type="text/css" href="css/name.css" title="cool">
<style>
@import url(css/name2.css);
H1 {color:red}
<style>
</head>
<body>
<H1>CSS demo by JET</H1>
<p style="color:blue">good luck.
</body>
</html>
1 用link進(jìn)行引用
復(fù)制代碼
代碼如下:<link rel="stylesheet" type="text/css" href="my.css">
2 用import進(jìn)行引用
復(fù)制代碼
代碼如下:<style type="text/css">
@import url(my.css);
</style>
第一種是直接在html頁面上進(jìn)行css書寫，而第二種和第三種是采用外部引用樣式單獨(dú)提取文件。
@import
指定導(dǎo)入的外部樣式表及目標(biāo)設(shè)備類型。
其實(shí)link和@import的最根本區(qū)別就是，link是一個(gè)html的一個(gè)標(biāo)簽，而@import是css的一個(gè)標(biāo)簽,
link除了調(diào)用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能
調(diào)用css。如果單獨(dú)從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）
復(fù)制代碼
代碼如下:@import代碼
<style type="text/css">
@import url(foo.css) print;
</style>
另外對(duì)于css來說還有一種方式@media：
復(fù)制代碼
代碼如下:@media print {
@import "print.css"
}
用@media先制定設(shè)備為 print,然后再用@impor鏈接
附CSS與HTML文檔結(jié)合的4中方法：
1 使用<link>元素鏈接到外部的樣式文件
2 在<head>元素中使用"style"元素來指定
3 使用CSS "@import"標(biāo)記來導(dǎo)入樣式表單
4 在<body>內(nèi)部的元素中使用"style"屬性來定義樣式
好了大概就這些了，如果還有不明白的可以baidu,google搜索一下，不地都大同小義了。
相關(guān)文章
這篇文章主要介紹了css link與@import區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-10-14CSS中l(wèi)ink和@import的區(qū)別說明
link與@import這兩種方式都是為了加載CSS文件,但還是存在著細(xì)微的差別。下面腳本之家小編給大家介紹CSS中l(wèi)ink和@import的區(qū)別說明，感興趣的朋友一起看下吧2016-08-12- 看到淘寶網(wǎng)頁中這樣寫使用的是import,而很多網(wǎng)站都是使用link，當(dāng)然還有一些頁面比較簡單，流量很大的網(wǎng)站，是直接將CSS寫在html代碼中的？他們有什么區(qū)別？2009-11-19
- 們知道在網(wǎng)頁中引用外部CSS有兩種方式，即:@import與link,我們也經(jīng)常聽到有人說要使用link來引入CSS更好,但是你知道為什么嗎2009-06-26
- 網(wǎng)頁制作Webjx文章簡介：這兩天剛寫完XHTML加載CSS的幾種方式，其中外部引用CSS分為兩種方式link和@import。 有很多網(wǎng)頁中的CSS鏈接與引用是這樣寫的：2009-04-02
CSS兩種方式link和@import-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
看到淘寶網(wǎng)頁中大部分是這樣寫的 <style type="text/css" media="screen"> @import url("http://www.taobao.com/home/css/global/v2.0.2008-10-31css用import還是link的區(qū)別-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
看到淘寶網(wǎng)頁中這樣寫使用的是import,而很多網(wǎng)站都是使用link，當(dāng)然還有一些頁面比較簡單，流量很大的網(wǎng)站，是直接將CSS寫在html代碼中的？他們有什么區(qū)別？css用impor2008-10-17- CSS的link和@import都是用于引入外部CSS文件的方法，但它們有一些區(qū)別和不同的用法，本文通過一個(gè)簡單的代碼演示，展示了link和@import的用法，感興趣的朋友跟隨小編一起看2023-05-04
