css中l(wèi)ink和@import的區(qū)別分析詳解

2024-07-11 08:26:00

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

導(dǎo)入CSS文件主要有兩種方式：
鏈接式（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方式，瀏覽器會先裝載完CSS文件再裝載HTML的主體部分，所以顯示出來的頁面從開始就是帶樣式效果的。
而采用@import方式，瀏覽器則會先裝載完整個(gè)HTML文件后再裝載CSS文件。
為什么會這樣呢，究其根本：
link屬于XHTML標(biāo)簽（功能不局限于導(dǎo)入CSS），而@import則是CSS提供的一種規(guī)則（CSS2.1以后，要考慮兼容）。
從用戶體驗(yàn)上來說，前者會更友好一些，特別是當(dāng)網(wǎng)頁文件比較大而網(wǎng)速比較慢的時(shí)候，后者頁面就會出現(xiàn)明顯的閃爍（開始會沒有樣式效果，當(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>

上一篇：CSS網(wǎng)頁制作表單button的行高問題

下一篇：談自適應(yīng)寬度

發(fā)表評論

共有條評論