职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 528|回复: 11

引入CSS

  [复制链接]
找不到我 发表于 2011-6-22 14:56 | 显示全部楼层 |阅读模式
导入式与链接式的区别:
导入式:在页面加载完成后再装载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-6-22 14:56 | 显示全部楼层
请问“页面加载完成”是个什么概念?DOMContentReady?onload?还是readyState变为"interactive"或者"complete"?

钰云 发表于 2011-6-22 14:56 | 显示全部楼层
应该是页面所有dom加载完成吧

话说我当年 发表于 2011-6-22 14:56 | 显示全部楼层
我觉得@import的引入不在以上任何一个确定的时间点,应该是该css什么时候解析完成,或者什么时候解析了@import这一行,什么时候就开始加载吧

ksdal 发表于 2011-6-22 14:57 | 显示全部楼层
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可以控制的。

秋秋 发表于 2011-6-22 14:57 | 显示全部楼层
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事件发生的时刻,那么用在你的结论中,其实是不合适的

Jethro 发表于 2011-6-22 14:57 | 显示全部楼层
liuyar 写道
少用import!

why?

ksdal 发表于 2011-6-22 14:57 | 显示全部楼层
wjjcml1982 写道
liuyar 写道
少用import!

why?

我基本没用过,今天在一本书上看到就在博客里记一下。

爱车车 发表于 2011-6-22 14:57 | 显示全部楼层
int08h 写道

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

我觉得理解就好,对于某些词语不要钻牛角尖


天上智喜 发表于 2011-7-17 10:05 | 显示全部楼层
哈哈 我支持你
木已 发表于 2011-7-20 19:15 | 显示全部楼层
挺好啊!!!!!!!!!!!!!!!
北大青鸟 发表于 2011-7-21 14:39 | 显示全部楼层
oh!magat!!!
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 18:57 , Processed in 0.147503 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表