link与@import的区别

引子

看到淘宝网页中这样写使用的是import, 而很多网站都是使用link，当然还有一些页面比较简单，流量很大的网站，是直接将CSS写在html代码中的。

  • 看到淘宝网页中大部分是这样写的
<style type="text/css" media="screen">
　　@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
</style>
  • 而很多网站，比如大前端使用的都是 link
<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />
  • 而像google 百度 163等网站他们都是直接写在网页中

 

首先明确：CSS 连入 HTML 有三种方式：

  • 外部引用CSS
    • 使用 link 标签引用CSS
    • 使用 @import 引用CSS
  • 内部引用CSS3
  • 内联引用CSS

因此，这个问题是限制于外部引用css的。

 

再明确：link 和 @import 的写法分别是：

  • 同在XML/HTML页面中引用时：

link：

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

@import：

<style type="text/css" media="screen"> 
　　@import url("CSS文件");
</style>

 

  • @import自己在css样式表文件中引用时：
    • @import的写法一般有下列几种：
  • @import 'style.css'      //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css"      //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css)   //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
    • 由上分析知道，
      • 从兼容性来看：@import url(style.css)  和 @import url("style.css") 是最优的选择，兼容的浏览器最多。
      • 从字节优化的角度来看：@import url(style.css) 最值得推荐。

 

再看，link 和 @import 的区别在于：

  • 归属范畴不一样：
    • link是XHTML标签，除了加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等
    • @import属于CSS范畴，只能加载CSS
  • 加载时机不一样：
    • link引用CSS时，在页面载入时同时加载
    • @import需要页面网页完全载入以后加载
    • 所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）
  • 兼容性不一样：
    • link是XHTML标签，无兼容问题
    • @import是在CSS2.1提出的，低版本的浏览器不支持，只有在IE5以上的才能识别
  • 使用dom控制样式时的差别：
    • link支持使用Javascript控制DOM去改变样式，使用javascript控制dom去改变样式的时候，只能使用link标签
    • @import不是dom可以控制的
  • @import的独特性：
    • @import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，这样做有优点也有缺点：

      • 优点：这样更利于修改和扩展

      • 缺点：会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red};

sub2.css
———————-
.myclass {color:blue}

 

 

参考：

  • http://www.dreamdu.com/blog/2007/05/11/css_link_import/
  • http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
  • http://www.daqianduan.com/2417.html

posted on 2016-11-22 20:12  Calvino  阅读(253)  评论(0)  编辑  收藏  举报

导航