CSS當中link與@import指令的區別

在平時的前端開發工做中，咱們使用HTML頁面引入CSS的方式主要有三種：一種是使用行內樣式，直接給標籤添加style屬性值；一種是使用內部樣式，在頁面中寫style標籤；還有一種則是使用外部樣式，從外部引入CSS文件。

那麼使用外部樣式又分爲兩種CSS引入方式：link標籤和@import指令。

因爲工做中一直使用link標籤引入外部CSS文件，也沒有專門瞭解過@import指令的使用方式及其與link標籤的區別。因而抽空專門看了看網上的一些技術文章，也順便翻了翻《CSS權威指南》，對這方面的知識進行了一個學習。

首先，link和@import的做用是相同的，都是用來引入外部CSS代碼，只是兩者服務的對象不一樣：link標籤爲當前的頁面服務，而@import只爲CSS服務。

其次，它們也有一些本質上的差異：

• 區別1：link屬於HTML標籤，除了引入CSS文件之外還能夠作不少其餘的事情，好比定義RSS、shortcut icon等；而@import只能用於加載CSS。

• 區別2：link引用CSS時，在頁面加載時同步加載；而@import在頁面加載完後纔開始對對應CSS進行加載。

• 區別3：link是HTML標籤，全部瀏覽器都支持；@import是CSS 2.1才提出來的使用方式，一些老的瀏覽器不支持。

• 區別4：link標籤可使用JavaScript控制DOM去改變樣式；而@import不支持。

以上就是參照網上一些文章整理出來的link與@import的區別。雖然平時工做當中基本都用link標籤了，可是感受也有必要多學習一點相似於這樣的基礎知識。