浏览 7907 次
锁定老帖子 主题:引入CSS
精华帖 (0) :: 良好帖 (1) :: 新手帖 (1) :: 隐藏帖 (1)
作者 正文
   发表时间:2011-05-10  
CSS
导入式与链接式的区别:
导入式:在页面加载完成后再装载CSS
<style type="text/css">
@import "mystyle.css"
</style>
链接式:在页面装载前装载CSS
  <link type="text/css" href="mystyle.css" rel="stylesheet" />
建议
1.如果引入一个CSS文件,使用链接方式
2.如果需要引入多个CSS文件,首先用链接方式引入一个“目录”CSS文件,这个“目录”CSS文件中再使用导入式引入其他CSS文件
   发表时间:2011-05-10  
请问“页面加载完成”是个什么概念?DOMContentReady?onload?还是readyState变为"interactive"或者"complete"?
0 请登录后投票
   发表时间:2011-05-10  
应该是页面所有dom加载完成吧
0 请登录后投票
   发表时间:2011-05-10  
我觉得@import的引入不在以上任何一个确定的时间点,应该是该css什么时候解析完成,或者什么时候解析了@import这一行,什么时候就开始加载吧
0 请登录后投票
   发表时间:2011-05-10  
int08h 写道
请问“页面加载完成”是个什么概念?DOMContentReady?onload?还是readyState变为"interactive"或者"complete"?

本质上,这两种方式都是为了加载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可以控制的。
0 请登录后投票
   发表时间:2011-05-10  
hyneng 写道
int08h 写道
请问“页面加载完成”是个什么概念?DOMContentReady?onload?还是readyState变为"interactive"或者"complete"?

本质上,这两种方式都是为了加载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可以控制的。


你的这4点似乎几年前就已经有文章了,我也看到过不下5次……其实我想说明的就是,我们做技术的,对于用词的精确性很重要,像是“页面加载完成”这样的词,其实是有特殊的含义的,特指onload事件发生的时刻,那么用在你的结论中,其实是不合适的
0 请登录后投票
   发表时间:2011-05-10  
少用import!
0 请登录后投票
   发表时间:2011-05-10  
liuyar 写道
少用import!

why?
0 请登录后投票
   发表时间:2011-05-10  
wjjcml1982 写道
liuyar 写道
少用import!

why?

我基本没用过,今天在一本书上看到就在博客里记一下。
0 请登录后投票
   发表时间:2011-05-10  
int08h 写道

你的这4点似乎几年前就已经有文章了,我也看到过不下5次……其实我想说明的就是,我们做技术的,对于用词的精确性很重要,像是“页面加载完成”这样的词,其实是有特殊的含义的,特指onload事件发生的时刻,那么用在你的结论中,其实是不合适的

我觉得理解就好,对于某些词语不要钻牛角尖
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics