【學習】link和@import的差別

link和@import的差別

分為以下四點

• 🌺從屬關系
• 🍀加載順序
• 🌹相容性
• 💐DOM可控性

一、link😉

1、link是HTML提供的标簽，不僅可以加載CSS檔案，還可以定義RSS，rel連接配接屬性等

2、加載頁面時，link引入的CSS被同時加載，

3、link标簽作為HTML元素，不存在相容性問題，

4、可以通過JS操作DOM，來插入link标簽改變樣式；

二、@import😃

1、@import是CSS提供的文法規則，隻有導入樣式表的作用

2、@import引入的CSS将在頁面加載完畢後加載；

3、而@import是CSS2.1才有的文法，故老版本浏覽器（IE5之前）不能識别；

4、由于DOM方法是基于文檔的，無法使用@import方式插入樣式；

用法

一、link🤡

連結外部樣式表

<link rel="stylesheet" type="text/css" href="" target="_blank" rel="external nofollow" />

，可以支援多種浏覽器，

二、@import🤗

@import必須寫在樣式頂部

引入位置

• 在html中

  <style>@import url(引入的css路徑);</style>

  這個必須要寫在style的第一行
• 在css中

  @import url(引入的css路徑);

  @import "引入的css路徑";

這個@import必須要寫在CSS的第一行