样式表——下一代的HTML工具

作者:Jeffrey Veen

    现在,你已经掌握了串接样式表,是吗?你已经记住了这些规定,阅读了所有的技巧,而且理解了将形象展示从网页结构中分离出来的理论优势,在你现在的页面中
你可以精巧的组织你的文字、字体、字号、行距、边距及背景。你只需修改一些简单的文本文件就可以改变几十篇页面。你现在已经可以做到这几点了吗?

    但实际上还不行。

    这并不是因为CSS的规范不好,而是因为它的实际应用还不够。但是这不应该阻碍我们放眼未来。而且World Wide Web Consortium 给我们展示了下一代串接样式表的发展。您可以从W3C Web站点的CSS:Potential Enhancement网页中找到有关内容。

    不象HTML 3.2和4.0版,该版本还没有一个有趣beta代码。事实上,它甚至还不是一种规范,它只是一种说明,只是为了让公众对目前记录在案的各种CSS扩展提出建议和看法。这里并不打算将公众的建议变成一种推荐实施的版本。换而言之,就是征求公众意见以便扩展CSS的未来版本。所以说,不要期望从中找到救世福音,因为它目前连草案都算不上。

    现在让我们仔细看一下CSS能为我们做什么:

  1. 样式表-下一代的HTML工具
  2. CSS1 简述
  3. 文字阴影、滤镜及效果
  4. 光标控制
  5. 多栏目布局
  6. 其它有趣的功能

1、CSS1简述

    CSS1问世已有一段时日了。现在我们已经能有机会使用、测试CSS1并看一看它确实能为我们做什么。如果有些东西为被注意到并不足为奇。CSS注解中有关CSS1规定的部分比较详细地讲解了一些有关的事项,及附加的一些应用CSS1的规定。

    CSS1由于处理一些编辑功能,比如应用于padding的长度单位,及在排序列表中可以控制项目符的伪要素。还有一些更有趣的附加规定如magnification,它可以使作者放大文件的一部分。这项功能可以作为增加字号、行距、边距等的快捷键。想象一下,当样式表在用户中广泛使用时,近视眼的用户将所有要素放大到250%后即可轻松阅读。

    CSS1还可以实现对行回车的控制,你可以让任何要素执行<br>那样的功能。事实上,这项功能可以让你控制浏览器处理窗框(box)及行内要素的方式。设想一下,你可以制定一个列表,让它在显示时连在一起穿过页面顶端。

    Vertical Align规定了一种将行内要素同基准线对齐的办法。我们经常得花费很多时间消除那些同周围的文字不能很好地对齐的图象的象素。而现在,只需通过设定一项Vertical align(垂直对齐)属性,你就可以轻松地将图象和文字对齐。CSS选项比HTML的<sup>和<sub>功能更具灵活性。


2、文字阴影、滤镜及效果

    在CSS滤镜中我们已经详细讲述了CSS滤镜的功能。虽然目前它只是微软的一个建议(及IE 4.0的功能之一),在W3C的文字中有句话为CSS滤镜在未来的广阔前景开启了方便之门。WS3C的文件中这样写道:“正在研究可以为文字及图象增加丰富的特殊效果的方法”。

    毫无疑问,这种方法可以为各位用户提供各种丰富的滤镜效果,其中之一就是下落阴影,通过该滤镜可以设定阴影的颜色及抵消(offset)的程度。该方法还可以设定多种阴影,并使其按照你所排列的顺序在彼此的顶端着色。

    这里我并不打算探讨下落阴影对文字造成的美学价值,我所关心的是:只要它能象GIF图象那样给文章标题增加效果,我就心满意足了。


3、光标控制

    编写语言对于网上用户界面有非常有趣的作用,特别是当你开始语言动态HTML时。随着JavaScript同HTML的关系愈来愈紧密,我们可以使用任何一种要素来调用一种编写语言。最基本和最明显的例子就是指令列表。它应用户的鼠标点击扩大或缩小。但是如何知道该在什么时候点击呢?你需要改变光标。

    但鼠标滑过一个基本的HTML网页上的链接时,大部分浏览器中的光标会变成手形,提示该区域可以点击进入。在图象映射中也是如此。但是当你用Java Script的onclick事件处理一个原本静止的目标时则点击不起任何作用。你不可能期望用户持续点击所有目标直至找到点击起作用的地方。

    实际上,你可以设定鼠标在滑过某一要素时光标应发生何种变化。光标是应该变成点击的首先呢,还是十字形或者插入文字的标记?作者完全可以通过url()语法设定各种情况下光标的形状。

    如果能将其标准化,你可以想象以前乱七八糟不知从何下手的网页现在将变得一目了然,而哪些天才的网页设计师们更可以充分施展自己的才华创造出令读者感到方便实用赞不绝口的作品。


4、多栏目布局

    你是否记得Netscape将<multicol>标签加回到Netscape 3.0,然而却没有人使用这项功能?这可能是因为人们讨厌哪些只能专门用于一种浏览器而别的浏览器都无法使用的新标签。而且,这种标签不能对边距、padding及边界进行控制。Netscape的多栏目标签并不是那么有用。

    但是如果正确设计了多栏目标签的功能,会如何呢?CSS的说明提供了一种可以对文本多栏目或网页的布局实现及其详细的控制的建议。其属性包括column width, gutter controlcolumn rules甚至还有关于不平衡栏目的建议及重新浏览器窗口尺寸后栏目自动扩展到新的分栏的建议。所有这些都是很酷的建议。

    但是为什么就到此为止呢?随着CSS定位草案几近完成,为什么不趁热打铁给现有模块增加更先进更复杂的布局能力呢?为什么不创建linked boxes(链接框),让定位于某一要素的文字可以溢出到另一个要素,就象很流行的桌面出版软件Quark Xpress处理字符流时的那种做法?种种可能性只受我们的想象力的局限(当然,还有浏览器的显示能力的限制)......


5、其它有趣的功能环境参数

    能够调用系统环境参数是CSS的一项极其强大的功能。环境参数是你对你的计算机的操作系统设定的优先属性,包括视窗的颜色、桌面的形式、及当前窗口的尺寸、或你正在寻找的网页的URL。该建议并不能让网页作者偷窥你的设置,但是可以让作者可以对不能控制的事情更有把握。举例来说,你可以在正在的页面上根据视窗的宽度设置页边距和字号,而无须仅仅依赖于百分比。或者你可以使你制作的网页符合用户桌面的色彩设置。但最重要的是:随着客户端编程变得越来越重要,我们可以发现基于HTML的应用程序在不断缩小桌面的作用,网页制作者将希望网页看起来更象用户自己的界面。

文本生成及寻址操作的扩展

    如果你做过技术性写作的话,你将理解段落自动编号的重要价值。在你编辑文件,添加或删除文字时,你可以不必担心什么,因为你的索引系统将自动更新自身内容。W3C对于这方面没有什么明确的建议,只是提到:“应该加强对自动编号及列表项目、抬头及其它要素编号的控制。”

新的寻址规划

    最后,还有两项设定对上下文反应灵敏的寻址操作的新法建议。除了分类和标签选择器,你还可以级别结构寻找类型加入样式属性。例如,你可以通过在一个段落后紧跟一个<H1>来设定段落的样式,或者,通过使用DIV『lang=fr』,你可以设定索引<DIV>的样式都用法语。

<<      >>