css import与link的区别_经验交流

看到一些网站的页中大部分是这样写的

<style type="text/css" media="screen">
@import url("http://www.jb51.net/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等网站他们都是直接写在网页中

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

  他俩的作用相同

  唯一的不同是服务对象不一样

  @import 为CSS服务

  link是为当前的页服务

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

  外部引用CSS中 link与@import的区别

  这两天刚写完XHTML加载CSS的几种方式,其中外部引用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可以控制的。

  大致就这几种差别了(如果还有什么差别,大家告诉我,我再补充上去),其它的都一样,从上面的分析来看,还是使用link标签比较好。

时间: 2024-09-15 04:19:38

css import与link的区别_经验交流的相关文章

div+css中Class与ID的区别_经验交流

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的.打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类.因此你可以在一个页面上使用class="Frodo" ,class="Gandalf",class="Aragorn"来区分不同的故事线.还有一点非常重要的是你可以在一个文档中使用任意次数的Class.    至于ID,通常用于定义页面上一个仅出现一次的标

ul+li及css制作韩国风格菜单代码_经验交流

CSS Templates Free Download CSS WebSites Showcase CSS Web Design Article

CSS文字截取功能实现代码_经验交流

好处是: 兼容IE,firefox,Opera; 有利于内容完整性;有利于SEO; 无需后台程序处理; 可以在前台随时调节要截取的长度. 不好的地方: 不能自动判断截取长度,当字符很短的时候在Firefox中也会生成后面的省略符号. 另外在设置截取宽度的时候,要注意,尽量让文字截取完整. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

IE6,IE7和firefox对DIV的支持区别_经验交流

1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用"*+html",现在用IE7浏览一下,应该没有问题了. 现在写一个CSS可以这样: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html

详解链接的rel与target区别_经验交流

target="_blank"是否的存在是否有必要我想目前还有很多正处在一种盲区.我查阅了相关的文献,发现其实情况并非是我们所想的那样,事实上target="_blank"并非是不符合标准的,而用rel与JS的解决方案也是没有必要的,因为这是个误区,只要我们了解了rel与target的真正含义我们就清楚了其实这里本不应存在争议.下面我将我通过查阅文献所得到的知识与大家分享,我们先来了解一下target与rel的含义: target ,允许指定在什么位置显示已经选择的

重置默认样式 css reset第1/2页_经验交流

我在HTML下的默认样式中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset).每个人的用法和写法都不一样.找到一篇关于css reset的调查文章, 可以看看国外使用css reset的比例调查.这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看. 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css rese

BUTTON和INPUT的区别_经验交流

一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大. HTML 4.01规范的Forms部分指名表单有以下几种控制类型:buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之

css代码优化的12个技巧_经验交流

1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的<高效CSS选择器的最佳实践>中查看更多的细节.本文我想分享一些我在编写高性能CSS中用到的简单例子和指南.这些都是受到MDN 编写的高效CSS指南的启发,并遵循类似的格式. 一.避免过度约束  一条普遍规则,不要添加不必要的约束. 复制代码 代码如下:

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t