辉太郎看前端(link与@import的区别)

最新推荐文章于 2024-07-10 17:12:51 发布

辉Gg呀！

最新推荐文章于 2024-07-10 17:12:51 发布

阅读量135

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/m0_50512274/article/details/114040440

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的link和CSS的@import在引入外部样式表时的不同之处。link是HTML标签，页面加载时同时加载，无兼容问题，且权重较高，支持JavaScript操作；而@import在CSS中使用，页面加载完后加载，在IE5以上版本识别，权重较低，不支持JavaScript修改。

摘要由CSDN通过智能技术生成

前言

link与@import都是我们在使用css样式时用到的，虽然都是引入css样式，但是它们还是有区别的。

`link`使用场景

<head>
    <!-- link是标签，引入外部样式表 -->
    <link rel="stylesheet" href="./a.css">
</head>

`@import`使用场景

<head>
 <style>
        /* @import 在css环境中 导入外部css */
        @import url('./b.css');
        .box{
          width: 100px;
          height: 100px;
          background: green;
        }
    </style>
</head>

区别

link属于html标签。@import在css中使用表示导入外部样式表；
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
import只在 IE5 以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重；
link 支持使用javascript改变样式（document.styleSheets），后者不可