css中link和@import的區別分析詳解

2024-07-11 08:26:00

字體：大中小

來源：轉載

供稿：網友

導入CSS文件主要有兩種方式：
鏈接式（link）
代碼如下

復制代碼

代碼如下:
<link rel="stylesheet" href="style.css" type="text/css"/>

導入式（@impot）

復制代碼

代碼如下:
<style type="text/css">
@import url("style.css");
</style>

以上是這兩種方式的語法區別。同時，瀏覽器處理這兩種方式也有所區別：
使用link方式，瀏覽器會先裝載完CSS文件再裝載HTML的主體部分，所以顯示出來的頁面從開始就是帶樣式效果的。
而采用@import方式，瀏覽器則會先裝載完整個HTML文件后再裝載CSS文件。
為什么會這樣呢，究其根本：
link屬于XHTML標簽（功能不局限于導入CSS），而@import則是CSS提供的一種規則（CSS2.1以后，要考慮兼容）。
從用戶體驗上來說，前者會更友好一些，特別是當網頁文件比較大而網速比較慢的時候，后者頁面就會出現明顯的閃爍（開始會沒有樣式效果，當CSS加載完成后，忽然呈現出樣式效果）。
另外，當使用Javascript控制DOM去改變樣式的時候，只能使用link方式，因為@import眼里只有CSS，不是DOM可以控制的。
一個例子:

復制代碼

代碼如下:
<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進行引用

復制代碼

代碼如下:
<link rel="stylesheet" type="text/css" href="my.css">

2 用import進行引用

復制代碼

代碼如下:
<style type="text/css">
@import url(my.css);
</style>

第一種是直接在html頁面上進行css書寫，而第二種和第三種是采用外部引用樣式單獨提取文件。
@import
指定導入的外部樣式表及目標設備類型。
其實link和@import的最根本區別就是，link是一個html的一個標簽，而@import是css的一個標簽,
link除了調用css外還可以有其他作用譬如聲明頁面鏈接屬性，聲明目錄，rss等等，而@import就只能
調用css。如果單獨從外部引用css來說，他們的作用是基本一樣，只不過上面的老大不一樣而已。：）

復制代碼

代碼如下:
@import代碼
<style type="text/css">
@import url(foo.css) print;
</style>

上一篇：CSS網頁制作表單button的行高問題

下一篇：談自適應寬度

發表評論

共有條評論