寫在前面 在真正的前端開發中，我們很少去寫行內樣式和內嵌樣式，通常都是去引用外部樣式。 而在我們學習之初的外部樣式表都是用link引入的，但是當後來我們學習的逐漸深入，發現@import也可以引入樣式。那麼同樣是引入外部樣式，這兩者有什麼區別呢，下麵請跟隨我來詳細瞭解一下link和@import的區 ...
寫在前面
在真正的前端開發中，我們很少去寫行內樣式和內嵌樣式，通常都是去引用外部樣式。
而在我們學習之初的外部樣式表都是用link引入的，但是當後來我們學習的逐漸深入，發現@import也可以引入樣式。那麼同樣是引入外部樣式，這兩者有什麼區別呢，下麵請跟隨我來詳細瞭解一下link和@import的區別吧！
區別
<!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>
這就是兩種引用方式的常見用法，可以很清晰的看出
- 1、從屬關係：link是html的標簽，不僅可以載入 CSS 文件，還可以定義 RSS、rel 連接屬性等；而@import是css的語法，只有導入樣式表的作用。
- 2、載入順序：頁面被載入時，link會和html同時被載入而；@import引入的 CSS 將在頁面載入完畢後被載入。
- 3、相容性：@import是 CSS2.1 才有的語法，所以只能在 IE5以上 才能識別；而link是 HTML 標簽，所以不存在相容性問題。
- 4、DOM：javascript只能控制dom去改變link標簽引入的樣式，而@import的樣式不是dom可以控制的。
- 5、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)最值得推薦。
結論
@import是依賴css的，存在一定的相容問題，並且根據瀏覽器渲染機制來說，他在dom樹渲染完成後才會渲染，並且不能被js動態修改。
相比之下link相容性較好，且dom元素的樣式可以被js動態修改，又因為link的權重高於@import，所以 @import適用於引入公共基礎樣式或第三方樣式，link適用於自己寫的且需要動態修改的樣式。
經過實際的運用，相信在你真正書寫和調整樣式時一定可以如魚得水。
結語
以上就是本文章的全部內容了，如果有不正確的地方歡迎指正。
感謝您的閱讀，如果感覺有用不妨點贊/轉發。
前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。
前端路漫，踩坑不斷。
前端深入系列持續更新中……
以上2019-10-08。
