link 和 @import 有什么区别?

小草莓蹦蹦跳

已于 2023-11-03 20:16:30 修改

阅读量224

点赞数

分类专栏：每日专栏 CSS3 文章标签： css 前端

于 2020-07-21 10:55:25 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/102779004

版权

每日专栏同时被 2 个专栏收录

226 篇文章 5 订阅

订阅专栏

CSS3

55 篇文章 2 订阅

订阅专栏

结论先行：

相同点：

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方式改变样式；

小草莓蹦蹦跳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
link 和 @import 有什么区别?

link 支持使用 Javascript 控制 DOM 去改变样式（document.styleSheets），由于 DOM 方法是基于文档的，所以无法使用 @import 方式改变样式；当页面加载的时候，link 标签会同时被加载；而 @import 引入的 CSS 会等页面加载完成之后再加载；link 除了加载CSS，还可以定义RSS等，而@import就只能加载CSS。由于 DOM 方法是基于文档的，所以无法使用@import方式改变样式；页面加载时，link 会同时被加载；
复制链接

扫一扫

专栏目录