link和@import的区别
... 2025-7-10 大约 1 分钟
# link
<head>
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" />
</head>
1
2
3
2
3
- link 是 html 的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
- 页面被加载时，link 会和 html 同时被加载
- link 是 HTML 标签，不存在兼容性问题。
- javascript 可以控制 dom 去改变 link 标签引入的样式
- link 方式的样式权重高于 @import 的权重
# @import
<head>
<style type="text/css">
@import url('./myCss.css');
</style>
</head>
1
2
3
4
5
2
3
4
5
- @import 是 css 的语法，只有导入样式表的作用。
- @import 引入的 CSS 将在页面加载完毕后被加载。
- @import 是 CSS2.1 才有的语法，所以只能在 IE5 以上 才能识别
- @import 的样式不是 dom 可以控制的。
# @import 最优写法
/* Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 */
@import 'style.css';
/* Windows IE4/ NS4, Macintosh IE4/NS4不识别 */
@import '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');
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
@import url(style.css) 和 @import url("style.css")是最优的选择，兼容的浏览器最多。
从字节优化的角度来看 @import url(style.css) 最值得推荐。
# 总结
@import 是依赖 css 的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在 dom 树渲染完成后才会渲染，并且不能被 js 动态修改。
相比之下 link 兼容性较好，且 dom 元素的样式可以被 js 动态修改，又因为 link 的权重高于 @import
所以 @import 适用于引入公共基础样式或第三方样式，link 适用于自己写的且需要动态修改的样式。