CSS样式表:链接,还是嵌入?

css|链接|样式表

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="..."得了。
时间: 2024-12-03 15:06:03

CSS样式表:链接,还是嵌入?的相关文章

CSS样式表:链接好还是嵌入好?

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

巧妙运用CSS样式表立刻改变鼠标的样式

css|样式表 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化.而在网页上往往只有当鼠标在超级链接上时才出现一个手形,在其它地方似乎没有什么变化.这同充满动感的网页显得不怎么和谐.实际上,用 CSS可以方便地定义许多种鼠标形状.用本文介绍的方法,可以在网页的作何地方设置鼠标的不同样式. 在Dreamweaver3中设置手形鼠标样式效果的制作步骤: 1.按F7(或点击快速启动栏里那个象"八

在DreamWeaver中应用CSS样式表技巧两则

css|dreamweaver|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text&q

CSS样式表中的类

css|样式表 类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计.基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: <标识符 class=类别名>网页内容标识符> 实例: <html> <head> <title>CSS例子</title> <style type="text/css"> <!-- p.Englis

学习CSS样式表中的类

css|样式表 类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计.基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: <标识符 class=类别名>网页内容标识符> 实例: <html> <head> <title>CSS例子</title> <style type="text/css"> <!-- p.Englis

CSS入门:关于css样式表

css|样式表 这些教程是我整理的,参考小雨css 2.0手册,hve && Star Ocean得css手册,还有网上的一些资源, 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html).2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Drea

基础——关于CSS样式表

css|样式表 关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html).2.会使用Dreamweaver等常用的网页编辑器. Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单.更方便.本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用C

CSS样式表应用技巧两则

css|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text"|"C

CSS样式表:详细介绍IE7新支持的选择器

css|样式表 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS.两个最有用的项目将是 Child子和Adjacent Sibling相邻兄弟选择符.现在已是时候使用它们制作网页,并且更深入研究它们. 注意,选择器包括现行的符号,">","+"和空格(后代选择符),涉及到子选择器,相邻兄弟选择器,后代选择器,统称为选择符. 一个较好的方法 在我们研究选择符之前,弄清楚他们的不同和为什么它们是好东西的原因是个不错的主意