<link>是 html 标签，定义文档与外部资源的关系，最常见的用途是链接样式表。
引入样式表方式不同
<link>引入样式表
<head>
<link rel="stylesheet" type="text/css" href="theme.css"><!--rel(必需），定义当前文档与被链接文档之间的关系-->
</head>
@import 引入样式表
<style>
<!--必须出现在其他样式之前，引入的样式表才会被加载（加载！= 生效）-->
<!--或者 @import "theme.css" -->
@import url("theme.css");
div {
color: blue;
}
</style>
也可以在一个样式表里通过@import引入另一个样式表，然后在HTML里引入第一个样式表。
/*demo01.css*/
body {
font-size: 10px;
}
div {
color: red;
}
/*demo02.css*/
@import url(index.css);
<style>
@import "./src/demo02.css";
</style>
兼容性和加载的区别
<link>不会出现兼容性问题，@import 则需要在IE5以上才实现。
在页面加载过程中，如果是<link>导入的 CSS 样式表，CSS 样式会和内容同时加载出来。若是@import 引入的 CSS 样式表，样式会在页面加载完成后才被加载。
从属关系的区别
@import是 CSS 提供的语法规则，只有导入样式表的作用。而<link>是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
DOM控制样式时的差别
需要 javascript 控制 DOM 改变样式的时候，只能使用<link>标签，因为@import 不是 DOM 可以控制的。
4577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
