Skip to content
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.

Sign up for GitHub

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 · 151 comments
Open

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

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

Comments

@haizhilin2013
Copy link
Collaborator

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

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

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

@qingleizhang123
Copy link

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 added the html html label Apr 18, 2019
@xiangshuo1992
Copy link
Contributor

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 commented May 16, 2019

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

@SSypp
Copy link

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
636fd46 
更新
@douxiaohou
Copy link

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

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

可以在css文件中引入使用的

@dajiaoyisheng
Copy link

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

@jojo51778
Copy link

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

@wgh1997
Copy link

wgh1997 commented Jul 1, 2019

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

@zoneasa
Copy link

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 commented Jul 1, 2019

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

@zhuoyan
Copy link

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 tasks
@kinfeitwong
Copy link

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

@seho-dev
Copy link

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 commented Jul 25, 2019

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

@LvyYoung
Copy link

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

@Toeat
Copy link

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 

   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 commented Sep 21, 2019

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

@hafrans
Copy link

hafrans commented Sep 21, 2019

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

@xuesongcc
Copy link

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

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

@385204401
Copy link

最重要区别在于 link 与 页面同时加载，import 是页面加载完后进行加载

@Mr6pets
Copy link

Mr6pets commented Feb 1, 2023

依照其他伙伴的说法：
link是XHTML标签引入外部文件包含 但不限制于css,link同步加载，且兼容性好，权重高于@import
@import 为css 提供属性，只能引入css文件 且等页面加载完成后加载 对于老旧浏览器 兼容性或许不优化

@oh-tycoon
Copy link

link 会随页面一起加载样式 ， import 会等待页面加载完再去单独加载样式
权重不一样 不一样

@widi-bytb
Copy link

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

@992446960
Copy link

1、link是html标签，会同步加载代码，同时也可以定义RSS,；@import 是css提供的需要在style标签中使用，异步加载代码，只能定义css
2、link不存在兼容问题，@import ,IE5以上才支持
3、link可以通过javascript操作DOM动态修改样式；@import不行

@eric755
Copy link

eric755 commented Feb 20, 2023

页面导入样式，使用link和@import主要区别：
1、本质：link是html标签，除加载css外，还可用于加载其他资源，而@import属于css的规范，只能用于导入css。
2、时机：link在加载页面的同时加载，后者则需等待页面加载完全后载入（导致网速慢时会出现css样式闪烁问题）。
3、兼容：link没有兼容性，后者是低版本浏览器有不支持情况（因为@import是css2.1提出的）。
4、操作：link可以使用js操作DOM来添加引入和修改样式，后者不支持。

@kukupii
Copy link

kukupii commented Feb 21, 2023

  1. link属于html标签，@import属于css。
  2. link比@import兼容性好。
  3. link会在页面加载时同步加载，@import在页面加载结束后加载。
  4. link支持通过js操控DOM修改样式，@import不支持。

@baiyucraft
Copy link

1.link 是一种 HTML 标签，@import 是一种 CSS 规则；
2.link 会和页面一起加载，@import 在页面加载完成后才加载；
3.link 没有兼容性问题，@import 最低支持到 IE5.5;
4.link 引入的样式可以直接进行 DOM 修改，@ImPorTT 引入的样式不能直接通过 DOM 修改

@Baijuejoke
Copy link

Baijuejoke commented Mar 20, 2023 •
edited

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

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)

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

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持

@Dolov
Copy link

Dolov commented Apr 26, 2023

link 和 @import 都是用来在 HTML 或 CSS 文件中引用外部资源的方式，但是它们有以下差异：

  1. 加载的时间不同：

link 标签在文档载入时就会加载，并行加载页面和CSS文件，因此在页面渲染时 CSS 文件已经准备好了，所以页面元素可以更快的呈现出来；

而 @import 是在页面加载完后再进行加载，所以会导致页面重新渲染，因此会比 link 标签加载的时间延迟。

  1. 作用范围不同：

link 标签可以用于HTML文档、CSS文档和RSS等不同类型的文档中，可以加载各种类型的文件，而 @import 只能用于 CSS 文件中，只能加载 CSS 文件。

  1. 兼容性不同：

在使用上，link 标签是XHTML标准支持的，而 @import 不是；

在 Internet Explorer 5 以下的版本中不支持 @import，而 link 标签都可以；

link标签还有一个 rel 属性，它指定了当前文档与正在链接的文档之间的关系。这种关系有很多种类型，如：icon、stylesheet、author等。而 @import 无法指定这样的关系。

综上所述，link 标签更常用于页面上的链接，而 @import 更常用于 CSS 文件的加载，如果文档中要引入 CSS 文件，最好使用 link 标签。

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Apr 26, 2023 via email

@xiaolin123888
Copy link

在页面中导入样式时，可以使用link标签或者@import语法来实现。二者的主要区别如下：

  1. 加载方式：link标签会同时加载页面和样式，而@import语法会先加载页面，再加载样式。

  2. 兼容性：link标签在所有主流浏览器中都被支持，而@import语法在旧版本的浏览器中可能不被支持。

  3. 应用场景：link标签可以用于导入不同的文档类型，如HTML、XML和SVG等。而@import语法只能用于导入CSS文件。

  4. 加载顺序：link标签导入的样式表按照它们在页面中的位置顺序进行加载，而@import语法导入的样式表会在页面加载完成后才开始加载。

  5. DOM可访问性：link标签可以通过JavaScript访问，而@import语法无法通过JavaScript访问。

综上所述，link标签是更加通用和灵活的方式，而且对于SEO更友好，推荐使用。但是如果需要在某些特定场景下使用@import语法，也可以根据实际情况进行选择。

@ChaiYuanYuan-bit
Copy link

1.link是html标签，@import是css提供的
2.link随html加载时同步加载，@import在引入样式后再加载。
3.link没有兼容性问题
4.link支持js的dom操作，@import不支持

@Linhongbin-1111
Copy link

Linhongbin-1111 commented May 24, 2023 via email

@Xiangnan-display
Copy link

link是HTML是标签，可以引用外部资源，@import则是css提供的只能引入css文件
link会与页面同时加载，@Impot则需要等待页面加载完毕再进行加载，会有阻塞
link标签不存在兼容性问题，@Impot则是css2.0后推出的，ie5往下的不支持
link标签可以进行样式添加，@Impot也不行

@tcxiao1
Copy link

tcxiao1 commented Aug 9, 2023

link是HTML是标签，可以引用外部资源，https://github.com/import则是css提供的只能引入css文件
link会与页面同时加载，https://github.com/Impot则需要等待页面加载完毕再进行加载，会有阻塞
link标签不存在兼容性问题，https://github.com/Impot则是css2.0后推出的，ie5往下的不支持
link标签可以进行样式添加，https://github.com/Impot也不行

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Aug 9, 2023 via email

@gavawu
Copy link

gavawu commented Aug 23, 2023

引入位置不同：link在html，@import在CSS中
兼容性问题： link没问题，@import存在兼容性问题
加载顺序不同：link同步页面加载，不存在渲染阻塞。@import需要在样式表加载完后再引入，因此可能在渲染之前存在阻塞

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Aug 23, 2023 via email

@keenesun
Copy link

#link

  1. html标签，可以被js操作
  2. 页面加载时同步载入，会造成页面渲染阻塞
  3. link是xhtml标准，不存在兼容性问题

#@import

  1. css提供
  2. 等页面加载完毕后载入
  3. 不兼容ie5以下（css2.1才提出）

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Oct 17, 2023 via email

This was referenced Oct 17, 2023
Open
Open
@keenesun keenesun mentioned this issue Oct 25, 2023
Open
@lili-0923
Copy link

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的方式插入样式。

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Feb 1, 2024 via email

@CodesPlex
Copy link

学到了！学多了！

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Feb 19, 2024 via email

@zsf1482451437
Copy link

link @import
除了引入CSS外，还可以引入图标 只能引入css
属于html元素，当浏览器解析HTML文档时，它会立即加载和应用<link>引入的CSS。 外部样式表被下载和解析后才会被加载和应用。这可能会出现未样式化的内容，也就是所谓的FOUC（Flash of Unstyled Content）。
可并行加载多个样式表 按照它们在CSS中的顺序依次加载
可通过JavaScript动态创建和修改href属性，动态选择样式表 x
支持媒体查询 x

@Linhongbin-1111
Copy link

Linhongbin-1111 commented Mar 6, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests