以后,我就再这里记录我学习的点点滴滴啦!~~~加油加油,积累积累!~~~
昨天有一个问题以前都没有思考过,就是css的link和import的区别,自己平时在做页面的时候都是用的link,
搜索了一下,发现主要有这些区别
1.@import是在页面下载完以后才被加载的,所以有时候浏览@import加载CSS的页面时开始会没有样式,出现闪烁现象
2.@import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.
3.@import是为css服务的,而link是为当前页面服务的。当link的css和@import的样式定义同一个样式时,在页面中用<style>@import url(xxx.css)</style>和在link的css中引入@import url(xxx.css)会得到不一样的结果。
页面
a.css
body{
background:red;
font-size:18px;
color:#0000FF;
}
b.css
body{
background-color:blue;
}
此时,页面是应用了b.css中的背景色为蓝色的样式,并且也应用了a.css中字体大小和字体颜色的样式。
而如果页面只link进a.css,在a.css中@import url(b.css)的话,那页面应用a.css的背景色为红色的样式。
4.看看别人总结的:
为什么使用@import ?
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式。
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.
为什么使用link ?
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.