CSS引入方式-CSS学习笔记（一）

　　在HTML中，CSS的引入方法主要有行内式、内嵌式、导入式、链接式4种。行内式和嵌入式不多说了，主要谈谈导入式和链接式的区别和实际开发中的联系。

　　首先，就是语法不同。举个栗子。

　　　　链接式：

1 <link rel="stylesheet" type="text/css" href="xxx.css"/>

　　　　导入式：　　　　　　　　　　

1 <style type="text/css">
2     @import "xxx.css";
3 </style>

　　其次，导入式和链接式的显示效果也略有不同。使用导入式时，会在整个页面加载完毕后再加载CSS文件，对于有的浏览器来说，如果网页体积较大，可能会出现先显示无样式的页面然后闪烁一下后再出现设置样式后的效果。使用链接式时，会在加载页面主题部分之前加载CSS文件，这样显示出来的网页一开始就带有样式效果。对于比较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，这样如果使用链接式引入样式文件，就需要多个语句分别引入。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引入一个总的CSS文件，在这个文件中再导入其他独立的CSS文件，链接式不具备这个优点。

　　最终的建议是：如果只引入一个CSS文件，使用链接式。如果要引入多个CSS文件，首先使用链接式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式导入其他CSS文件。另外，如果希望由js来动态决定引入哪个CSS文件，则只有使用链接式才能实现。

　　（本文由博主摘抄自《CSS设计彻底研究》）