CSS的引入方式：
1.将样式规则写在css样式文件中，再以<link>标签引入。
<link rel=stylesheet type="text/css" href="example.css">
2.使用@import引入，跟link方法很像，但必须放在<style>...</style> 中或css样式文件中
<STYLE TYPE="text/css">
@import url(css/example.css);
</STYLE>
3.使用style标签，将样式规则写在<style>...</style>标签之中。
<STYLE TYPE="text/css">
body{
color: #666;
background: #f0f0f0;
font-size: 12px;
}
td,p{
color:#c00;
font-size: 12px;
}
</STYLE>
4.使用style属性，将其直接加在标签里，也叫内嵌样式
<span style="font-size: 12px;">style</span>
这4种引入方式中，绝大多数情况下使用第一种。它的好处非常明显，样式与HTML分离，便于管理。
出于同一个理由，第四种方式被不少人唾弃，但其实在一些很个别的场景（通用性差，效果特殊，不常改动，同时CSS代码不多），那样写我觉得是个很好的选择。
第三种虽然实现了样式和HTML分离，但样式几乎没用重用性可言，故弃之。
这里值得探讨的是第二种，和第一种很类似，他们的区别有啥呢？
下面就说说 link方式引入样式 和 @import方式引入样式 的区别。
它们的区别其实主要体现在加载上
link方式引入的样式会在html文档加载完后马上加载
而@import方式引入的样式是在link方式引入的样式都加载完后，浏览器发现@import语句，然后执行之才加载
因为它本身就是一个css命令，需要等css（link引入的css，或者定义在style标签里的css）加载完了才能执行
而且，在IE浏览器里（IE6,7,8）无论任何时候，都是把所有的link方式会阻断@import方式引入的样式，把并行加载给破坏了。
下面举几个例子：
<style type="text/css">
@import url(‘a.css‘);
@import url(‘b.css‘);
</style>
在这个例子里，a.css和b.css是并行下载的，加载timeline如下：
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘a.css‘ />
<style type="text/css">
@import url(‘b.css‘);
</style>
在这个例子里，先加载完a.css，再加载b.css，加载timeline如下：
<!-- HTML代码里 -->
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘a.css‘ />
//a.css中：
@import url(‘b.css‘);
在这个例子里，还是先加载完a.css，然后浏览器发现了a.css里的@improt语句，执行它，再加载b.css，加载timeline如下：
<!-- HTML代码里 -->
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘a.css‘ />
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘proxy.css‘>
//proxy.css中
@import url(‘b.css‘);
在这个例子里，在IE浏览器上，可以很明显的看出并行加载被破坏这一点。
HTML文档加载完后，a.css和proxy.css同时加载
然后a.css的文件比proxy.css要大得多，所以当proxy.css加载完之后，a.css还在加载
但就算proxy.css已经加载完，浏览器依旧没有马上执行它里面的@import语句
而是等a.css加载完之后，再去执行proxy.css里的@import语句，去加载b.css
IE浏览器的整个加载过程的timeline如下：
而在其他浏览器上，不存在 link方式引入样式 阻断 @import方式引入样式 的问题
HTML文档加载完后，a.css和proxy.css同时加载
当proxy.css加载完后，马上执行它里面的@import语句，去加载b.css，此时a.css还在加载中
timeline如下：
考虑到所有浏览器的性能优化，为了防止样式的并行加载被破坏，果断放弃@import方式吧
除非你项目里所有的样式都用@import方式引入
原文：http://www.cnblogs.com/czf-zone/p/3601793.html