本文主要包含import,加载样式等相关知识,佚名 希望在学习及工作中可以帮助到您
一直以来写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啦，主要的文件和代码如下所示：
嗯，import_a.css作为存放在CSS样式文件中导入的代表，表现的让人有点迷糊，搞不清楚这到底是为什么。而import_b.css这鸟货就相对乖多了，如果不是根据@import出现的位置来加载样式，那么就是在link的样式文件加载完之后开始加载@import的样式（这个时候或许就是在页面dom全部加载完之后再加载样式的关键了，不过目前我现在测试的demo中并没有更多的加载元素，有兴趣的同学要不试试看？）
以上的一些内容主要描述的一点就是@import出现的方式不同，也间接着影响着页面加载次序。但无论是怎么样的一个加载情况，最终被浏览器解析后的渲染页面的样式情况十分一致，也就是为什么我们看到页面效果是一致的关键因素了。
嗯，终于把这篇内容写完了，不晓得这个东西大家能否理解，写在最后就一句话：@import导入的样式虽然会影响页面加载的瀑布流，但是不会影响CSS对页面的渲染结果；对页面渲染结构有影响的仅仅只是CSS出现的位置。
想到一点，其实对于@import这个东西可以在项目前期的时候将页面分割成多个模块，然后通过@import导入样式，这样便于管理和维护，最终在项目发布的时候可以通过JS或者JAVA等一系列的程序来完成CSS合并，将@import的样式直接引入到样式文件中，目前我知道的工具有鬼哥的mergeCSS和涛哥的CSSgaga（这个东西我具体没用过，但听说可以，如果不可以的话，别拿鸡蛋砸我，直接拿鸡蛋给我，我做蛋饼吃。）
为什么大家会关注这个@import呢，或许是因为它也是可以让页面加载样式，而且XHTML标签中<link />标签也是把我们的外部样式加载到页面中，于是就有朋友得到“不知道如何选择”的选择性综合症了。( # ▽ # )
咱也不是啥权威机构，更不是啥权威人士，但手中有权威指南和CSS手册，翻开查阅，发现这两样法宝上面提到的内容大致是相同的，简单概括一下：
@import像link一样，链接一个外部样式表到文档；
@import会影响到一些低端的浏览器（这个低端相信大家都懂，比如IE4，呃，不知道现在还有人在用这个没 -_”）；
@import必须是在<style>标签内，或者一个CSS文件中，并且是要在样式定义之前使用；
导入的外部样式定义会被文档中的定义覆盖（这个也就是加载顺序的东西了）；
可以在加载样式的同时定义为哪些设备显示，这个跟link方式是一样的；
这么一点概括内容如果有遗漏的大家继续补充一下哈。 < (￣︶￣)>
我的废话似乎多了一点，入正题，先看一下平时大家对于@import方式聊得最多的一个话题，加载顺序。既然有加载顺序，那么就肯定会有demo啦，主要的文件和代码如下所示：
| IE 6 | IE 7 | IE 8 | FirFox 8 | Safari 4 | Chrome 15 | Opera 11.11 |
|---|---|---|---|---|---|---|
| 在link_a.css加载之后立即加载import_a.css | 在所有的link加载之后开始加载import_a.css | 将页面中的出现的三个样式按出现的次序引入加载完之后，加载link_a.css中的import_a.css | 在将页面中的link加载完之后，再加载页面中的@import，最后按照link中出现的@import加载样式 | 同IE 7 | 同IE 8 | 同FireFox 8 |
嗯，import_a.css作为存放在CSS样式文件中导入的代表，表现的让人有点迷糊，搞不清楚这到底是为什么。而import_b.css这鸟货就相对乖多了，如果不是根据@import出现的位置来加载样式，那么就是在link的样式文件加载完之后开始加载@import的样式（这个时候或许就是在页面dom全部加载完之后再加载样式的关键了，不过目前我现在测试的demo中并没有更多的加载元素，有兴趣的同学要不试试看？）
以上的一些内容主要描述的一点就是@import出现的方式不同，也间接着影响着页面加载次序。但无论是怎么样的一个加载情况，最终被浏览器解析后的渲染页面的样式情况十分一致，也就是为什么我们看到页面效果是一致的关键因素了。
嗯，终于把这篇内容写完了，不晓得这个东西大家能否理解，写在最后就一句话：@import导入的样式虽然会影响页面加载的瀑布流，但是不会影响CSS对页面的渲染结果；对页面渲染结构有影响的仅仅只是CSS出现的位置。
想到一点，其实对于@import这个东西可以在项目前期的时候将页面分割成多个模块，然后通过@import导入样式，这样便于管理和维护，最终在项目发布的时候可以通过JS或者JAVA等一系列的程序来完成CSS合并，将@import的样式直接引入到样式文件中，目前我知道的工具有鬼哥的mergeCSS和涛哥的CSSgaga（这个东西我具体没用过，但听说可以，如果不可以的话，别拿鸡蛋砸我，直接拿鸡蛋给我，我做蛋饼吃。）