搜尋
首頁web前端css教學CSS中import與link的差別是什麼

CSS中import與link的差別是什麼

Nov 23, 2018 pm 04:08 PM
importlink差別

這篇文章帶給大家的內容是關於CSS中import與link的差別是什麼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

CSS中import與link的差別是什麼

CSS中import與link的區別

看到淘寶網頁中這樣寫使用的是import,而很多網站都是使用link,當然還有一些頁面比較簡單,流量很大的網站,是直接將CSS寫在html程式碼中的?他們有什麼區別? css用import還是link好?從經典論壇和另外一個網站大概了解了一下

看到淘寶網頁中大部分是這樣寫的

範例程式碼

<style type="text/css" media="screen">
@import url("http://www.divcss8.com/home/css/global/v2.0.css?t=20070518.css");
</style>

而很多網站使用的都是link

範例程式碼

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

而像google 百度163等網站他們都是直接寫在網頁中

當然使用連結link和導入import的好處就是易於維護,但當網速比較慢的時候,會出現載入中斷的情況,導致頁面排版錯誤

他倆的作用相同

唯一的不同是服務物件不一樣

@import 為CSS服務

link是為目前的頁服務

經典有網友說@import會優先執行。

外部引用CSS中 link與@import的差異

這兩天剛寫完XHTML載入CSS的幾種方式,其中外部引用CSS分為兩種方式link和@import。

本質上,這兩種方式都是為了載入CSS文件,但還是存在著細微的差別。

差異1:老祖宗的差別。 link屬於XHTML標籤,而@import完全是CSS提供的一種方式。

link標籤除了可以載入CSS外,還可以做很多它的事情,例如定義RSS,定義rel連線屬性等,@import就只能載入CSS了。

差異2:載入順序的差異。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候還挺明顯(夢之都加載CSS 的方式就是使用@import,我一邊下載一邊瀏覽夢之都網頁時,就會出現上述問題)。

差異3:相容性的差異。由於@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標籤無此問題。

差異4:使用dom控制樣式時的差異。使用javascript控制dom去改變樣式的時候,只能使用link標籤,因為@import不是dom可以控制的。

大致上就這幾種差別了(如果還有什麼差別,大家告訴我,我再補充上去),其它的都一樣,從上面的分析來看,還是使用link標籤比較好。

以上就是CSS中import與link的區別是什麼的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。


以上是CSS中import與link的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:divcss8。如有侵權,請聯絡admin@php.cn刪除
我們如何標記Google字體並創建Goofonts.com我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目,它們都是版式的忠實擁護者。我們一直在標記Google

永恆的Web開發文章永恆的Web開發文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議

與部分元素的交易與部分元素的交易Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章:

使用JavaScript API練習GraphQl查詢使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API!碰巧的是,我得到了完美的

組件級CMS組件級CMSApr 12, 2025 am 11:09 AM

當一個組件生活在數據查詢居住在附近的數據查詢的環境中時,視覺組件和

將類型設置在圓上...帶偏移路徑將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM

這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時,它被稱為Motion-Path,然後被更名。我

'恢復”在CSS中有什麼作用?'恢復”在CSS中有什麼作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。

現代戀人現代戀人Apr 12, 2025 am 10:58 AM

我喜歡這樣的東西。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版