link和@import标签的区别

最新推荐文章于 2022-04-17 10:39:10 发布

原创最新推荐文章于 2022-04-17 10:39:10 发布 · 691 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #javascript

前端面试-CSS 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了link和@import在HTML中引入CSS的差异，包括兼容性、加载时机、功能和权重等方面。link是XHTML标签，无兼容性问题，同时加载CSS并支持更多功能；@import仅在CSS2以上浏览器识别，延迟加载，适用于样式导入。建议优先使用link，以避免样式冲突和资源管理问题。

1）link是XHTML标签，@import是CSS提供的
2）link是XHTML标签，因此没有兼容性问题，@import只有IE5以上的浏览器才能识别，因为@import是CSS2里面的
3）HTML文件被加载的时候，link引用的文件会同时被加载，@import引用的文件则是在页面加载完成之后才被加载，所以会出现一开始没有CSS样式，闪烁一下出现样式后的页面（网速慢的情况下）
4）@import只有导入样式表的作用，link不仅能加载CSS文件，还能定义RSS、rel连接属性等
5）link支持使用javascript操作DOM（document.styleSheets）改变样式，而@import不支持
6）link方式样式的权重高于@import，（这一部分，我看了一下他人的博客参考的博客的地址，或许可以理解为link方式的样式会覆盖掉@import方式的样式，因为浏览器的加载过程可以简单分为：加载、解析和渲染三个步骤，虽然@import方式的加载顺序在link方式之后，但是@import方式引入的样式会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠。）

拓展复习
CSS的3种引入方式：
方式一：
内联样式，也叫行内样式，是直接在HTML标签中的style属性中添加CSS

<div style="display: none;background:red"></div>

内联样式只能改变当前标签的样式。内联方式引入CSS代码会导致HTML代码变得冗长且网页难以维护。

方式二：
嵌入样式，在HTML的 head 标签中，运用 style 标签，在style标签中写CSS代码。

<head>   
    <style>
        .box1{
            background-color: red;
        }
    </style> 
</head>

嵌入样式只对当前的网页有效。当多个页面需要用到相同的CSS代码时，会导致代码冗余，并且不便于维护。

方式三：
外部引入样式，两种方式，link标签和@import方式

注意：
1）@import方式导入语句应写在样式表的开头，否则无法正确导入外部文件，并且语句结束要有分号。

2）建议使用link标签，慎用@import方式。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的问题。

<link rel="stylesheet" href="./index1.css">

    <style>
        @import url("./index2.css");
        .box1{
            background-color: red;
        }
    </style>