在前一篇 层叠样式表 CSS 深入学习(一) 中对 CSS 的几种引入方法做了一些简介和说明及示例，这几种引入 CSS 的方法究竟有那些大的区别和一些细微的差别，而这些差别将如何影响浏览器的处理及页面的呈现，进而影响到一个页面的性能，将是今天我所要说明的问题。
一、层叠样式表 CSS 的几种使用方法区别及各自优势：
1、优先级问题，即当样式表中对同 一标记定义有所冲突的时候，浏览器该如何解释（我们暂时抛开 !important 这个特例，因为 IE 对其支持不理想，我个人也极不喜欢自己的 CSS 文件由于加入 CSS Hack 或 important 而变得不整齐）以下不等式描述的优先级即是从低到高（针对同一 CSS 文件内相同选择器的定义冲突，写在后面的将覆盖前面的，而不同选择器针对同一标签的样式则由选择器优先级决定即 ID 选择器的样式优先于 CLASS 选择器的样式，不是很容易理解，所以尽量不要使自己的 CSS 文件大量出现重复的定义，这个以后专题讨论）：
浏览器默认 < 外部样式表 < 内部样式表 < 内嵌样式表
其 中各个浏览器自身对各种标记的优先级最低（如 UL 和 OL 默认是 2em 的 左边界(margin-left) 还是 左填充(padding-left) 呢，在这点上 IE 和多数浏览器是有所区别的，感兴趣的可以自己实验一下）然后是外部样式表，最高优先级是内嵌样式表。
2、外部样式表，绝大多数情况下我们都仅仅是使用外部样式表，这是因为外部样式表相对于其他几种具有以下优势：
代码复用：即一个外部 CSS 文件甚至可以被整个网站的网页共用，而外部 CSS 文件是默认被浏览器缓存到本地的，这将大大减少网页首次及二次下载时间；
便于维护：如果要修改网页效果，只需要修改对应 CSS 文件，而不是修改每个网页，这将便于整个开发团队分工合作互不干扰；
符合标准：将 HTML 的结构层与描述外观的 CSS 表现层相分离也正是 W3C 所倡导的网页标准；
已知缺陷：当然外部样式表也有一些不可避免的缺陷，当网速比较缓慢的时候出现加载中断会导致页面排版错误，这就是为什么我一直鼓励同事们在完成一个页面时最好在禁用 CSS 的情况下再次浏览自己的页面，我们依然需要有良好的结构和可读性；
加载速度：如果外部样式表相当小（如 10 行）那么通过 HTTP 请求加载这个样式表将可能付出相对更多的代价，所以一些页面比较简单流量超大的网站（如 百度 谷歌 等）则直接将 CSS 写在 HTML 代码中。
3、 使用 import 与 link 的区别，经常浏览网页会发现只有极少部分网站使用的是 import 而多数网站都是使用 link 引入样式表。细心的朋友也会发现我在上面描述外部样式表的时候同时示例了两种引入方法，虽然本质上这两种方法的作用都是引入 CSS 文件作用相同，但这两种方法具体还是有一些区别的：
服务提供：其中 link 是属于 XHTML 标签 link 标签除了可以加载 CSS 以外，还可以实现其他功能，如定义 RSS 定义 rel 连接属性等等；而 @import 则是 CSS 提供的一种引入方式，使用 @import 只能加载 CSS 样式表，但 @import 语法可直接在 CSS 文件内使用；
加载顺 序：当一个页面被加载（浏览）的时候， link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完成后再被加载。所以有时候浏览使用 @import 加载 CSS 的页面时开始会没有样式或闪烁，网速慢的时候则会相当明显；
兼容区别：即兼容性的差别，由于 @import 是 CSS2.1 提出的所以老式浏览器均不支持，只有在 IE5 以上的浏览器才能识别，而 link 标签无此问题；
文档模型：即文档对象模型，在使用文档对象模型(DOM)控制样式时，如使用 JavaScript 控制 DOM 去改变网页样式的时候将只对 link 标签引入的 CSS 样式生效，因为@import 不是 DOM 可以控制的；
二、内容总结备忘：
1、访问量大结构简单网页最好使用内部样式表，普通网站最好使用外部样式表，应避免使用内嵌样式；
2、尽量避免使用 @import 方法引入样式表而使用 LINK 标签；