The Wayback Machine - https://web.archive.org/web/20210202130922/https://github.com/haizlin/fe-interview/issues/1
Skip to content

/ fe-interview

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[html] 第1天 页面导入样式时，使用link和@import有什么区别？ #1

Open
haizhilin2013 opened this issue Apr 17, 2019 · 60 comments
Open

[html] 第1天 页面导入样式时，使用link和@import有什么区别？ #1

haizhilin2013 opened this issue Apr 17, 2019 · 60 comments
Labels
html

Comments

@haizhilin2013
Copy link
Collaborator

@haizhilin2013 haizhilin2013 commented Apr 17, 2019

[html] 第1天 页面导入样式时，使用link和@import有什么区别？
@yxkhaha
Copy link

@yxkhaha yxkhaha commented Apr 17, 2019

区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。
@undefinedYu
Copy link
Contributor

@undefinedYu undefinedYu commented Apr 17, 2019

没留意这个区别啊。.... 尴尬的很
@qingleizhang123
Copy link

@qingleizhang123 qingleizhang123 commented Apr 17, 2019

1）从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则，link除了加载CSS，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。
2）加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完后再加载。
3）兼容性的区别：@import只有IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4）DOM可控性区别：通过js操作DOM,可以插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式
5）权重区别(争议)：可参考：https://www.cnblogs.com/my--sunshine/p/6872224.html
@haizhilin2013
Copy link
Collaborator Author

@haizhilin2013 haizhilin2013 commented Apr 17, 2019

没留意这个区别啊。.... 尴尬的很

呵呵，查漏补缺的时候到了
@haizhilin2013 haizhilin2013 added the html label Apr 18, 2019
@xiangshuo1992
Copy link
Contributor

@xiangshuo1992 xiangshuo1992 commented May 9, 2019 •
edited

发现之前也思考过这个问题，今天复习了一下。
原文链接：https://xiangshuo.blog.csdn.net/article/details/52885924

先回答区别，再扩展一下。

  • 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
    所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
  • 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

在html设计制作中，css有四种引入方式。

方式一： 内联样式

内联样式，也叫行内样式，指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：

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

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

方式二： 嵌入样式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例：

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

方式三：链接样式

链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。
示例：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

方式四：导入样式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：

<style>
    @import url(style.css);
</style>

或者写在css样式中

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}
@tzjoke
Copy link

@tzjoke tzjoke commented May 16, 2019

  • link是HTML标签，@import在css中使用
  • @import会block后续资源加载
  • 我记得以前网上有人测试过，在IE下@import的文件会被安排到最后下载，也就是顺序会有问题，而使用link不会有这个问题
@SSypp
Copy link

@SSypp SSypp commented May 18, 2019

看上面总结的就不多说了，就补充一点@import这个使用的方法，它必须得在<style></style>中使用

<style> @import url(css/style.css); </style>
haizhilin2013 pushed a commit that referenced this issue May 28, 2019
@xiangshuo1992
Merge pull request #1 from haizlin/master
Verified
This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
636fd46 
更新
@douxiaohou
Copy link

@douxiaohou douxiaohou commented Jun 4, 2019

看上面总结的就不多说了，就补充一点@import这个使用的方法，它必须得在<style></style>中使用

<style> @import url(css/style.css); </style>

可以在css文件中引入使用的
@dajiaoyisheng
Copy link

@dajiaoyisheng dajiaoyisheng commented Jun 13, 2019

link以外联形式引入css,同步有阻塞@import属于新特性,异步.
@jojo51778
Copy link

@jojo51778 jojo51778 commented Jun 14, 2019

link是html标签，@import是css提供的
link引入是页面加载时候同时加载，@import是页面加载完成后加载
兼容性目前来说已经没啥了
link可以通过js操作dom动态引入样式表改变样式，@import则不能
@wgh1997
Copy link

@wgh1997 wgh1997 commented Jul 1, 2019

link是HTML标签.而@import是css提供的.
linlk引入是和页面同时加载的,@import是等页面加载完成他才会加载
link没有兼容,而@import兼容到IE5
link可以通过dom动态的改变样式,而@import不能
@zoneasa
Copy link

@zoneasa zoneasa commented Jul 1, 2019

1.link标签作用在页面，@import引用作用在css文件
2.link引用的css在页面加载时会同时加载，@import 引用的css在页面全部加载完成后开始加载
3.link引用的css可以被js的Dom获取进行操作，@import引用的css不能被Dom获取
@qp97vi
Copy link

@qp97vi qp97vi commented Jul 1, 2019

link是html标签，@import是css提供的
link引用时会和页面一起加载，@import引用的css在页面全部加载完成之后才开始加载。
link的css可以被js获取进行操作，@import引用的css不能
@zhuoyan
Copy link

@zhuoyan zhuoyan commented Jul 1, 2019

  • link 是一种 HTML 标签，@import 是一种 CSS 规则；
  • link 会和页面一起加载，@import 在页面加载完成后才加载；
  • link 没有兼容性问题，@import 最低支持到 IE5.5;
  • link 引入的样式可以直接进行 DOM 修改，@import 引入的样式不能直接通过 DOM 修改；
@WYang2018fly WYang2018fly mentioned this issue Jul 2, 2019
Closed
3 of 3 tasks complete
@kinfeitwong
Copy link

@kinfeitwong kinfeitwong commented Jul 2, 2019

link是html的标签，@import是引入css的规则
limk会和页面一起同时加载，@import在页面加载完成后才加载
link没有兼容问题，@import在ie5下不兼容
link引入的样式可以直接进行dom修改，@import引入的样式不能直接通过DOM修改
@1018715564
Copy link

@1018715564 1018715564 commented Jul 10, 2019

html中link和@import的区别

link是一个html标签，import是css语法
执行顺序上，link在文档加载的时候就会被执行引入，而Import要等加载到本css之后才会加载import中的css
兼容性上，link是html标签，兼容所有浏览器，import是css2语法，所以在ie低版本上会有兼容问题

查询相关资料补充即修改:

加载顺序: link加载文档会被加载，import是等文档加载完毕之后，执行css的时候才会执行import
补充：link可以用js来操作dom，动态更改引入css内容，而import因为是css语法无法动态更改；

借鉴了大家的思想
@Vi-jay
Copy link

@Vi-jay Vi-jay commented Jul 25, 2019

link当页面被加载后（尚未解析）　就开始加载link对应的资源
@import当页面解析到该代码对应的位置 才开始加载对应的资源
@LvyYoung
Copy link

@LvyYoung LvyYoung commented Jul 27, 2019

link @import
属于XHTML标签，除了加载CSS外，还可以定义RSS等其他事务 属于CSS
在页面载入时同时加载 页面完全载入后再加载
无兼容问题 低版本浏览器不支持
支持使用JavaScript控制DOM去改变样式 无
https://blog.csdn.net/yang_da_da/article/details/97494226
@Toeat
Copy link

@Toeat Toeat commented Aug 2, 2019 •
edited

link是html标签,@import是css语法
link可引入多种文件，@import只支持css
link页面同时加载，@import页面完成后再加载
link全兼容，@import ie5+兼容
link支持js控制dom改变，@import不能
推荐使用link
@zivenday zivenday mentioned this issue Aug 6, 2019
Open
@tiffany001
Copy link

@tiffany001 tiffany001 commented Aug 26, 2019 

   1. link是XHTML标签，除了加载css外，还可以定义RSS等其他事务;
        @import属于css范畴，只能加载css。

    2. link引用css时，在页面载入时同时加载;
        @import需要页面网页完全载入以后加载。

    3. link是XHTML标签，无兼容问题;
        @import是在css2.1提出的，低版本的浏览器不支持。

    4. link支持使用javascript控制DOM去改变样式;
        而@import不支持。
@hafrans
Copy link

@hafrans hafrans commented Sep 21, 2019

https://www.qianduan.net/high-performance-web-site-do-not-use-import/
@hafrans
Copy link

@hafrans hafrans commented Sep 21, 2019

@import 需要页面网页完全载入以后加载。
这句话应该是在浏览器解析到css的@import后加载，我尝试了一下，如果浏览器载入了link的css但没有完全载入网页，此时也会载入@import的css。可以用nodejs复现一下。
@xuesongcc
Copy link

@xuesongcc xuesongcc commented Sep 22, 2019

1.link是html标签，除了家在css文件外，还可以加载RSS其他事务，加载模版等常用的属性有rel和href
2.import是css2.1的，不支持低版本的浏览器，link没有兼容问题
3.link页面加载时同时加载，import是等网页完全加载后在加载引入的css文件
4.link是dom元素，支持操作dom和修改样式，而import是一种方法。
@maxlxq
Copy link

@maxlxq maxlxq commented Sep 28, 2019

link和@import的区别：

  1. link是html标签，@import是CSS提供的
  2. link的资源在页面加载时同步加载，@import是在页面完全加载后再加载的css文件
  3. link没有兼容问题，@import不支持ie5以下
  4. link是DOM元素，可以通过JavaScript动态引入样式表改变动态，@import不可以
@RQSA
Copy link

@RQSA RQSA commented Oct 3, 2019

link和@import的区别：
（1）加载资源的限制
link是XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事物，如加载模板等。
@import只能加载CSS文件
（2）加载方式
如果用link引用CSS，则与页面同步加载
如果用@import引用CSS，则等页面完全载入后加载CSS文件，即异步加载
（3）兼容性

link是XHTML标签，没有兼容性问题
@import是在CSS2.1提出，不支持低版本的浏览器
（4）改变样式
link的标签是DOM元素，支持通过JavaScript控制DOM和修改样式，@import是一种方法，不支持
@Starscape000
Copy link

@Starscape000 Starscape000 commented Oct 6, 2019

这个还能有这么多区别，还真没注意到，尴尬
@vinceok
Copy link

@vinceok vinceok commented Jan 15, 2020

二者都可以引入css，区别如下：

  1. link是HTML标签，@import是css提供的
  2. link引入的样式与页面同时加载，@import引入的样式需要等页面加载完成后再加载
  3. link可以引入其他资源，例如rss、favicon、font，@import只能引入css
  4. link无兼容性问题，@import是CSS2.1后提出，低版本浏览器不支持
  5. link可以通过js操作DOM动态改变，@import暂不支持
@moonhx
Copy link

@moonhx moonhx commented Jan 17, 2020

真的是学到了 大佬
@zzfc
Copy link

@zzfc zzfc commented Feb 17, 2020

作为一个后端 强达一波 link可以用js控制 而import不可以
@sohoorc
Copy link

@sohoorc sohoorc commented Feb 20, 2020

文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link @import 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import
  1. link是 HTML/XHTML 标签; @import 是CSS中的规则。
  2. link 无兼容性问题; @import 兼容IE5.5以上。
  3. link 不只能引用CSS，还能引用其他资源，如：favicon; @import 只能用于从其他样式表导入样式规则。
  4. 由于link是 HTML/XHTML 标签，所以能够通过DOM进行操作； @import 无法通过DOM进行操作。
  5. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
@webVueBlog
Copy link

@webVueBlog webVueBlog commented Mar 14, 2020

A:

Difference 1: link is XHTML tag, in addition to loading CSS, can also be used to define RSS, define rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS.

Difference 2: when link references CSS, the page is loaded at the same time; @import requires the page to be fully loaded and later loaded.

Difference 3: link is XHTML tag, no compatibility problem; @import was introduced in CSS2.1 and is not supported by browsers with lower versions (IE5 and below).

Difference 4: link supports using Javascript to control the DOM to change styles; @import is not supported.

2:

Essentially, both of these are for loading CSS files, but there are subtle differences

The difference between ancestors. Link belongs to the XHTML tag, and @import is entirely a way of providing CSS.

Link tags can do a lot of other things besides loading CSS, such as defining RSS, defining rel connection properties, etc. @import can only load CSS.

  1. Differences in loading order. When a page is loaded (that is, viewed by the viewer), the CSS referenced by link is loaded at the same time, while the CSS referenced by @import is loaded when the page is all downloaded. So sometimes when you're browsing a CSS page loaded with @import, you start off with no style (just flicker) and it's obvious when the network is slow.

3 compatibility differences. Since @import is proposed by CSS2.1, old browsers do not support it. Only those above IE5 can recognize @import, while the link tag does not have this problem.

4 use dom to control style differences. When using javascript to control the dom to change the style, you can only use the link tag, because @import is not something that the dom can control.
@xiaoyucoding
Copy link

@xiaoyucoding xiaoyucoding commented Mar 23, 2020

加载顺序区别：页面加载时，link 会同时被加载；@import 引用的 CSS 会等页面加载完之后再加载。

这一条如何验证，或者有参考文章么。
@WangHngLeee
Copy link

@WangHngLeee WangHngLeee commented Apr 22, 2020

1.link 是 HTML标签，而@import 是css提供的方法。
2.link最大限度支持并行下载，在引入样式页面时同时加载；而@import需要等待样式页面加载完成后再加载，过多嵌套导致串行下载，出现FOUC
3.link可以通过rel="alternate stylesheet"指定候选样式
4.浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
5.link可以通过js操作DOM动态引入样式表改变样式，而@import必须在样式规则之前，可以在 css 文件中引用其他文件

总体来说：link 优于@import
@jangdelong
Copy link

@jangdelong jangdelong commented May 6, 2020

从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
@giggleCYT
Copy link

@giggleCYT giggleCYT commented May 24, 2020

（1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。
（2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
（3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。
（4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。
@JsonMox
Copy link

@JsonMox JsonMox commented May 26, 2020

别的不说了：
权重的问题应该是link引入的样式高于@import的样式
@zxk0nly1
Copy link

@zxk0nly1 zxk0nly1 commented May 30, 2020

1、link属于HTML标签，而@import是css提供的；
2、页面加载时，link会同时被加载，而@import引用的css会等到页面加载完成再加载；
3、@import只用在IE5以上被识别，而link无兼容性问题；
4、link样式权重高于@import
（本质、时间、兼容、权重）
@Coke-Code
Copy link

@Coke-Code Coke-Code commented Jun 1, 2020

  • 拓展性上：link支出rel属性，方便拓展也许以后出现新样式格式，@import只能加载css
  • 性能上：link和@import混用会破坏并行下载。造成网页延时。网页渲染完毕后挂载@import引入的css出发多余的渲染。参见《高性能网站设计》
  • 执行顺序：link与文档并行下载，一般情况下@import于页面全部加载完毕加载。
  • 兼容性：@import于css2.1提出。在老浏览器出现不兼容
  • 书写顺序：@import只能书写于其他CSS之前，否者视为无效语句
@IOLOII
Copy link

@IOLOII IOLOII commented Jun 3, 2020

笔记/?p=753

补充:一个 at-rule 是一个CSS 语句，以at符号开头, ‘@‘ (U+0040 COMMERCIAL AT), 后跟一个标识符，并包括直到下一个分号的所有内容, ‘;‘ (U+003B SEMICOLON), 或下一个CSS块，以先到者为准。
@424363283
Copy link

@424363283 424363283 commented Jun 4, 2020

本质都是引入文件
但是
加载顺序有差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显
@OriX0
Copy link

@OriX0 OriX0 commented Jun 29, 2020

  1. 从属关系区别

    @import 是CSS提供的语法规则 只有导入样式表的作用

    link是HTML提供的标签 不仅可以加载css 还可以定义RSS rel连接属性

  2. 加载顺序

    加载页面时

    link标签引入的css被同时加载

    @import引入的css在页面加载完毕后加载

  3. 兼容性

    @import 是CSS2.1引入的 需再IE5+

    link是HTML元素 没有兼容性问题

  4. DOM可控性区别

    JS可以通过link标签的插入改变样式 但是无法使用@import的方式插入样式
@jejuin
Copy link

@jejuin jejuin commented Aug 31, 2020

https://juejin.im/post/6866956411360772110
@githubzml
Copy link

@githubzml githubzml commented Oct 22, 2020

  1. link加载 并行加载 提高性能 加载时间短
  2. @import 开始解析css后遇到@import 才开始加载 串行加载 页面渲染时间会变长
@ForeveHG ForeveHG mentioned this issue Oct 26, 2020
Open
@shandamengcheng
Copy link

@shandamengcheng shandamengcheng commented Nov 24, 2020

区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

我觉得如果更详细的话，link可以设置候选样式表（应该是在Firfox中）；@import作为一种规则，只能放在样式表的最上面；
@Missmisery
Copy link

@Missmisery Missmisery commented Jan 5, 2021

[html] 第1天 页面导入样式时，使用link和@import有什么区别？

@import加载样式不是异步的，要等页面下载完毕才能加载，而link标签加载css样式是异步的，
@DugBiu
Copy link

@DugBiu DugBiu commented Jan 13, 2021

来源：link 是html 标签，@import : CSS 提供的方式
功能：link： 只能加载 CSS， @import：加载CSS、定义RSS...
加载顺序：link：页面一起同时被加载， @import：页面下载结束后被加载，在网速比较面的情况下页面会出现闪烁的情况
兼容性：link： 不存在兼容性，@import：不支持 IE5

tip: link 支持通过 js 修改 DOM 的样式
@sunnysyy
Copy link

@sunnysyy sunnysyy commented Jan 15, 2021

区别如下:
link:
1、在html代码中使用,用来引入外部文件,不仅仅是css文件
2、link引入的css文件和页面同时加载
3、link是html标签,没有兼容问题
4、js可以操作DOM,动态插入link标签来改变样式
@import:
1、在css代码中使用,并且要优先于除了@charset的其他任何css规则
2、@import引入的css文件要在页面加载完以后才加载
3、@import是css2.1之后引入,低版本浏览器有兼容问题
4、js无法使用@import方式改变样式
@ShaneQin
Copy link

@ShaneQin ShaneQin commented Jan 16, 2021

link是html标签，不仅引入css，@import只能引入css
link引入样式是同步阻塞的，@import是异步的，等页面加载完才加载
link可以有js动态引入
@Axiaomo
Copy link

@Axiaomo Axiaomo commented Jan 21, 2021

1
@123ming
Copy link

@123ming 123ming commented Jan 21, 2021

1，优先级不同，link高于@Important
2，加载优先级，link高于@Important
3，兼容性，link高于@Important
4，js可以操作link里面的css，不能操作@Important
@YaoYiShu
Copy link

@YaoYiShu YaoYiShu commented Jan 22, 2021

link和@import区别

  1. link是HTML标签，@import 是css提供的
  2. link引入的样式是页面加载时同时加载，而@import 是等到页面加载完再加载
  3. link没有兼容性问题，@import兼容到IE5以上
  4. link可以通过js操作DOM动态引入样式表改变样式，而@import不可以
@xblcx
Copy link

@xblcx xblcx commented Jan 22, 2021

link 和 @import区别

link是html标签，@import是css提供的
页面加载，页面加载完毕后执行css文件中的@import
兼容性，@import兼容到IE5以上
DOM可以操作link，但是@import不行
@a51427051
Copy link

@a51427051 a51427051 commented Jan 27, 2021

  1. link是在html中引入的，@import是在css中引入
  2. link在加载html时加载，但是如果@import实在外联css文件中hi用，那就会在最后加载
  3. css 同样权重的样式优先级： 行内，内联，外联，导入
  4. link无兼容问题，@import需要 IE5以上
@Linhongbin-1111
Copy link

@Linhongbin-1111 Linhongbin-1111 commented Jan 29, 2021

[html] 第1天 页面导入样式时，使用link和@import有什么区别？

[html] 第1天 页面导入样式时，使用link和@import有什么区别？

1、link是 HTML 标签，@import 是 css 提供的；
2、link在页面加载时同时加载，而@import在页面加载完成后才加载；
3、link没有兼容性问题，@import不兼容 IE5；
4、link可以通过 JS 操作dom去改变css样式表，而@import不能；
@Suiyue96
Copy link

@Suiyue96 Suiyue96 commented Feb 1, 2021 •
edited

1.本质：link 是 HTML的标签，而@import 是css提供的方法。
2.兼容：link兼容所有浏览器，而@import不兼容IE5
3.加载：link与页面同时加载，@import是页面加载完之后才加载
4.DOM操作：link支持DOM操作改变样式，@import不支持DOM
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
html