首页 >web前端 >html教程 >@import与link的区别与选择_html/css_WEB-ITnose

@import与link的区别与选择_html/css_WEB-ITnose

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>

区别

加载顺序：

　　　　link是先将css文件加载到网页，然后再进行编译。@import是先加载完html结构再加载css文件，如果网速较慢则会影响视觉效果。

　　　　link确保并行下载css文件，@import是一个一个下载。

　　　　在IE中，link会阻断@import延长加载时间，多个@import的使用还会打乱资源文件的下载顺序引发js问题。

兼容性：link是xhtml标签无兼容问题，@import是css2.1提出的所以不支持IE5以前的浏览器。

DOM支持：link支持DOM改变样式，@import不支持。

此外，link标签还可以调用js文件、声明目录等，@import只能加载css。

选择

使用link:

　　　　　link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因，普通站点应当尽量使用link。　　　

使用@import:

　　　　　大型门户网站（如淘宝）多个页面link同一个css文件会造成速度下降，@import可以在css中调入样式表，方便对css进行模块化管理。

参考资料：

高性能网站设计：不要使用@import

[讨论]@import调用样式表的优势是什么呢？

@import导入外部样式表与link链入外部样式表的区别

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

查看更多

相关文章