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

 

 

.