• Blog
  • Archives
  • Search
  • Comments
  • Tags
  • Links
  • LianDan
  • RSS

有梦就有快乐[杨恒飞]

Reg | Login

人生旅途慢慢,但有梦就会有快乐!

感谢阅读
css import link 的区别
By coldstar On 2010-01-10, 3:05 PM | Category: 网站建设 | Comments: 1

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

他们有什么区别?css用import还是link好?从经典论坛和另外一个网站大概了解了一下

看到淘宝网页中大部分是这样写的
<style type="text/css" media="screen">
@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
</style>

而很多网站,比如我的 http://www.yanghengfei.com 使用的都是link
<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

而像google 百度 163等 网站他们都是直接写在网页中

当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误

他俩的作用相同
唯一的不同是服务对象不一样
@import 为CSS服务
link是为当前的页服务

经典有网友说 @import会优先执行。



外部引用CSS中 link与@import时,本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。

* 差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

* 差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS 的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。

* 差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问 题。

* 差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以 控制的。

Tags: link , import , css
« 执子之手 与子偕老 落霞与孤鹜齐飞 秋水共长天一色»
Trackbacks
点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5
1条记录访客评论
#1 杨焱
2010, May 21, 11:39 AM.
妙哉妙哉。
Quote
Leave a Comment

text(*):

  • View Model: Nomal | List
  • Category

    win7 (17) RSS 2.0 订阅这个分类

    Windows (39) RSS 2.0 订阅这个分类

    Linux (51) RSS 2.0 订阅这个分类

    WEB服务器 (73) RSS 2.0 订阅这个分类

    网站架构 (11) RSS 2.0 订阅这个分类

    存储与缓存 (2) RSS 2.0 订阅这个分类

    数据库技术 (20) RSS 2.0 订阅这个分类

    WEB开发 (22) RSS 2.0 订阅这个分类

    网站建设 (28) RSS 2.0 订阅这个分类

    安全相关 (24) RSS 2.0 订阅这个分类

    软件开发 (3) RSS 2.0 订阅这个分类

    网络观察 (20) RSS 2.0 订阅这个分类

    精彩瞬间 (20) RSS 2.0 订阅这个分类

    心情管理 (49) RSS 2.0 订阅这个分类

    个人收藏 (26) RSS 2.0 订阅这个分类

  • Calendar

    « 2010年07月 »
    日 一 二 三 四 五 六
    1 2 3
    4 5 6 7 8 9 10
    11 12 13 14 15 16 17
    18 19 20 21 22 23 24
    25 26 27 28 29 30 31
  • Random Aritcle

    [转]女人的第二次贞操!

    我是一个什么样的人?

    Win7下装天翼上网卡有技巧

    优化网站性能 提高网站速度访问速度的14条实践

    谁能将女兵和选秀联系在一起

    什么是好的流程管理?

    《极品飞车13》BMW 135i及兰博基尼跑车首次登场

    水上飘?不会吧?

    Win7成功却成为坟墓 将使微软重蹈通用覆辙

    工信部或推境外域名“白名单”制度

  • Archives

    2010年07月 (17)

    2010年06月 (68)

    2010年05月 (32)

    2010年04月 (3)

    2010年03月 (8)

    2010年02月 (4)

    2010年01月 (19)

    2009年12月 (45)

    2009年11月 (28)

    2009年10月 (10)

    2009年09月 (15)

    2009年08月 (2)

    更多...

  • Others

    Powered by SaBlog-X.

    Designed by Giki+Kula.

    有梦就有快乐[杨恒飞] All rights reserved.

    陕ICP备07009322号