您的位置: 首页 > 技术文档 > 网站建设 > 样式表:链接,还是嵌入?
标准的N种死法 回到列表 RIA和AJAX分析
用户名:
密 码: 忘记密码
注册会员 游览论坛 论坛帮助
 样式表:链接,还是嵌入?

作者:aslancn 时间: 2006-08-17 文档类型:原创 来自:蓝色理想
浏览统计 total:1575 | year:1575 | Quarter:1575 | Month:1575 | Week:124 | today:22

CSS样式表,是使用<link ...>来调用单独的文件好呢,还是直接用<style>...</style>嵌入页面内部好呢?或者说究竟这两种方法该怎么使用呢?

阿捷的w3cn中,他说:

引用内容
在以前,我们通常采用2种方法使用样式表:
页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
在符合web标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

可见阿捷是十分推崇用<link>的。补充一下阿捷的话,使用<link>的好处不单单是修改起样式表很方便,而且会使用户的浏览速度加快。用户第一次打开链接了样式表的页面后,样式表会自动下载到本地缓存当中。当用户再打开另一个页面,而这个页面如果也链接了同样的样式表的时候,会从缓存中读取相关的文件,这样就会加快浏览的速度。

但是我也碰到过这种情况:有时碰到网络不顺畅的情况,页面打开以后,链接的样式表没有加载成功。这种情况造成的后果,不仅仅是页面文字的颜色、大小等等样式无法显示,更麻烦的是很可能造成整个页面的布局乱了套!

比如有一次我打开Macromedia.com的时候,碰到公司网络不畅,也许是因为有很多人在bt吧。。。结果页面显示出的样子完全是没有样式表的样子,熟悉的布局看不到了,所有内容从上往下排列,就像用手机在浏览网站。虽然内容还能全部看到,但我不得不花些时间去熟悉这种新的布局,浏览的时候也有一种不顺畅的感觉。

在做金山在线首页的时候(上一版,现在已经看不到了),我就把所有样式嵌入到了页面的<head>区。首页是一个网站流览量最大的页面,必须保证高的可靠性。而且只对首页样式表采取嵌入的方式,其他页面还是用<link>,修改样式时不会增加太多的工作量。

周末做amaoagou的首页,我对样式更进一步进行了规划:把与布局有关的样式:#head、#left之类都嵌入到页面内部,其他样式采用链接的方式。

总结一下

  • 方法一:首页完全采用嵌入的方法,其他页面均采用链接的方式。优点:这样可以保证首页在网络状况不好的情况下仍然能够正确显示。缺点:修改样式时需要修改外部样式表和首页内嵌的样式表两个地方。
  • 方法二:将负责布局的样式和其他样式分开写。首页嵌入布局的样式,链接其他样式;其他页面对于两套样式均采用链接方式。优点:修改样式时,比第一种工作量小。网络状况不好时,首页的外观不能完全保证,但至少布局不会乱。
  • 如果制作的不是符合标准的页面,比如公司产品的一个小专题,领导要求用table制作以确保专题上线速度。对于各个页面都会用到的样式:链接。对于只有这一个页面会用到,但会用到很多次的样式:嵌入<head>。对于只有这一个页面会用到且只使用一次的样式:嵌入<head>或者干脆直接写style="..."得了。

出处:蓝色理想
责任编辑:moby

◎进入论坛网站综合网页制作版块参加讨论

相关文章 更多相关链接
中文字段的几种有趣排列方式
CSS实现相同文档不同表现—40例
CSS+JS构建的图片查看器
利用CSS创造多彩文字
CSS解决未知高度垂直居中
作者文章
常见可用性错误——交互错误
常见可用性错误——表单组件错误
常见可用性错误——文案错误
常见可用性错误——布局外观错误
全网 本站 论坛
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
虫虫手工:项链出炉记
coldraw 中表格的终极解决方案
标准的N种死法
Flex2 学习笔记 Ⅰ
AS+JS的Flash网站无刷新定位技术
百事我创Flash动画征集大赛
2006 网络动画"金闪客"年度盛典
常见可用性错误——交互错误
常见可用性错误——表单组件错误
夏日·梦
栏目最新 栏目最新列表
coldraw 中表格的终极解决方案
标准的N种死法
Flex2 学习笔记 Ⅰ
AS+JS的Flash网站无刷新定位技术
Photoshop 表现国画中岩石
巧用Illustrator绘制图案
样式表:链接,还是嵌入?
事件侦听器示例汇总
Photoshop 鼠绘可爱斑点狗
你的编程语言可以这样做吗?

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文现有 5 条评论 评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 1.00


paravoice Publish at 2006-8-19 13:05:12 评分1
如果你加载link的样式表都有问题,那么这种情况下如果你把CSS写在一个文件中是不是连页面内容都下载不下来了呢?
如果LINK的形式,最起码用户得到的是最重要的:数据。
飞虫 Publish at 2006-8-19 9:01:17
对于各个页面都会用到的样式:链接。对于只有这一个页面会用到,但会用到很多次的样式:嵌入<head>。对于只有这一个页面会用到且只使用一次的样式:嵌入<head>或者干脆直接写style="..."得了。


同意~~ 对于“一个页面会用到且只使用一次的样式” 我往往就直接写了,不知道这样是不是违背了web标准了 呵呵~
yaodayizi Publish at 2006-8-18 22:04:04
我要看的是内容不是布局,如果符合标准的页面去掉CSS也一样看得很很舒服
choyi Publish at 2006-8-18 10:26:24
问题是,网络不顺畅的情况有多少呢?
就是说绝大部分情况下网络都是正常使用的,现在的网络带宽一般不至于连网页页加载不成功.偶而网络会出现突然断线的情况会导致样式没被加载,这时候我一般会重新加载(发现页面不对重新打开一次或直接刷新)一次.一般可以解决.可以说遇到这种情况应该是极少.
所以页面还是直接用link加载样式比较好。尽量避免用内嵌.

当然就想你分析的其他一些原因,可以具体对待~
ggmiao Publish at 2006-8-17 12:26:47
和我的做法一样,我也是前一段时间就决定这么做了
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
Don't Make Me Think 第2版
《Flash第一步系列》
《交互设计之路》
《Dreamweaver 从基础到实践》
《色彩管理》
《情感化设计》
《GUI设计禁忌》