css @import url加载样式应用深入分析

link_b.css

@charset “utf-8”;/*===== 蓝色 =====*/.linxz {color:#0000FF;}

import_b.css

@charset “utf-8”; /*===== 黑色 =====*/.linxz {color:#000000;}

有了代码，然后这个时候不知道大家有没有兴趣猜一下页面最终显示的是什么颜色的文字呢。我是没兴趣，至于你们信不信我不知道，反正我信了。所以我直接看最终的页面效果，别惊讶，颜色都是一样的。
 
效果是一样了，但问题也跟着来了，就是大家所说的使用@import方式导入样式之后，会出现闪屏的情况，如果网速过慢样式过大导致页面被渲染延迟。这个情况到目前为止我似乎还真没碰到过，谁让我平时写页面的时候都是用link方式引入样式文件呢，罪过啊罪过，各位看官如果有兴趣的话，请自行尝试，这个不在本次测试范围内，但我相信这是有证可寻的。回归话题，目前这四个样式文件在各个浏览器中出现的情况是怎么样的呢，看下面的截图：
 
嗯，大概瞄了一下，似乎每个浏览器的表现还是存在着不少的差异，import_a.css和import_b.css出现的位置几乎没几个是相同的，再来一个图，这样或许会看得清晰一点，看不清楚那只能说明我不做设计是对的，看清楚的话，或许我可以考虑转行去做设计了。
 
回顾一下前面代码中需要注意的几点：
import_a.css这个文件是从link_a.css中@import进去的；
import_b.css这个是在link_b.css之前的<style>标签导入的；
页面中可以看到三个样式文件顺序是link_a.css、import_b.css、link_b.css；
再回到刚看到的页面加载瀑布流图中，我们可以发现import_a.css这个鸟货始终不在一个位置，不是在最后就是在前面一点，比较会倒腾啊；import_b.css这个文件也不赖，位置也是常变化。
import_a.css的位置变化