link和@import的区别有哪些

相同点

都属于外部引用 CSS 方式

不同点

1.写法不同

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

<style type="text/css" media="screen">
@import url("CSS文件");
</style>

2.加载顺序区别

A.link引用CSS时，在页面载入时同时加载；

B.@import需要页面网页完全载入以后加载。

3.兼容不同

link是XHTML标签，无兼容问题；

@import是在CSS2.1提出的，低版本的浏览器不支持。

4、从属关系区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；

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

5.DOM 可控性区别

link支持使用Javascript控制DOM去改变样式；

而@import不支持。

补充 1.写法最优方法

@import url(style.css) 和@import url(“style.css”)是最优的写法选择，兼容的浏览器最多。

从字节优化的角度来看@import url(style.css)最值得推荐。

补充 2.link 与@import 区别与选择

首页 link 和 import 语法结构不同，前者<link>是 html 标签，只能放入 html 源代码中使用，后者可看作为 css 样式，作用是引入 css 样式功能。import 在 html 使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS 文件路径地址);”放如 css 文件或 css 代码里引入其它 css 文件。

本质上两者使用选择区别不大，但为了软件中编辑布局网页 html 代码，一般使用 link 较多，也推荐使用 link。