页面导入样式的几种方法的区别

页面导入样式的几种方式:

  1. link标签引入,也是当下用的最多的一种方式,它属于XHTML标签,除了能加载css外,还能定义rel、type、media等属性;这种样式加载会并行的下载资源并且不会停止对当前文档的处理。
  2. @import引入,@import是CSS提供的,只能用于加载CSS;而且该种方式引用的css会在页面加载完成后才会加载引用的css。
  3. style 嵌入方式引入,减少页面请求(优点),但只会对当前页面有效,无法复用、会导致代码冗余,不利于项目维护(缺点),此方式一般只会项目主站首页使用(腾讯、淘宝、网易、搜狐)等大型网站主页,之前有看到过都是这种方式,但后来有些也舍弃了

小结: link页面被加载的时,link会同时被加载,而 @import引用的CSS会等到页面被加载完再加载,且link是 XHTML标签,无兼容问题; link支持动态js去控制DOM节点去改变样式,而@import不支持,

猜你喜欢

转载自blog.csdn.net/m0_37686205/article/details/88377213