Chipmunk & Panda

-- 鼠熊部落格

All work and no play makes Jack a dull boy.

页面导入样式时，使用 link 和 @import 有什么区别？

  前端    

参考：http://www.h-camel.com/show/1.html

定义和用法

首先要明确 link 和 @import 分别是啥：

  • link 是 HTML 中的一个标签，用于链接外部资源，常见用法也就是题目中所说的用于导入样式，即链接样式表，比如本地 .css 样式文件。常规用法如下：

    1
    2
    3
    4
    5
    6
    <head>
      <link rel="stylesheet" type="text/css" href="common.css"
    </head>
    <body>
      ......
    </body>

  • @import 是 CSS2.1 出现的概念，用于将一个样式表导入到另一个样式表中，注意是要在 .css 文件或者在 <style> 标签中使用，引入时可以使用字符串，也可以使用 url 。

    1
    2
    @import 'common.css'; /* Using a string */
    @import url('normal.css'); /* Using a url */

区别

区别在网上已经总结得差不多了，就是以下几点：

  1. link 是 HTML 标签，@import 是 CSS 语法。

  2. link 引入的样式与页面同时进行加载，@import 引入的样式在等待页面加载完成后再加载。

    可以引申到 css 的性能优化问题

  3. link 没有兼容性问题，CSS2.1 需要 IE6.0 及以上版本，所以 @import 也是只能在 IE5+ 才能识别。

  4. 可以通过使用 JS 操作 DOM 插入 link 标签来改变样式，而 @import 不行。

    也可以使用 JS 将 link 标签插入到 head 标签的最后，从而实现 CSS 异步加载，减少浏览器阻塞。

  5. “link 引入的样式权重大于 @import 引入的样式”，这个说法是不合理的，参考 你真的理解@import 和 link 引入样式的区别吗