基础:样式表CSS文件是链接 还是应该嵌入?

css|链接|样式表

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

  在以前,我们通常采用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的时候,碰到公司网络不畅,也许是因为有很多人在下载东西吧。结果页面显示出的样子完全是没有样式表的样子,熟悉的布局看不到了,所有内容从上往下排列,就像用手机在浏览网站。虽然内容还能全部看到,但我不得不花些时间去熟悉这种新的布局,浏览的时候也有一种不顺畅的感觉。

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

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

  总结出如下的经验:

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

时间: 2024-08-03 15:12:59

基础:样式表CSS文件是链接 还是应该嵌入?的相关文章

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

CSS样式表文件是使用link来调用单独的文件好呢,还是直接用<style>......</style>嵌入页面内部好呢?或者说究竟这两种方法该怎么使用呢? w3cn的阿捷说,在以前,我们通常采用2种方法使用样式表:  页面内嵌法:就是将样式表直接写在页面代码的head区.类似这样:  <style type="text/css"> <!-- body { background : white ; color : black ; } -->

串接样式表(CSS)来显示XML文件

css|xml|显示|样式表     在本章中,你将学习显示XML 文件于Microsoft Internet Explorer 5 中的第一种方法:串接样式表(CSS).串接样式表是一个包含安排XML 文件中元素相关指令的档案.因为你已经利用XML创造了自己的元素,浏览器并不知道如何适当地显示这些元素.建立串接样式表并将它链接到XML 文件中便是一种告诉浏览器如何显示文件中每个元素的方法.附加串接样式表的XML 文件可以直接在Internet Explorer 5 中被开启.你不需要使用HTM

CSS基础学习:样式表CSS简明教程

css|教程|样式表 作者:自由勇 样式表CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题.CSS是Cascading Style Sheet的简写,译为"层叠样式表单".CSS几乎可以定义所有的网页元素,CSS虽然功能强大,但平时我们用到的是很少的,最常见的有:定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变).去掉超链下划线.超链接变色等等.下面详细.简练地讲如何使用CSS. 1.CSS加在什么位置?编辑CSS时候,强烈建议使用记事本之类的文本编辑工具打

网页制作知识样式表CSS常用小技巧小结

css|技巧|网页|样式表 CSS样式表常用小技巧 · ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值. · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次:对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效. · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE 设置成 A 显示是正常的,而在 Mozilla 里必须要设成 B 才能正常显示,或者

网页学习:样式表CSS简明教程

css|教程|网页|样式表 样式表CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题.CSS是Cascading Style Sheet的简写,译为"层叠样式表单".CSS几乎可以定义所有的网页元素,CSS虽然功能强大,但平时我们用到的是很少的,最常见的有:定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变).去掉超链下划线.超链接变色等等.下面详细.简练地讲如何使用CSS. 1.CSS加在什么位置?编辑CSS时候,强烈建议使用记事本之类的文本编辑工具打开你的网页

样式表CSS简明教程

 样式表CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题.CSS是Cascading Style Sheet的简写,译为"层叠样式表单".CSS几乎可以定义所有的网页元素,CSS虽然功能强大,但平时我们用到的是很少的,最常见的有:定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变).去掉超链下划线.超链接变色等等.下面详细.简练地讲如何使用CSS. 1.CSS加在什么位置?编辑CSS时候,强烈建议使用记事本之类的文本编辑工具打开你的网页代码.找到<head

强烈推荐:非常不错的样式表CSS教程

css|教程|样式表 强烈推荐:非常不错的样式表CSS教程(目录如下) 强烈推荐:非常不错的样式表CSS教程(1) 强烈推荐:非常不错的样式表CSS教程(2) 强烈推荐:非常不错的样式表CSS教程(3) 强烈推荐:非常不错的样式表CSS教程(4) 强烈推荐教程:css教程–十步学会用css建站(全) 教程连接地址:http://jorux.com/archives/10steps-built-web-with-css

javascript实现的样式表(CSS) 格式整理与压缩_javascript技巧

样式表(CSS) 格式整理与压缩 body * { font-size:10pt; }/* ss sda */ p { clear:left; padding:5px 10px; } td , fieldset { padding : 10px ; } textarea { width:90%; height:10em; } 压缩代码 格式(多行) 格式(单行) 还原代码

书写高效的样式表(CSS)的方法

css|样式表 CSS 被吹捧的好处之一就是它能减小页面大小,由此缩短下载时间,不仅仅是首页的载入,还包括样式表被缓存以后,后续页面的载入也被加快了的那部分时间.这没错,但首页载入时间的缩短几乎看不出来,这是因为 CSS 代码往往过于冗长了.     好吧,现在一切都不同了.学点高效地进行 CSS 编码的技巧吧,让你把样式表马上裁减到最小为止.自然,你可能看不到什么惊人的改变,但对于大站来说,微小的字节减少也很重要.     有很多地方可以减少代码的长度,包括 简记属性 (shorthand p