CSS中link和@import的区别

最新推荐文章于 2022-06-07 15:20:43 发布

二九君

最新推荐文章于 2022-06-07 15:20:43 发布

阅读量178

点赞数

分类专栏：前端面试题 CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44019523/article/details/114186949

版权

前端同时被 3 个专栏收录

87 篇文章 3 订阅

订阅专栏

面试题

51 篇文章 1 订阅

订阅专栏

CSS

13 篇文章 1 订阅

订阅专栏

直接上代码：

<!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

二九君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中link和@import的区别

直接上代码：<!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> &lt
复制链接

扫一扫