link和import

HTML引入CSS样式的四种方式

内联样式、内部样式和外部样式我们就不多说了，下面来看看 @import 引入 CSS 样式的方法：

• 在内部样式中使用 @import：

  <style>
      @import url(style.css);
  </style>

• 在外部样式中使用 @import：

  <link rel="stylesheet" type="text/css" href="style.css">

  /* style.css */
  /* @charset "utf-8"; */
  @import url(style.css);
  * { 
      margin: 0; 
      padding: 0;
  }

  从属关系的区别

• link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

• @import 是 CSS 提供的语法规则，只有导入样式表的作用。

加载顺序的区别

• 加载页面时，link标签引入的 CSS 被同时加载。
• @import引入的 CSS 将在页面加载完毕后被加载。

兼容性的区别

• link 标签作为 HTML 元素，不存在兼容性问题。
• @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别。

DOM可控性的区别

• 可以通过 JS 操作 DOM ，动态插入 link 标签来改变样式。
• 由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。

复用率的区别

• link 只能一次引用一个文件，每一个 link 只是一个 http 请求。
• @import 可以复用之前的 CSS 文件，当然，@import 复用文件时，在浏览器实际上是加载了多个文件，会有多个请求。

一个问题

link 引入的样式权重大于 @import 引入的样式？我们在网上搜索关于这两者的区别的时候通常会看见有上面这种说法，难道真的是这样吗？有待商榷。

经过测试，我发现 link 和 @import 这两种引入 CSS 的方式并没有权重方面概念，只是单纯的展示出 CSS 的层叠顺序罢了，即写在后边的样式会覆盖前面的样式。

在加载页面的时候，在link引入的css样式的时候会先于@import加载，但是 link 引入的样式会覆盖掉 @import 引入的样式，这是为什么呢？让我们先来回顾一下关于浏览器执行过程的一些概念：

• 加载：根据请求的 url 进行域名解析，然后向服务器发送请求，接收响应文件（如 HTML、CSS、JS、图片等）。
• 解析：对加载到的资源（HTML、CSS、JS等）进行语法解析，构建响应的内部数据结构（如 HTML 的 DOM 树，JS 对象的属性表，CSS 样式规则等）。
• 渲染：构建渲染树，对各个元素进行位置计算、样式计算等，然后根据渲染树完成页面的布局及绘制的过程（产生页面的元素）。

link 先于 @import 加载，是不是也先于 @import 渲染呢？

实际上，浏览器渲染的动作一般会执行多次的。最后一次渲染，一定是基于之前加载过的所有样式整合后渲染树进行绘制页面的，已经被渲染过的页面元素，也会被重新渲染。那么我们就可以把 @import 这种导入 CSS 文件的方式理解成一种替换，CSS 解析引擎在对一个 CSS 文件进行解析时，如在文件顶部遇到 @import，将被替换为该 @import 导入的 CSS 文件中的全部样式。现在我们明白了为何 @import 引入的样式，会被层叠掉了，虽然它后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠。

Donate