[html] 第1天 页面导入样式时,使用link和@import有什么区别?
区别:
1.link是HTML标签,@import是css提供的。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。
没留意这个区别啊。.... 尴尬的很
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
先回答区别,再扩展一下。
在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> @import url(css/style.css); </style>
看上面总结的就不多说了,就补充一点@import这个使用的方法,它必须得在中使用
<style> @import url(css/style.css); </style>
可以在css文件中引入使用的
link是html标签,@import是css提供的
link引入是页面加载时候同时加载,@import是页面加载完成后加载
兼容性目前来说已经没啥了
link可以通过js操作dom动态引入样式表改变样式,@import则不能
1.link标签作用在页面,@import引用作用在css文件
2.link引用的css在页面加载时会同时加载,@import 引用的css在页面全部加载完成后开始加载
3.link引用的css可以被js的Dom获取进行操作,@import引用的css不能被Dom获取
link是html标签,@import是css提供的
link引用时会和页面一起加载,@import引用的css在页面全部加载完成之后才开始加载。
link的css可以被js获取进行操作,@import引用的css不能
link是html的标签,@import是引入css的规则
limk会和页面一起同时加载,@import在页面加载完成后才加载
link没有兼容问题,@import在ie5下不兼容
link引入的样式可以直接进行dom修改,@import引入的样式不能直接通过DOM修改
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当页面被加载后(尚未解析) 就开始加载link对应的资源
@import当页面解析到该代码对应的位置 才开始加载对应的资源
link | @import
-- | --
属于XHTML标签,除了加载CSS外,还可以定义RSS等其他事务 | 属于CSS
在页面载入时同时加载 | 页面完全载入后再加载
无兼容问题 | 低版本浏览器不支持
支持使用JavaScript控制DOM去改变样式 | 无
https://blog.csdn.net/yang_da_da/article/details/97494226
link是html标签,@import是css语法
link可引入多种文件,@import只支持css
link页面同时加载,@import页面完成后再加载
link全兼容,@import ie5+兼容
link支持js控制dom改变,@import不能
推荐使用link
1. link是XHTML标签,除了加载css外,还可以定义RSS等其他事务;
@import属于css范畴,只能加载css。
2. link引用css时,在页面载入时同时加载;
@import需要页面网页完全载入以后加载。
3. link是XHTML标签,无兼容问题;
@import是在css2.1提出的,低版本的浏览器不支持。
4. link支持使用javascript控制DOM去改变样式;
而@import不支持。
@import 需要页面网页完全载入以后加载。
这句话应该是在浏览器解析到css的@import后加载,我尝试了一下,如果浏览器载入了link的css但没有完全载入网页,此时也会载入@import的css。可以用nodejs复现一下。
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
不可以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是一种方法,不支持
这个还能有这么多区别,还真没注意到,尴尬
上面说的都很全....我也不知道补充什么了....
目前我写项目啊,包括导师代课的时候,基本不用@import了,都是link,我认为重要的就是当你在使用js操作Document获取什么子节点啊等等,只能操作到link,但是为什么操作不到@import我也不清楚,哈哈😄
答案里说的页面加载完成是指,window.onload?还是哪位大神,有可以测试的代码可以提供一下,不胜感激。我实在是没有测出来@import怎么体现出是异步加载的。。
link是XHTML标签,除了加载css 还可以定义RSS,rel链接属性等,@import只能加载css;
link在页面加载同时一起加载,而@import在页面加载之后加载;
link是XHTML标签,无兼容问题,而@import是css2.1提出的,低版本浏览器(如IE5不支持);
link可以通过js操作DOM动态引入,修改样式, 而@import不可以
那个@import引入样式除了这样 @import url("css/styles.css") 好像还可以这样吧
@import "css/styles.css"
语法规则是:@import [
二者都可以引入css,区别如下:
真的是学到了 大佬
作为一个后端 强达一波 link可以用js控制 而import不可以
文档:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link
@import 文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@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.
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.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
从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
(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 的方式插入样式。
1、link属于HTML标签,而@import是css提供的;
2、页面加载时,link会同时被加载,而@import引用的css会等到页面加载完成再加载;
3、@import只用在IE5以上被识别,而link无兼容性问题;
4、link样式权重高于@import
(本质、时间、兼容、权重)
补充:一个 at-rule 是一个CSS 语句,以at符号开头, ‘@‘ (U+0040 COMMERCIAL AT), 后跟一个标识符,并包括直到下一个分号的所有内容, ‘;‘ (U+003B SEMICOLON), 或下一个CSS块,以先到者为准。
本质都是引入文件
但是
加载顺序有差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显
从属关系区别
@import 是CSS提供的语法规则 只有导入样式表的作用
link是HTML提供的标签 不仅可以加载css 还可以定义RSS rel连接属性
加载顺序
加载页面时
link标签引入的css被同时加载
@import引入的css在页面加载完毕后加载
兼容性
@import 是CSS2.1引入的 需再IE5+
link是HTML元素 没有兼容性问题
DOM可控性区别
JS可以通过link标签的插入改变样式 但是无法使用@import的方式插入样式
区别:
1.link是HTML标签,@import是css提供的。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。
我觉得如果更详细的话,link可以设置候选样式表(应该是在Firfox中);@import作为一种规则,只能放在样式表的最上面;
[html] 第1天 页面导入样式时,使用link和@import有什么区别?
@import加载样式不是异步的,要等页面下载完毕才能加载,而link标签加载css样式是异步的,
来源:link 是html 标签,@import : CSS 提供的方式
功能:link: 只能加载 CSS, @import:加载CSS、定义RSS...
加载顺序:link:页面一起同时被加载, @import:页面下载结束后被加载,在网速比较面的情况下页面会出现闪烁的情况
兼容性:link: 不存在兼容性,@import:不支持 IE5
tip: link 支持通过 js 修改 DOM 的样式
区别如下:
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方式改变样式
link是html标签,不仅引入css,@import只能引入css
link引入样式是同步阻塞的,@import是异步的,等页面加载完才加载
link可以有js动态引入
Most helpful comment
区别:
1.link是HTML标签,@import是css提供的。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。