[html] 第1天 页面导入样式时，使用link和@import有什么区别？
haizhilin2013 opened this issue · comments
没留意这个区别啊。.... 尴尬的很
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
没留意这个区别啊。.... 尴尬的很
呵呵，查漏补缺的时候到了
发现之前也思考过这个问题，今天复习了一下。
原文链接：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;}
看上面总结的就不多说了，就补充一点@import这个使用的方法，它必须得在<style></style>中使用
<style> @import url(css/style.css); </style>
看上面总结的就不多说了，就补充一点@import这个使用的方法，它必须得在<style></style>中使用
<style> @import url(css/style.css); </style>
可以在css文件中引入使用的
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语法无法动态更改；
借鉴了大家的**
| link | @import |
|---|---|
| 属于XHTML标签，除了加载CSS外，还可以定义RSS等其他事务 | 属于CSS |
| 在页面载入时同时加载 | 页面完全载入后再加载 |
| 无兼容问题 | 低版本浏览器不支持 |
| 支持使用JavaScript控制DOM去改变样式 | 无 |
| https://blog.csdn.net/yang_da_da/article/details/97494226 |
1. link是XHTML标签，除了加载css外，还可以定义RSS等其他事务;
@import属于css范畴，只能加载css。
2. link引用css时，在页面载入时同时加载;
@import需要页面网页完全载入以后加载。
3. link是XHTML标签，无兼容问题;
@import是在css2.1提出的，低版本的浏览器不支持。
4. link支持使用javascript控制DOM去改变样式;
而@import不支持。
1.link是html标签，除了家在css文件外，还可以加载RSS其他事务，加载模版等常用的属性有rel和href
2.import是css2.1的，不支持低版本的浏览器，link没有兼容问题
3.link页面加载时同时加载，import是等网页完全加载后在加载引入的css文件
4.link是dom元素，支持操作dom和修改样式，而import是一种方法。
link和@import的区别：
link是html标签，@import是CSS提供的link的资源在页面加载时同步加载，@import是在页面完全加载后再加载的css文件link没有兼容问题，@import不支持ie5以下link是DOM元素，可以通过JavaScript动态引入样式表改变动态，@import不可以
这个还能有这么多区别，还真没注意到，尴尬
答案里说的页面加载完成是指，window.onload？还是哪位大神，有可以测试的代码可以提供一下，不胜感激。我实在是没有测出来@import怎么体现出是异步加载的。。
真的是学到了 大佬
作为一个后端 强达一波 link可以用js控制 而import不可以
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.
- 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.
加载顺序区别：页面加载时，link 会同时被加载；@import 引用的 CSS 会等页面加载完之后再加载。
这一条如何验证，或者有参考文章么。
（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 的方式插入样式。
笔记/?p=753
补充:一个 at-rule 是一个CSS 语句，以at符号开头, ‘@‘ (U+0040 COMMERCIAL AT), 后跟一个标识符，并包括直到下一个分号的所有内容, ‘;‘ (U+003B SEMICOLON), 或下一个CSS块，以先到者为准。
1
1，优先级不同，link高于@Important
2，加载优先级，link高于@Important
3，兼容性，link高于@Important
4，js可以操作link里面的css，不能操作@Important
1.link是HTML标签，@import则是由CSS提供的
其他就不太清楚了，欸呀呀
又到了查漏补缺的时候，欸嘿嘿
第一次接触到这个问题
页面导入样式时，link和@import有什么区别
答：
在页面中导入样式一共有四种方式
1.内联式 采用HTML的style属性，更新维护困难
2.嵌入式 采用HTML的style标签，只可以在该页面中使用，常用于模板语言
3.链接式 采用html的link标签引入外部的样式
4.导入样式 采用css规则引入外部的css文件，css规则必须要在style标签或者css文件中使用
<style> @import url(mycss.css) 可以不用引号 </style>链接式和导入样式的区别:
1.从属关系的区别，link属于HTML标签而@import属于css的语法规则，link可以定义RSS和rel连接属性，而@import只能加载css
2.加载顺序的区别，link和页面一起加载，@import页面加载完才加载
3.兼容性，@import较新，兼容性差
3.DOM可控性，link可控，@import不可控
4.权重区别
漏下 link没有兼容性问题，@import不兼容ie5以下
link是html的标签，在页面加载的同时进行css等文件的加载 可以通过javascript进行动态加载，且没有兼容性问题
@import是css的语法规则 只能在页面加载完后进行css的加载. 不兼容 ie5 以下的浏览器
link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS。
link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的
当页面需要使用javascript控制dom改变样式的时候，只能使用link标签，因为import不是js操作dom可以控制的。也不支持js操作dom来控制。
link是HTML的标签，import是css 的语法
link是在网页加载时加载，import是在网页加载完成以后加载
1、@import是CSS提供的语法规则，只有导入样式表的作用，而link是HTML提供的标签，可以加载CSS文件，还可以定义RSS、rel连接属性
2、加载页面时，link标签引入的CSS被同时加载，而@import引入的CSS在页面加载完之后被加载
3、link的权重比@import大
4、可以通过JS来操作dom，插入link改变样式，因为DOM方法是基于文档的，所以不能使用@import的方式插入样式
5、link是HTML元素，不存在兼容性问题，@import是CSS2.1引入的，只适用于IE5+
[html] 第1天 页面导入样式时，使用link和@import有什么区别？
1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
4、DOM：JavaScript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
5、link方式的样式权重高于@import的权重。
区别：
1、所属语法不同，link为html语法，@import为css语法
2、加载时机不同，link与页面同时加载，@import于页面加载完成后加载
3、加载方式不同，link为dom元素一部分，可通过js操作dom来进行动态加载，而@import则不可以
4、兼容性不同，@import在ie上仅仅兼容ie5.5已上版本
[html] 第1天 页面导入样式时，使用link和https://github.com/import有什么区别？
1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义其它属性；而@import是css的语法，只有导入样式表的作用。
2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载，在网速较慢的情况下可以看到先后顺序。
3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
4、DOM：JavaScript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
