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

CSS中import與link的差別是什麼

Nov 23, 2018 pm 04:08 PM
import link 差別

這篇文章帶給大家的內容是關於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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
PS導出PDF如何設置密碼保護 PS導出PDF如何設置密碼保護 Apr 06, 2025 pm 04:45 PM

在 Photoshop 中導出帶密碼保護的 PDF:打開圖像文件。點擊“文件”&gt;“導出”&gt;“導出為 PDF”。設置“安全性”選項,兩次輸入相同的密碼。點擊“導出”生成 PDF 文件。

H5和小程序與APP的區別 H5和小程序與APP的區別 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要區別在於:技術架構:H5基於網頁技術,小程序和APP為獨立應用程序。體驗和功能:H5輕便易用,功能受限;小程序輕量級,交互性好;APP功能強大,體驗流暢。兼容性:H5跨平台兼容,小程序和APP受平台限制。開發成本:H5開發成本低,小程序中等,APP最高。適用場景:H5適合信息展示,小程序適合輕量化應用,APP適合複雜功能應用。

在router文件夾下的index.js文件中為什麼需要調用Vue.use(VueRouter)? 在router文件夾下的index.js文件中為什麼需要調用Vue.use(VueRouter)? Apr 05, 2025 pm 01:03 PM

在router文件夾下的index.js文件中註冊VueRouter的必要性在開發Vue應用程序時,常常會遇到關於路由配置的問題。特�...

centos和ubuntu的區別 centos和ubuntu的區別 Apr 14, 2025 pm 09:09 PM

CentOS 和 Ubuntu 的關鍵差異在於:起源(CentOS 源自 Red Hat,面向企業;Ubuntu 源自 Debian,面向個人)、包管理(CentOS 使用 yum,注重穩定;Ubuntu 使用 apt,更新頻率高)、支持週期(CentOS 提供 10 年支持,Ubuntu 提供 5 年 LTS 支持)、社區支持(CentOS 側重穩定,Ubuntu 提供廣泛教程和文檔)、用途(CentOS 偏向服務器,Ubuntu 適用於服務器和桌面),其他差異包括安裝精簡度(CentOS 精

不同數據庫系統添加列的語法有什麼區別 不同數據庫系統添加列的語法有什麼區別 Apr 09, 2025 pm 02:15 PM

不同數據庫系統添加列的語法為:mysql:alter table table_name add column_name data_type; postgresql:alter table table_name添加column_name data_type; oracle; oracle:alter table table_name add(column_name data_type)

JavaScript中如何從指定DOM節點下使用XPath進行查找? JavaScript中如何從指定DOM節點下使用XPath進行查找? Apr 04, 2025 pm 11:15 PM

DOM節點下XPath查找方法詳解在JavaScript中,我們經常需要根據XPath表達式從DOM樹中查找特定的節點。如果需要從某�...

laravel和thinkphp的區別 laravel和thinkphp的區別 Apr 18, 2025 pm 01:09 PM

Laravel 和 ThinkPHP 都是流行的 PHP 框架,在開發中各有優缺點。本文將深入比較這兩者,重點介紹它們的架構、特性和性能差異,以幫助開發者根據其特定項目需求做出明智的選擇。

H5和小程序的推廣方式有何不同 H5和小程序的推廣方式有何不同 Apr 06, 2025 am 11:03 AM

H5與小程序的推廣方式存在差異:平台依賴性:H5依賴瀏覽器,小程序依賴特定平台(如微信)。用戶體驗:H5體驗較差,小程序提供類似原生應用的流暢體驗。傳播方式:H5通過鏈接傳播,小程序通過平台分享或搜索。 H5推廣方式:社交分享、郵件營銷、QR碼、SEO、付費廣告。小程序推廣方式:平台推廣、社交分享、線下推廣、ASO、與其他平台合作。

See all articles