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

一直以来写CSS的时候都没有过多的考虑使用@import的方式，最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式。其实对于这个问题在很早以前网络上就有相关的资料做了介绍这篇《don’t use @import》，英文的哦 (^。^)y-~~ ，不过不用担心，前端观察站点上有中文的翻译《高性能网站设计：不要使用@import》，同时在蓝色理想论坛上也有相关的讨论《@import 调用样式表的优势是什么呢？》，这个帖子的讨论是在2010年3月份的，大家可以看看。

为什么大家会关注这个@import呢，或许是因为它也是可以让页面加载样式，而且XHTML标签中<link />标签也是把我们的外部样式加载到页面中，于是就有朋友得到“不知道如何选择”的选择性综合症了。( # # )
咱也不是啥权威机构，更不是啥权威人士，但手中有权威指南和CSS手册，翻开查阅，发现这两样法宝上面提到的内容大致是相同的，简单概括一下：
@import像link一样，链接一个外部样式表到文档；
@import会影响到一些低端的浏览器（这个低端相信大家都懂，比如IE4，呃，不知道现在还有人在用这个没 -_”）；
@import必须是在<style>标签内，或者一个CSS文件中，并且是要在样式定义之前使用；
导入的外部样式定义会被文档中的定义覆盖（这个也就是加载顺序的东西了）；
可以在加载样式的同时定义为哪些设备显示，这个跟link方式是一样的；
这么一点概括内容如果有遗漏的大家继续补充一下哈。 < (￣￣)>
我的废话似乎多了一点，入正题，先看一下平时大家对于@import方式聊得最多的一个话题，加载顺序。既然有加载顺序，那么就肯定会有demo啦，主要的文件和代码如下所示：

复制代码

上一篇：position替代部分float进行网页元素定位

下一篇：CSS伪元素before、after设置特殊效果:制作时尚焦点图相框