HTML与CSS 放到-张样式表中更有效。这样,创建(或修改)整修文档的外观时只在样式表 文件中修改就可以了。 在多页上应用样式 上面提到过,不仅可以将所有样式信息集中到页面的一个地方,而且还可以为其 创建-个样式表文件,它可以应用于多个页面这可以通过这样-个过程来做到 先将一个样式表存储起米,然后在其他页中再引入这个样式表文档。运用这一特 性,可以很快创建一个网页风格一致的网站。而且当需要改变网站的网页风格时 只需对这样一个样式表文件作修改,其变化就可以影响到整个网站服务器—自 动影响! 考虑这样一个网站,所有的标题都是在色背景上显示灰色文本。它们将从下面 这样一个样式表中获取颜色 1, H2, H3, H4, H5, H6 Icolor: gray: background: white 现在假设此网站有700个网页,每个网页都使用这样一个样式表。但由于某种原 因,决定将标题变为在灰色背景上显示白色。因此网站的管理员可以像下面这样 编辑样式表 H1, H2, 3, H4, H5, H6 (color: white: background: gray: y 然斤将其仔盘,改动就算完成了。这当然要比将每个标题逐一放到表格和FON标 答里要简单多了,更何况是700个页面,难道不是吗? 层叠 CSS的特性还不只这些!它还对冲突规则做了约定;这些约定指的就是层叠。例 如,在前面的例子巾,将一个样式表引入到整个网站页面中。现在要另外再插入 组网页,这些树贸共享了大部分样式,但还是有只适用于它们自己的特殊的样 式规则。可以创建另一个样式表,将其引入到这些网页中,同时附加上已经存在 的样式表,或者仅仅将这些特殊的样式放置到需要它们的网页里
14 笫一章 例如,有·页同其他700页都不同,它不是在灰色背景上显示白色,而是在深蓝 色背景上显示黄色。在这个网贞里,就可以插入这样一条规则 H1, H2, H3, H4, H5, H6 [color: yellow, background: blue; 3 而由于层叠的特性,这条规则将覆盖原来引入的“白→灰”标题。所以,理解了 层叠的特性并很好地运用它们,就可以创作出许多高质量的样式表,从而赋子网 页专业的、易于修改的外观样式。 这种能力并不仅限于制作者。网络冲浪者(或读者),也可以在某些浏览器上创建 自定义的样式表(称为读者样式表,很奇妙吧),这些样式表可以层叠制作者的样 式,和用浏览器层叠样。这样,一位色肓的读者就可以创建一种样式,使超链 接吏为醒目: A: link (color: white; background: black; 1 读者样式表几乎可以包含任何东西:如果用户弱视,则可以使文本足够大以便于 阅读;去除图像的规则以使阅读和浏览的速度更快;甚至可以将用户最喜欢的图 片放到每个文档的背景上。(当然不推荐这样做,但这是可能的。)这样,读者不 必去掉所有制作者的样式就能定制他们自己的焖页风格。 由于其样式表的可引入、叮层叠以及多样化的效果,使得CSS成为制作者和读者 们非常有用的工具 压缩文件大小 除了可视化及赋予制作者和读者的特殊能力之外,CSS还可以使文档足够小,以 缩短下载的时间。那么它是怎么做的呢?正如我们前面所提到的,很多网页都使 用表格和PO标签以获得精美的视觉效果。不幸的是,这些方法产生了大量的 HTML标记,从而使文件变大。通过将可视的样式信息分组为主要的儿部分,然 后用尽量压缩的语法去表示这些规则,就可以去掉FON标签和其他一些常用标 。这样,CSS就可以保证下载时间缩短,从而令读者更满意
HTML与CSS 为将来做准备 正如前面所提到的,HTML是一种结构化语言,而CSS是对它的一个补充:一种 样式化的语言。正基于此,W3C这个讨论和批准网络标准的主要机构正开始着手 去掉HTML中的样式标签。其原因就是样式表能够用来创建HTML标签所提供 的任何效果,所以HML就不再需要这些标签了 在写本书时,HTML40规范中有许多标签遭到了反对;也就是说它们会被分阶 段地从该语言中剔除,最终,它们将被标记为作废,即浏览器不再需要对它们提 供支持。<BO>、< BASEFONT>、<U,<STRK>、<S>和< CENTER>就属于其中之 列。随着样式表的出现,这些HTML标签会慢慢消失。 而且,HTML很可能会逐渐被可扩展标记语言(XML)所取代。XML比HTML 更复杂,但也更强大、更灵活。尽管如此,XML自身井不提供任何方式来声明像 <I>或<CER>这样的样式标签。取而代之的是,XML文档很可能会依赖样式 表来决定文档的外观。然而XML使用的样式表可能不是CSS,但会是对CSS的 某种继承,必定与CSS非常类似。所以现在学习CSS也会给制作者带来很多好 处,特别是当发展到基于XML的网络的时候。 CSS的局限 本书中也有一些CSS1没有涉及到的领域,当然这些内容就不包含在详细讨论的 范围内;有一些内容会放到第十章“CS9展望”里来计论。但是、即使是一个覆 盖所有CS1和CSS2的完全版的CSS也不能满足世界上每一个网页设计者的需 要。所以跨越CSS的一些边界是必要的。 受限的初始范围 且掌攆了正确的学习方法后,CSSI规范就显得并不那么复杂了。它包含大约 0个属性,而且其所有的内容可以在100页内打印出来,但它仍然不失为一个成 热、精致的引擎,只是网页设计的某些领域却从CSS中删去了
第一章 首先,CSSl儿乎不对表格作任何处理。读者可能公想到为表格单元设置边界这个 例子一而且网络浏览器也允许这么做一但边界并不是在任何环境下都能应 用于表格单元。CSS2为此引入了一套新的属性和行为以处理表格,但在写本书的 时候,很少有浏览器支持这样的属性和行为。 注意:从某种意义上来讲、从CSS中删去表格代表了多数人的意见,因为他们认为去格不应 该用于网页的布局。浮动的和位置固定的元素就能代替所有表格的T作,而H其功能会 更强大。但这种提法是否正确、我们在此不作任何评论。 问样,CSS不包含位置的概念。当然也可以村元素的位置稍加移动,但多数情况 是使用负边界和浮动来实现的。从某种意义上来讲,其中的所有元素都是相互关 联的。然而,CSS2有三个章节用于讲述可视化建模,其中就包含位置元素。 CSSl也不提供可下载的字体这就导致了大量关于如何适应用户系统配置和有效 的宇体的讨论。CSS2引入了某些字体处理。即便这样,问题仍未得到解决,其主 要原因是缺乏对字体格式的厂泛支持。或许可缩放向量图形( Scalable vector Graphics,SvG)能够解决部分甚至所有的问题,但要对此下一个定论是不太可 能的。 最后,CSS1觖乏对媒体类型的支持。换旬话说,CSS主要是一种屏幕设备语言, 只能用于将内容输出到计算机的显示器上。但它也有一些刈于页面媒体的支持, 像打印输出,但不多。(尽管如此,CSS1并不是一个像素级的掉制机制。)为∫ 克服这一限制,CSS2引入了媒体类型,它叮以根据文档的显示媒体创建各自的样 式表。CSS2也针对页面媒体和语音媒体特别地引入了一些属性和行为。 实现 不幸的是,使用CSS最主要的缺陷就是它在最初未能得到完全的实现。由于各种 误传、误解,混乱和低质量的控制,致使最初企图支持CS的浏览器做得一团槽。 最典型的浏览器就是 Microsoft Internet Explorer3X和 Netscape Navigator4x 它们都提出了对CSS的最初的支持,但这些浏览器都做得不完美,而且错误百出, 其至常常是适得其反,所以就更不用提对CSS2的攴持了。这些实现十分拙劣,以
HTML与CSS 致于很难分辨它们是否真的攴持CSS。而且,当试图处理某些样式时,有些致命 的缺陷往往会使浏览器崩溃,甚至锁住整个系统。 发展到 Internet Explorer4x和5x时,情况有了一些改善。尽管不能说是完美 但这些版本的浏览器至少是剔除了许多E3中的错误,而月还增加了对先前未接 受的CSS1和CSS2中的一些属性的支持 另一方亩, Opera3.5因提供对CSS的良好支持而为人所知。由于它本身就是基 于CSS!的,所以这个浏览器对属性的支持非常好,只有一些小的错误。当发行 3.6版时,几乎所有这些小错误都被修正了,尽管提供的支持还是未能超出CSS 的范围。而在3.5版以前, Opera根本就不支持CSS。 至于 Netscape的产品, Navigator47与4.0版差不多,对CSS提供的支持也没有 得到显著的改善,但不那么容易崩溃了。而 Netscape对CSs良好攴持的唯一希望 就落在了他们的 Gecko引擎上。到写本书的时候,最近的 Gecko版本巳非常优秀, 而且实际上我们就是用它(连同 Macintosh的 Internet Explorer45和5.0)来 创建了本书中的许多图 既然CSS不打算对文档的显示提供完全的控制,但总应该止网页的内容在任何浏 览器闩都能够正确显示,至少它不应该成为用户使用CSS的障碍。然而,如果有 川户正在使用过时的浏览器( Explorer3x,或许 Navigator4x),也应该通知他 们检查其浏览器的设置,以禁用样式表。这样,他们少能阅读网贞的内容、即 使这些贞面并不是我们希望他们看到的那种样式化的风格 CSS和HTML 迄今为止,我们一直将注意力放在HTML文档的结构上。实际上,这也是当今网 络发展所要面临的一个问题:多数人都忽略了文档的内部结构,而这种内部结构 和我们平时所见的结构不一样。所以,为了在网络上:创建最酷的网页,我们通常 扭曲,甚至忽略∫刚页也应该包含结构信息这一思想。 然而,这种结构却足联系HTML和CSS的组带;如果没有这个结构,它们之间根 本就会存在任何关系。为了更好地理解这一点,计我们来看一个HTML文档实 例,其标记如下,结果如图1-1所示