首頁 > web前端 > html教學 > @import与link的区别与选择

@import与link的区别与选择

WBOY
發布: 2016-06-06 09:32:42
原創
2320 人瀏覽過

link

1 
2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
3 
登入後複製

@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进行模块化管理。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板