第一章 后再轻轻点击鼠标即可。甚至,文本和图像可以在一起显示,而且要创建网页所 需的所有工具只是一个纯文本编辑器。这就显得非常自由、非常开放,而且网页 的外观也非常漂亮。 于是网站开始到处萌生。个人杂志网站、大学网站、公司网站及其他各种各样的 网站纷至沓来。然而,随着网站数量的增加,对产生新的网页效果的HTML标签 的需求也相应增加了。网页制作者也就开始有了使用粗体或者斜体文本的需求 当时,HTML并不具备处理这类需求的能力。读者可能需要强调一小部分文本, 但你无法保证它一定变为斜体一或许粗体,甚至是不同颜色的正常字体,这 依赖于用户的浏览器及其设置。但是没有任何措施能保障制作者所创作的就是读 者所看到的。 由于种种压力,像<B>和<I>这样的标记元秦开始引入到语言中。突然,一种结 构化语言开始出现∫。 乱作一团 几年后,我们同时也继承了这个过程所带来的内在缺陷。例如,HTML3.2和 HTML40的大部分内容都专注于外观上的考虑。至于通过FN元素来控制文本 颜色和大小,对文档和表格应用背景颜色和图像,对表格单元内容的分隔和填充 以及使用以烁的文本字符,所有这些都成了最初要求“尽量控制!”所带来的产 物。 想知道为什么这是一件坏事吗?不妨对某公司网站的网页中的标记进行观察。把 那些大量的标记同有用的信息进行比较,可能会令人大吃一惊。更坏的是,对于 大多数网站米说,表格和FO标签儿乎组成了整个标记网页,但它们没有表达任 何真正的意义。而从结构的立场来看,这些刈贞仅比随机的字符串好那么一点点。 例如,假设有个页标题,制作者使用的是FON标答而不是像H这样的标题标签, 如!下 <FONT SIZE=+3"FACE="Helvetica"COLOR="red>Page Title</FONT>
HTML与CSS 从结构的观点来说,FOM标签毫无意义,这使得文档儿乎无用。比如,PON标 签会给支持语台的浏览器带来什么好处呢?如果制作者使用标题标答而非FN标 签,那么语音浏览器还可以用某种语音格式来读取标题文本。但是对于FON标 签,浏览器却没有办法区分不问的文本。 制作者为什么要这样使用呢?因为他们想让读者看到的网页跟他们设计的一样 使用结构化的HTML标记将会放弃对网页外观的许多控制,而且理所当然地不允 许过去几年中曾流行的那种密密麻麻的网页设计。 那么问题出在哪里呢?考虑下面的因素: 非结构化的网贞使内容索引变得很难。一个真正强大的搜索引擎应该允许用 户按页面标题搜索,或者是页面内的子标题,或者仪仪是段落文本,或仅仅 是那些标记为重要的段落。然而,为了做到这点,页的内容必须包含在 某些结构化标记内一这正是大多数网页缺乏的那种标记。 结构的缺乏降低了可访问性。设想…下,盲人主要通过语音浏览器来浏览 页。那他将如何做选择呢:是允许浏览器阅读章节标题,进而对感兴趣的章 节进行选择呢?还是那种缺乏结构的,强迫阅读所有内容,而且对于哪些是 标题,哪些是段落,哪些东卢是重要的都亳无指示的贞呢? 高级的页面表现力只可能通过某种文档结构米达到。设想某个贞只显示了 章节标题而每个章节旁都带有一个箭头,那么用户就能够决定哪些章节适 合他,从而点击它,打开相应章节的文本。 结构化标记易丁维护。设想为了在某个浏览器中找寻弄乱网页的某个小错 误,会花掉多少时间去搜索人家的或自己的HTML页?为了个带白色超链 的边框,会花多少时间去书写嵌套表格和FN标签呢?为了在标题和其后 的文本之间得到-个理想的间隔距离,又会插入多少的换行标籥呢?通过使 用结构化标记,就能使代码变得清晰,而很容易找到想要的东西。 诚然,全结构化的文档的确有些平淡。这都是基于这样个事实:在20世纪末 结构化标记还不能动摇市场对时下流行的HTML页面的钟爱,真止需要的是寻找 种可将结构化标记问丰富的页面表现桕结合的方式
第一章 这一观念也并不新鲜了。在过去的几十年里已经提出和创建过很多样式表技术 这些都是企图在不同的行业和协会内使用不同的结构化标记语言这些语言也已 被测试过、使用过,而且被证实在需要用结构米表现的环境中是适用的。但是还 没有任何样式表能立即就适用于HTML。所以,为解决这问题还有一些于作要 做 CSS是拯救之方 当然,用于表示的标记元素会影响到HTML的结构,而W3C也没有忽略这个问 题。他们在早些时候就意识到这样的情形不能持久,而且急需一个好的解决方案。 于是在1995年,W3C开始着手制定一个名为CSS的规范。到1996年,这一规 范已同HTML本身处于同一地位,成为了一个正式的规范 那么CSS能提供给我们什么呢?就本书而言,它提供给我们两个标准。第一个标 准是层叠样式表 Level 1(cSs1),它是1996年W3C的一个正式的规范。不久以 后,W3C的层叠样式表和格式化属性(CSS&FP)工作组开始着手一个更高级的 规范。1998年,当层叠样式表 Level2(CS2)被当作一个正式的规范时,他们 的工作便告一段落了。CSS2构建在CSSI之上,并且在没有大的变化的情况下, 扩展了…些早期的工作。 将来CSS或许还会有更高的版本,但在那之前,还是让我们来看看已有的CSS吧。 丰富的样式 首先,CSS允许更为丰富的文档外观,即使从表示程度的高度上来看,它也比 HTML更为丰富。CSS拥设置文本颜色和背景颜色的能力;它允许为任何元素 创建边框并调整边框与文本之间的距离;它允许改变文本的大小写方式、修饰方 式(如加下划线)、文本字符间隔,甚至可以隐藏文本以及其他许多效果。 例如,网贝上的一级标题(也是主题),通常就是本页的标题。正确的标记为 <H1>Leaping Above The Water</HI>
HTML与CSS 现在假设要让此标题为暗红色,使用某种字体,斜体,带下划线,而且还带黄色 的背景。如用HTML来做,就得在表格中放置H标签,而且还要用到其他…大 堆像FON和U之类的标签。但用CSS,所需的仪仪是一条规则: II icolor: maroon; font: italic lem Times, serif: text-decoration: under-line ackground: yellow: 1 就这么简单。总之,能用HTML制作的都可以用CSS来制作。没有必要将自己约 束在HTML的圈子里。例如 Hl ( color: maroon; font: italic lem Times, serif; text-decoration: underline background: yellow url(titlebg. png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px 这样一条规则就允许我们在H1的背景里按水平方向重复放置一个图像,为H加 上一个边棡,它与文本的间隔至少为五个像素,而且还去掉了元素的下边界(空 白的空间)。而HTML不能做如此细化的工作—这也算是对CSS的一个尝试 易于使用 如果CS还不能令人信服,那么这应该可以了:样式表能彻底减轻网页设计者的 工作负担 样式表能够在恰当的地方集中一批命令,以实现某种可视效果,而不是将它们到 处分散在整个文档中。比如,假设要让文档中的所有标题都显示为紫色。(我也不 知道为什么要这样做,只是假设而已。)如果使用HTML就需在每个标题标签里 放置…个FON标签,如下 <H2><FONT COLOR="purple">This is purple! </FONT></H2> 而且还必需对每个二级标题进行同样的设置。如果在文档中有40个这样的标题, 那么我们就必须插入40个FON标签,因为每个标题都需要一个!这么一个小小 的效果所需的T作量却非常大。 不妨假设上面的工作也已做完,而且那些所有的FON标签也都加上了。现在心情
第一章 应该很舒畅了——然而可能又决定(或许是老板决定)将标题变为暗绿色,而 不是紫色。那么又得回到前面,修改每一个FON标等。当然,只要此标趣是文档 中唯的紫色文本,我们就可以用查找替换的编辑功能。但如果文档中还有另外 的紫色FoN标签,就不能用查找替换操作了,因为查找替换会影响到其他元素。 运用单独的一条规则会更好: H2 Icolor: purple; y 不仅键入快,而且易于改变。如果想由紫色变为喑绿色,只需对这条规则加以改 变就可以了。 再回到前面的例子 H1 color: maroon; font: italic lem Times, serif: text-decoration: underline background: yellow;) 它的书写看起来比使用HTML更糟糕。但考虑这样一种情形:当某页需要12个 同H1·样的H2元素时,如果使用HTML,那么这12个班2元素需要多少标记 呢?非常多。另一方面,如使用CSS,则只需照下面这样做 H1, H2(color maroon; font: italic lem Times, serif; text-decoration: underline background: yellow;) 现在这种样式同时应用H1和H2元素,但只需多输入3个字符。 如果想改变H1和H2元素的显示方式,CSS带来的好处更是不言而喻了。考虑将 所有和12个H2元素的HTML标记作改变所花的时间,和将前面的样式变为 下面的样式所花的时间,并且进行比较 Hl, H2 color: navy: font: bold lem Helvetica, sans-serif text-decoration: underline overline; background: siiver: y 如果这二种方法都用计时表来计时,我敢打赌终验丰富的CSS作者一定会轻而易 举地胜出HTML的操作者。 另外,大多数CSS规则都可以集中起来放到文档中的某个位置。也可以将每条规 则同具体的元素联系起来,从而应用到整个文档、但通常还是将所有的样式规则