NO.1小菜鸟的博客，在这里记录我的学习笔记！~~~ css的link和import的区别 - 00fairy00

NO.1小菜鸟的博客，在这里记录我的学习笔记！~~~ css的link和import的区别

以后，我就再这里记录我学习的点点滴滴啦！~~~加油加油，积累积累！~~~

昨天有一个问题以前都没有思考过，就是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)会得到不一样的结果。

页面

Code

a.css

@charset "utf-8";

body{
    background:red;
    font-size:18px;
    color:#0000FF;
}

b.css

@charset "utf-8";
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也支持用户更换样式.

posted on 2009-11-10 14:54 00fairy00 阅读(354) 评论(0) 收藏举报

刷新页面返回顶部