CSS的引入

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方式引入