结论先行:
相同点:
link 和 @import 都是引入外部 CSS 的方式;
不同点:
link 是 XHTML标签,不存在兼容问题;@import 是 CSS2.1 提供的语法规则,存在着一定兼容性问题,只有 IE5 以上才能支持;
再有一个呢,就是加载顺序的区别:当页面加载的时候,link 标签会同时被加载;而 @import 引入的 CSS 会等页面加载完成之后再加载;
最后呢,link 支持使用 Javascript 控制 DOM 去改变样式 (document.styleSheets),由于 DOM 方法是基于文档的,所以无法使用 @import 方式改变样式;
具体分析:
相同点:两者都是外部引用CSS的方式;
<head>
<!-- link是标签,引入外部样式表 -->
<link rel="stylesheet" href="./1.css">
<style>
/* @import 在css环境中 导入外部css */
@import url('./2.css');
.box {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
它们的区别如下:
1、从属关系的区别
link 是 XHTML标签;而 @import 是CSS提供的语法规则;
link 除了加载CSS,还可以定义RSS等,而@import就只能加载CSS
2、加载顺序的区别
页面加载时,link 会同时被加载;
而 @import 引用的CSS会等页面被加载完之后再加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)
3、兼容性的区别
link 是 XHTML 标签,无兼容问题;
而 @import 是 CSS2.1提供的,只有IE5以上才能支持;
4、DOM 可控性区别
link 支持使用 Javascript 控制 DOM 去改变样式 (document.styleSheets);
由于 DOM 方法是基于文档的,所以无法使用@import方式改变样式;