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




CSS的引入,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。