[html] 第1天 页面导入样式时,使用link和@import有什么区别?
haizhilin2013 opened this issue · 159 comments
[html] 第1天 页面导入样式时,使用link和@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
先回答区别,再扩展一下。
- 区别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文件中引入使用的
link以外联形式引入css,同步有阻塞@import属于新特性,异步.
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
第一次接触到这个问题
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可以控制的。