当前位置：网站首页>link与@import导入外部样式的区别

link与@import导入外部样式的区别

2022-07-29 05:10:00 【冰眸js】

差别1：link属于XHTML标签；@import完全是css提供的一种方式。

　　　 link标签除了可以加载css外，还可以做很多其他事件；比如：定义RSS，定义rel连接属性等。

差别2：输入方式

@import输入方式

1 <head>
2 <meta charset="utf-8">
3 <title>css基础语法</title>
4 <style type="text/css">
5     @import url("目标文件路径及文件名")；
6 </style></head>

link输入方式

1 <head>
2 <meta charset="utf-8">
3 <title>css基础语法</title>
4      <link rel= "stylesheet" type="text/css" href="目标文件路径及文件名" />
5 </style>
6 </head> 

 差别3：加载顺序不同，link引用的css会同时被加载；@import引用会等到页面全部被下载完再被加载，所以有时候浏览@import加载css页面时开始没有样式。

 

差别4：兼容性的差别：@import是css2.1提出；浏览器IE5以上的版本才能识别。link没有兼容性问题。

差别5：使用dom控制样式时的差别：当使用JavaScript控制dom去改变样式的时候，只能使用link标签。因为@import不是dom可以控制的。

原网站

版权声明
本文为[冰眸js]所创，转载请带上原文链接，感谢
https://blog.csdn.net/bingmoujs/article/details/123241238

边栏推荐

猜你喜欢

随机推荐