CSS中 link 和@import 的区别是？

1.导入的语法不相同

link （链接式）语法为：

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

@import （导入式）语法为：

<style type="text/css">

@import url("style.css");

</style>

2.  link 和 import 语法结构不同，前者 <link> 是 html 标签，只能放入 html 源代码中使用， link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS ，定义 rel 连接属性等， @import 看作为 css 的样式，就只能加载 CSS 了；

3.使用 link 方式，浏览器将 CSS 文件和 HTML 的主体部分一同装载，所以显示出来的页面从开始就是带样式效果的；而采用 @import 方式，浏览器则会先装载完整个 HTML 文件后再装载 CSS 文件；

4.当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的；

5link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持

实验得出，@import一定要放在样式表的前面，不管是内部样式还是外部样式，都要放在前面，而且这个在css权威指南上也明确指出了。如果放在末尾就会被浏览器忽略。而如果正确使用这三种类型的样式，只是会产生样式覆盖问题，而没有权重优先问题，测试浏览器Chrome

转载于:https://my.oschina.net/u/3652781/blog/1535093