欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

link和@import的区别

程序员文章站 2022-07-09 09:30:42
...

【前言】

     本文简单介绍下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原理,就会明白它的性能并不高,过多使用它会延长浏览器渲染页面的时间。

 

 

.