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