link和@import的区别
【前言】
本文简单介绍下link与@import区别
【主体】
(1)@import优缺点
@import可以在css中引入其他样式表利于修改和扩展
第一种:css文件引入 @import “test1.css”; @import “test2.css”; 第二种:html中在style <style type="text/css"> @import 'test.css'; </style>
(2)link优缺点
link中使用href指向外部链接,<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件,会下载并且不会停止对当前文档的处理,这也是为什么建议使用link方式来加载css而不是使用@import。
(3)对比分析
1、属性不同
link是html提供的标签,不仅可以加载css文件,还能定义 RSS、rel 连接属性等。而 @import是css中的语法规则
2、加载顺序不同
页面打开时,link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。
3、兼容性
@import是css2.1后提出的,而link是不存在兼容问题。
4、DOM控制性
js操作DOM,可以使用link改变样式,无法使用@import的方式使用样式。
两者都是外部引用CSS的方式,但是存在一定的区别:
【link和@import的区别】
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴, 只能加载CSS。 区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。 区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。 区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。
(4)小结
了解了@import原理,就会明白它的性能并不高,过多使用它会延长浏览器渲染页面的时间。
.
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18