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进行模块化管理。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。