@import与link的区别与选择

发布时间:2020-07-14 22:41:15 作者:爱上小媳妇
来源:网络 阅读:297

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可以选定要加载的媒体media。由于上述加载、兼容与IE的原因,普通站点应当尽量使用link。   

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

推荐阅读:
  1. 添加css的方式:link与@import区别
  2. link和@import的区别是什么

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

link

上一篇:web前端入门到实战:HTML/CSS - 块级非块级 & 替换非替换

下一篇:Windows Server 2016 智能DNS(四)

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》