直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" >
<style type="text/css" >
@import url("./myCss.css");
</style>
</head>
</html>
区别:
1、从属关系
:link是html的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等;而@import是css的语法,只有导入样式表的作用。
2、加载顺序
:页面被加载时,link会和html同时被加载
而@import引入的 CSS 将在页面加载完毕后被加载
。
3、兼容性
:@import是 CSS2.1 才有的语法,所以只能在 IE5以上 才能识别;而link是 HTML 标签,所以不存在兼容性问题。
4、DOM操作
:JavaScript只能控制dom去改变link标签引入的样式,而@import的样式不是dom可以控制的。
5、权重
:link方式的样式权重高于@import的权重。
@import适用于引入公共基础样式或第三方样式,link适用于自己写的且需要动态修改的样式。
参考:https://www.cnblogs.com/li-jp/p/11636684.html