link和@import的区别

[TieMuZhen]

前言

页面中使用CSS的方式主要有3种：

1. 行内添加style=""，
2. 页面头部内嵌<style></style>调用
3. 外面链接调用
   • link
   • @import

1、使用

link的使用

<link rel="stylesheet" href="index.css">

@import的使用

<style type="text/css">
    @import url("index.css");
</style>

2、使用区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；<link>是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义rel连接属性等。

3、加载顺序区别

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

4、兼容性区别

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

5、DOM可控性区别

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

@import最优写法

@import的写法一般有下列几种：

• @import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
• @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
• @import url(style.css) //Windows NS4, Macintosh NS4不识别
• @import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
• @import url("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道，@import url(style.css)和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。