标记语言——网页应用CSS样式(3)
技巧延伸
在这个单元里,稍微深入样式表的世界,看看替换样式表(一份标记源码配上许多份样式表),以及如何让使用者握有更多控制,选择想要使用的样式表.
替换样式表
在本章开始的时候,我们讨论了四种为页面应用CSS的不同做法,同时展示了链接,导入外部样式表的好处,我们能更进一步引用样式表,让使用者有机会选择更大的字体,不同的色彩主题,甚至是不一样的页面布局.
我们能以<link>标签引用许多份样式表达成这个功能(与本章最初的方法B十分类似),但是要为rel属性指定"alternate stylesheet".
举例来说,如果想让使用者能够选用额外的两种字体大小,可以像平常一样链接主题样式表,接着再链接替换样式表.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<link rel="stylesheet" type="text/css" href="default.css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />
<link rel="alternate stylesheet" type="text/css"
href="largertext.css" title="larger"/>
</head>
你应该发现了,后面两个<link>标签在为rel属性指定了"alternate stylesheet"之后,我们还加上title属性为样式表指定名称.以便稍后进行选择.
"预设"的样式表一定会内浏览器启动,浏览器会下载large.css与larger.css,但除非以其他方式启动(稍后会说),否则浏览器不会使用里面的定义内容.rel属性设定的"alternate stylesheet"正是防止这些样式表在页面载入后立刻"启动"而加到标签上.
如果我们想对老旧的浏览器像是Netscape 4.x隐藏这些替换样式表的话,不必使用@import方法,Netscape不支持rel属性的"alternate stylesheet"值,因此这些样式不会发生作用.
三种字体大小
让我们来看看这些替换样式表里面放了什么.举例来说,如果我们想让使用者放大页面字体大小的话,我们能在替换样式表中指定更大的字体,在启动之后让它们覆盖default.css中的规则.
如果我们以像素指定字体大小的话,这尤为方便,因为某些浏览器不允许使用者放大这类字体,要是把基础字体设为视力不佳者难以阅读的大小时,就能用替换样式表提供放大字体的功能.
因此,在default.css里,可以为网站设定基础字体大小:
body {
font-size: 12px;
}
然后在large.css中用略大的字体大小覆盖预设值:
body {
font-size: 16px;
}
同样的,在larger.css中再放大一些:
body {
font-size: 20px;
}
当启动之后(我发誓马上就会解释),large.css和larger.css样式表就会覆盖预设样式规则,放大页面字体大小.
还是层叠
有个重点必须留意,那就是CSS的层叠作用仍然存在,替换样式表就与其他样式表一样,也就是会覆盖共通的规则.因此,如果我们在default.css里面指定了排版布局,定位之类的规则,而代用样式表没有重复这些规则的话,这些规则就会继续发生作用.
使替换样式表发挥作用
太棒了.现在我们已经把替换样式表准备好了,随时可供使用.使用者要如何启动它们?不幸的是,很少浏览器具备替换样式表的内建功能,而Mozilla是具备这项功能的浏览器之一.
如果有替换样式表的话,浏览器视窗的左下角会出现一个小图标,Mozilla使用者可以点击这个图标,从选单中启动替换样式表(图10-3).
图10-3 Mozilla的替换样式表清单.
希望更多浏览器制造者能实现类似的功能,但是在那之前,还有另一种切换替换样式表的做法 -- 甚至能发挥cookies的魔力,保存下用户的选择.
Paul Sowden 在 A List Apart写了篇不可多得教学,题为"Alternative Style: Working With Alternate Style Sheets"(http://www.alistapart.com/articles/alternate/).在这篇文章里,他解释如何以一段JavaScript在浏览器内启动,关闭替换样式表.
切换动做由页面上的超链接完成,能根据title属性选用任何样式表.这段JavaScript会设定cookies记下使用者的最后一次选择,因此在使用者下次浏览网站时,除了预设样式表之外,也会启动正确的替换样式表.
举个例子,在编写这段内容时,我的个人网站提供了三种不同的配色方式,每种配色都能通过点击图标,呼叫Paul Sowden的script工作,第一个图标是预设值,而第二个,第三个图标则是两个提供不同配色方式的替换样式表(图10-4).
图10-4 点击图标,启动替换样式表
由于JavaScript是在使用者端执行的,因此切换动作会立刻生效,不需要重新读取整个页面,切换速度非常快.
完整的JavaScript程序可以到Paul Sowden在A List Apart撰写的文章下载(http://www.alistapart.com/articles/alternate/).
不止能调整字体大小
通过实验层叠作用,把特定的规则放在替换用样式表中,覆盖某些预设规则,就能在网站上做出一些十分有趣的互动效果,只需要用上简单的script与几条CSS规则,就算是小带宽也能带来大冲击.
DOM的好意
我们必须感谢另一个W3C标准,让我们能以script存取替换样式表,所谓的DOM,或称之为Document Object Model,其实是...恩,一起来看看W3C是怎么解释的:
文档对象模型是个与平台,语言无关的界面,主要是让程序与scripts能够动态存取修改文件内容,结构和样式.并且能够进一步处理文件,处理完成的结果会整合到显示的页面里头,这是W3C以及网络上其他DOM资源的概念.
听起来很熟悉,不是吗?这正是样式切换script所做的事情,动态存取,更新文件的样式设定.如果遵循W3C标准的话就能很轻松的办到,让开发者编写的script能够使用既定方式存取标记源代码的标签,如果努力编写符合标准的标记源代码,我们就能确保未来更容易撰写符合标准DOM的script,增强使用者浏览这些页面的体验.
样式切换script只触到了为DOM编写script的表面而已,但是这仍然是个以标准编写网页能获得很大好处的最佳示例.
结论
在这一章里,我们讨论了几种将CSS应用到标签,文档和整个网站的做法,同时也学会如何对老旧浏览器隐藏CSS,以及如何引用多重样式表.接着讨论了为不同支持程度的浏览器提供Lo-Fi和Hi-Fi样式表的做法,而不必编写scripts或是在服务器端侦测浏览器类型.
最后,学到了替换样式表,如何通过使用DOM编写JavaScript让使用者获得动态切换样式表的好处,允许使用者选择字体大小,色彩甚至是布局.
最后希望这些技巧能让你在设计样式的时候顺利起步!