前端深刻之css篇|link和@import到底有什麼區別？

時間 2019-11-12

標籤前端深刻 css link import 到底什麼區別欄目 CSS 简体版

原文原文鏈接

寫在前面

在真正的前端開發中，咱們不多去寫行內樣式和內嵌樣式，一般都是去引用外部樣式。javascript

而在咱們學習之初的外部樣式表都是用link引入的，可是當後來咱們學習的逐漸深刻，發現@import也能夠引入樣式。那麼一樣是引入外部樣式，這二者有什麼區別呢，下面請跟隨我來詳細瞭解一下link和@import的區別吧！css

區別

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > 
        <style type="text/css" >   
            @import url("./myCss.css");   
        </style> 
    </head>
</html>

這就是兩種引用方式的常見用法，能夠很清晰的看出

一、從屬關係：link是html的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel 鏈接屬性等；而@import是css的語法，只有導入樣式表的做用。
二、加載順序：頁面被加載時，link會和html同時被加載而；@import引入的 CSS 將在頁面加載完畢後被加載。
三、兼容性：@import是 CSS2.1 纔有的語法，因此只能在 IE5以上才能識別；而link是 HTML 標籤，因此不存在兼容性問題。
四、DOM：javascript只能控制dom去改變link標籤引入的樣式，而@import的樣式不是dom能夠控制的。
五、link方式的樣式權重高於@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)最值得推薦。html