CSS笔记之link和@import

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 332 字 | 阅读时长 ≈ 1 分钟
外部引入 CSS 有2种方式，`link`标签和`@import`，本文介绍下它们有何本质区别，有何使用建议。

使用方式

这是两种不同的引入外部样式的写法：

1
2
3
4
5
6
<link rel='stylesheet' href='a.css'>
Or you can use the @import rule:

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

注意

在《CSS权威指南》中写道：

@import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略，而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。

区别

  • @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
  • 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
  • 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
  • link没有兼容性问题，@import是 CSS2.1 才有的语法，故只支持IE5+， 可以忽略

    建议

强烈建议使用link标签，慎用@import方式，这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。