首頁 > web前端 > css教學 > 同樣是外部樣式,@import和link有什麼差別

同樣是外部樣式,@import和link有什麼差別

yulia
發布: 2018-09-18 15:41:06
原創
1855 人瀏覽過

在HTML中引入CSS樣式的方法很多,比如,行內樣式,導入式,鏈接式等,今天這篇文章就和大家聊聊同樣是外部樣式,link鏈接式和import導入式有什麼區別。需要的朋友可以參考一下,希望對你有幫助。

外部引用CSS兩種方式:

link方式:

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
登入後複製

#@import方式:

<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>
登入後複製

兩者都是外部引用CSS的方式,但是存在一定的區別:

區別1:link是XHTML標籤,除了載入CSS外,還可以定義RSS等其他事務;@import屬於CSS範疇,只能載入CSS。

區別2:link引用CSS時,在頁面載入時同時載入;@import需要頁面網頁完全載入以後載入。

區別3:link是XHTML標籤,無相容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支援。

區別4:ink支援使用Javascript控制DOM去改變樣式;而@import不支援。

補充:@import最優寫法

@import的寫法一般有下列幾種:

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不辨識
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不辨識
@import url(style.css) //Windows NS4 , Macintosh NS4不辨識
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不辨識
@import url("style.css") / /Windows NS4, Macintosh NS4不識別
由上分析知道,@import url(style.css) 和@import url("style.css")是最優的選擇,相容的瀏覽器最多。從位元組優化的角度來看@import url(style.css)最值得推薦。

#

以上是同樣是外部樣式,@import和link有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板