Skip to content

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

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

Description

@haizhilin2013
haizhilin2013
opened on Apr 17, 2019

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

Activity

yxkhaha

yxkhaha commented on Apr 17, 2019

@yxkhaha
yxkhaha
on Apr 17, 2019

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

undefinedYu

undefinedYu commented on Apr 17, 2019

@undefinedYu
undefinedYu
on Apr 17, 2019
Contributor

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

qingleizhang123

qingleizhang123 commented on Apr 17, 2019

@qingleizhang123
qingleizhang123
on 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

haizhilin2013 commented on Apr 17, 2019

@haizhilin2013
haizhilin2013
on Apr 17, 2019
CollaboratorAuthor

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

呵呵，查漏补缺的时候到了

haizhilin2013
added
htmlhtml
on Apr 18, 2019
xiangshuo1992

xiangshuo1992 commented on May 9, 2019

@xiangshuo1992
xiangshuo1992
on May 9, 2019 · edited by xiangshuo1992
Contributor

发现之前也思考过这个问题，今天复习了一下。
原文链接：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

tzjoke commented on May 16, 2019

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

SSypp commented on May 18, 2019

@SSypp
SSypp
on May 18, 2019

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

<style> @import url(css/style.css); </style>
haizhilin2013
added a commit that references this issue on May 28, 2019

Merge pull request #1 from haizlin/master

636fd46
douxiaohou

douxiaohou commented on Jun 4, 2019

@douxiaohou
douxiaohou
on Jun 4, 2019

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

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

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

dajiaoyisheng

dajiaoyisheng commented on Jun 13, 2019

@dajiaoyisheng
dajiaoyisheng
on Jun 13, 2019

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

jojo51778

jojo51778 commented on Jun 14, 2019

@jojo51778
jojo51778
on Jun 14, 2019

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

wgh1997

wgh1997 commented on Jul 1, 2019

@wgh1997
wgh1997
on Jul 1, 2019

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

zoneasa

zoneasa commented on Jul 1, 2019

@zoneasa
zoneasa
on Jul 1, 2019

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

qp97vi

qp97vi commented on Jul 1, 2019

@qp97vi
qp97vi
on Jul 1, 2019

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

161 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    htmlhtml

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@jangdelong@zoneasa@hafrans@maxlxq

        Issue actions
          [html] 第1天 页面导入样式时，使用link和@import有什么区别？ · Issue #1 · haizlin/fe-interview