-
- Notifications
- Fork 3.2k
-
Star 24.9k
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
[html] 第1天 页面导入样式时,使用link和@import有什么区别? #1
[html] 第1天 页面导入样式时,使用link和@import有什么区别? #1
Comments
yxkhaha
commented
Apr 17, 2019
区别: |
undefinedYu
commented
Apr 17, 2019
没留意这个区别啊。.... 尴尬的很 |
qingleizhang123
commented
Apr 17, 2019
1)从属关系的区别:link属于XHTML标签,而 @import是CSS提供的语法规则,link除了加载CSS,还可以定义RSS,定义rel连接属性等, @import就只能加载CSS。 |
haizhilin2013
commented
Apr 17, 2019
呵呵,查漏补缺的时候到了 |
xiangshuo1992
commented
May 9, 2019
•
edited
edited
发现之前也思考过这个问题,今天复习了一下。 先回答区别,再扩展一下。
在html设计制作中,css有四种引入方式。 方式一: 内联样式内联样式,也叫行内样式,指的是直接在 HTML 标签中的 style 属性中添加 CSS。 <div style="display: none;background:red"></div> 这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 方式二: 嵌入样式嵌入方式指的是在 HTML 头部中的 <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
commented
May 16, 2019
|
SSypp
commented
May 18, 2019
看上面总结的就不多说了,就补充一点 @import这个使用的方法,它必须得在<style></style>中使用 <style> @import url(css/style.css); </style> |
更新
douxiaohou
commented
Jun 4, 2019
可以在css文件中引入使用的 |
dajiaoyisheng
commented
Jun 13, 2019
link以外联形式引入css,同步有阻塞 @import属于新特性,异步. |
jojo51778
commented
Jun 14, 2019
link是html标签, @import是css提供的 |
wgh1997
commented
Jul 1, 2019
link是HTML标签.而 @import是css提供的. |
zoneasa
commented
Jul 1, 2019
1.link标签作用在页面, @import引用作用在css文件 |
qp97vi
commented
Jul 1, 2019
link是html标签, @import是css提供的 |
zhuoyan
commented
Jul 1, 2019
|
kinfeitwong
commented
Jul 2, 2019
link是html的标签, @import是引入css的规则 |
seho-dev
commented
Jul 10, 2019
html中link和 @import的区别 link是一个html标签,import是css语法 查询相关资料补充即修改: 加载顺序: link加载文档会被加载,import是等文档加载完毕之后,执行css的时候才会执行import 借鉴了大家的思想 |
Vi-jay
commented
Jul 25, 2019
link当页面被加载后(尚未解析) 就开始加载link对应的资源 |
LvyYoung
commented
Jul 27, 2019
|
Toeat
commented
Aug 2, 2019
•
edited
edited
link是html标签, @import是css语法 |
tiffany001
commented
Aug 26, 2019
|
hafrans
commented
Sep 21, 2019
https://www.qianduan.net/high-performance-web-site-do-not-use-import/ |
hafrans
commented
Sep 21, 2019
|
xuesongcc
commented
Sep 22, 2019
1.link是html标签,除了家在css文件外,还可以加载RSS其他事务,加载模版等常用的属性有rel和href |
maxlxq
commented
Sep 28, 2019
|
RQSA
commented
Oct 3, 2019
link和 @import的区别: link是XHTML标签,没有兼容性问题 |
Starscape000
commented
Oct 6, 2019
这个还能有这么多区别,还真没注意到,尴尬 |
385204401
commented
Dec 29, 2022
最重要区别在于 link 与 页面同时加载,import 是页面加载完后进行加载 |
Mr6pets
commented
Feb 1, 2023
依照其他伙伴的说法: |
oh-tycoon
commented
Feb 3, 2023
link 会随页面一起加载样式 , import 会等待页面加载完再去单独加载样式 |
widi-bytb
commented
Feb 8, 2023
1.link是HTML标签, @import是css提供的。 |
992446960
commented
Feb 17, 2023
1、link是html标签,会同步加载代码,同时也可以定义RSS,; @import 是css提供的需要在style标签中使用,异步加载代码,只能定义css |
eric755
commented
Feb 20, 2023
页面导入样式,使用link和 @import主要区别: |
kukupii
commented
Feb 21, 2023
|
baiyucraft
commented
Feb 23, 2023
1.link 是一种 HTML 标签, @import 是一种 CSS 规则; |
Baijuejoke
commented
Mar 20, 2023
•
edited
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
commented
Apr 26, 2023
link 和 @import 都是用来在 HTML 或 CSS 文件中引用外部资源的方式,但是它们有以下差异:
link 标签在文档载入时就会加载,并行加载页面和CSS文件,因此在页面渲染时 CSS 文件已经准备好了,所以页面元素可以更快的呈现出来; 而 @import 是在页面加载完后再进行加载,所以会导致页面重新渲染,因此会比 link 标签加载的时间延迟。
link 标签可以用于HTML文档、CSS文档和RSS等不同类型的文档中,可以加载各种类型的文件,而 @import 只能用于 CSS 文件中,只能加载 CSS 文件。
在使用上,link 标签是XHTML标准支持的,而 @import 不是; 在 Internet Explorer 5 以下的版本中不支持 @import,而 link 标签都可以; link标签还有一个 rel 属性,它指定了当前文档与正在链接的文档之间的关系。这种关系有很多种类型,如:icon、stylesheet、author等。而 @import 无法指定这样的关系。 综上所述,link 标签更常用于页面上的链接,而 @import 更常用于 CSS 文件的加载,如果文档中要引入 CSS 文件,最好使用 link 标签。 |
Linhongbin-1111
commented
Apr 26, 2023
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
xiaolin123888
commented
Apr 29, 2023
在页面中导入样式时,可以使用link标签或者 @import语法来实现。二者的主要区别如下:
综上所述,link标签是更加通用和灵活的方式,而且对于SEO更友好,推荐使用。但是如果需要在某些特定场景下使用 @import语法,也可以根据实际情况进行选择。 |
ChaiYuanYuan-bit
commented
May 24, 2023
1.link是html标签, @import是css提供的 |
Linhongbin-1111
commented
May 24, 2023
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
Xiangnan-display
commented
May 26, 2023
link是HTML是标签,可以引用外部资源, @import则是css提供的只能引入css文件 |
tcxiao1
commented
Aug 9, 2023
link是HTML是标签,可以引用外部资源, https://github.com/import则是css提供的只能引入css文件 |
Linhongbin-1111
commented
Aug 9, 2023
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
gavawu
commented
Aug 23, 2023
引入位置不同:link在html, @import在CSS中 |
Linhongbin-1111
commented
Aug 23, 2023
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
keenesun
commented
Oct 17, 2023
#link
# @import
|
Linhongbin-1111
commented
Oct 17, 2023
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
lili-0923
commented
Feb 1, 2024
1.从属关系的区别 |
Linhongbin-1111
commented
Feb 1, 2024
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
CodesPlex
commented
Feb 19, 2024
学到了!学多了! |
Linhongbin-1111
commented
Feb 19, 2024
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
zsf1482451437
commented
Mar 6, 2024
|
Linhongbin-1111
commented
Mar 6, 2024
via email
你好,我是林鸿斌。我已收到你的来信,谢谢你~保持开心~ 不用回复!
|
[html] 第1天 页面导入样式时,使用link和 @import有什么区别?
The text was updated successfully, but these errors were encountered: