您的位置:首页网页设计HTML/CSS  → CSS文件是链接还是应该嵌入?

CSS文件是链接还是应该嵌入?

时间:2010/6/1 14:28:26来源:本站整理作者:我要评论(2)

CSS文件是链接还是应该嵌入?

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

  w3cn的阿捷说,在以前,我们通常采用2种方法使用样式表: 
  页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样: 

 

     Example Source Code [www.52css.com]
<style type="text/css">
<!--
body { background : white ; color : black ; }
-->
</style>

 
  外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用以下的代码调用。 

 

      Example Source Code [www.52css.com]
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

 
  在符合web标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

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

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

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

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

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

  总结出如下的经验:

 

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

相关视频

    没有数据

相关阅读 dnf普雷攻略机制详解 dnf普雷攻略机制BOSS打法全介绍lol亚索战场boss皮肤多少钱 lol亚索战场boss皮肤特效视频一览lol奇亚娜战场BOSS皮肤特效一览 lol奇亚娜战场BOSS皮肤特效视频dnf代号希望隐藏Boss掉落什么 dnf代号希望隐藏Boss掉落奖励介绍武士零隐藏BOSS在哪 武士零隐藏BOSS位置触发条件鬼泣5缺失可执行文件怎么办 鬼泣5缺失可执行文件exe解决方法地铁逃离dlss怎么开 地铁逃离dlss光追开启方法apex英雄文件打开失败怎么办 apex英雄文件丢失解决方法

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法