HTML园地·HTML4.0参考文献·HTML文档中的风格页 -- 追寻梦想＞编程乐园

风格页把我们从网页的展示,以及在过去的几年中对加到HTML的展现结构上过分地给予范围限制的状态带回到了一个易控状态。风格页使得在文本行中指定加入空白的数量,使用文字颜色及背景色,控制字体尺寸和风格,以及主管其它的细节都变得容易起来。

把风格加到HTML

设定缺省的风格页语言

使用META元素来为一篇文档指定缺省的风格页语言。例如为了设置CSS为缺省,可以在你的文档的HEAD 中加入下列的声明:

一致性HTML剖析必须能够区别HTML页面风格法则。HTML元素和特性在风格页数据的开始部分定义。风格页数据的结尾由开口结束标记包含(</)然后紧跟一个SGML名称开始字符([a-zA-Z])。所有的风格页数据必须提供用户代理器可用的风格页处理。

内层风格信息

这个例程指定了一个特殊段落的文字的颜色和字体大小信息。

<P type="text/css" style="font-size: 12pt; color: fuschia">Aren't style sheets wonderful?
?/DIV>

注意CSS的声明语法:name :value.属性定义由分号分列。

style特性在你打算为一个单独HTML元素提一个特定的风格时是适当的。如果这个风格将被数个元素重复使用,你应该考虑使用STYLE 元素。根据其基本的灵活性,可以把风格放在一个单独的风格页中。

引导风格信息:`STYLE` 元素

<!ELEMENTSTYLE - - CDATA?-- style info -->
<!ATTLIST STYLE
?%i18n;--lang,dir,for use with title --
?type?CDATA?#REQUIRED--Internet content type
?for style language --
?mediaCDATA?#IMPLIED?--designed for use with these media --
?title CDATA?#IMPLIED?-- advisory title -- ?>

开始标记:需要,结束标记:需要

特性定义

type=cdata: 这个特性定义了元素内容的风格页语言,因此可以超越缺省的风格页语言.风格页语言被作为一种互联网媒体格式(如"text/css")指定.互联网媒体格式在[MIMETYPES] 定义.
media=cdata-list: 这个特性指定了一个风格信息的有意的目标媒体.可以是单个的媒体格式或用逗号分列的媒体列表.可能的媒体格式为:

在它处定义的特性

lang(language information),dir (text direction)

STYLE 元素允许作者在文档引导中放置风格页法则.HTML允许任何在文档的HEAD 部分中有任意数量的STYLE 元素.

不提供风格页的用户代理器,或不提供由STYLE 元素指定的风格页的用户代理器必须隐藏STYLE 元素的内容.把其中的内容作为文档文本来渲染是错误的. 某些非一致性用户代理器风格页语言提供隐藏内容的语法.

一些风格页的履行可以允许在STYLE 元素中有style特性中更多样的变化.例如,在CSS中,可以在STYLE 元素中声明的法则为:

所有明确的HTML实例(如:所有的P 元素,所有的H1元素,等等)
所有属于一个明确的类的所有HTML元素实例?(就是说那个的class特性被设了些值).
HTML元素的单个实例(就是说哪个的id 特定被设了些值).

风格法则的优先和继承规则根据风格页语言.

下面的CSSSTYLE 声明在文档的每个H1 元素外加条线并使之与页面居中.

<HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD>

为了指定这个风格信息只提供给某个特殊类的H1 元素,我们如下修整:

<HEAD>
<STYLE type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style
</H1>
</BODY>

最后,为了限制风格信息只用于单个的H1 实例,设定id特性:

<HEAD>
<STYLE type="text/css"> H1.myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is not affected </H1>
<H1 id="myid"> This H1 is affected by style </H1>
<H1> This H1 is not affected </H1>
</BODY>

虽然风格页信息可设定给几乎所有的HTML 元素,有两个元素有其特殊的用处因为它们没有任何预定的的陈述.因为DIV 和SPAN元素只定义结构,当它和风格页绑定的时候,允许用户无限地扩展 HTML.

有下面的例程中,我们使用SPAN 元素来设定一个段落的前几个字为small caps 字体.

<HEAD>
<STYLE type="text/css">
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN id="sc-ex">The first</SPAN> few words of ?this paragraph are in small-caps.
</BODY>

在下面的例程中,我们使用DIV 和class特性来设定一系列段落的文字的对齐方式来作为一篇?科技论文的摘要章节.这个风格信息可以在文档的任何地方通过设置class特性而重复使用.

<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstract">
<P>The Chieftain product range is our market winner for the coming year.
This report sets out how to position Chieftain against competing products.
<P>Chieftain replaces the Commander range, which will remain on the price
list until further notice.
</DIV>
</BODY>

媒体格式

HTML允许作者设计不依赖作何指定展示媒体的文档.因此, 用户可以在广泛的不同的用户代理器上浏览Web:个人电脑及工作站的图像显示器,电视的转换盒(set-top boxes),特殊的可移动电话和个人输入设备,语音浏临器以及盲人的点阵感知设备.
?

media 特性指定了希望的风格法则的输出途径.通过设定media, 作者可以让用户代理器避免从网络上取得不提供设备的风格页.

下面的例程声明了提供给所有的H1 元素.当在计算机屏幕显示的时候,所有的实例都将居中并且是蓝色的.在打印时,所有的实例都居中.我们同时为语音系统定义一个不一样的风格.

<HEAD>
<STYLE type="text/css" media="screen">
H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="screen, print">
H1 { text-align: center }
</STYLE>
<STYLE type="text/acss" media="speech">
H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
</STYLE>
</HEAD>

当媒体控制提供给外部风格页是时是有趣的,因为用户代理器只在这些风格页提供给当前设备的情况下从网格上取得这些风格页.

先前的例程可以通过media特性的连接来写成指定外部风格页(用STYLE 元素来代替):只有当这些风格页与目标媒体相宜时才取得.

<HEAD>
<LINK href="doc1-screen.css" rel="stylesheet" type="text/css" media="screen">
<LINK href="doc1-print.css" rel="stylesheet"? type="text/css" media="print">
<LINK href="doc1-speech.css" rel="stylesheet" type="text/css" media="speech">
</HEAD>

查看下面的章节来获知更多的关于外部风格页的信息.

外部风格页

风格页可与HTML文档单独定义.这是提供这个能力的好处:

在多个文档(和节点)间共享风格页
不用修改文档就能改变风格页

当风格页允许使用时, 用户可以得到风格的选择. 每种风格都有可能级联于数个数格页. 某些风格页(被称作固有) 的提供不依赖于用户的选择(它尽量指向正确的媒体格式), 而另一些(被称作轮替)只提供于特殊的选择. 一个缺省风格页是一个当页面被调入时提供的风格页, 但用户可以乐意使用轮替风格页的话可以禁止它.

使用LINK元素来设定一个外部风格页.你必须设定下列的特性:

设定href值为风格页文件的位置.href 的值是一个URL.
设定rel特性的值指出风格页是固有的(rel="stylesheet"),缺省的(rel="stylesheet") 还是轮替的(rel="alternate stylesheet").
当风格页是缺省风格页时设定title 特性,可以被用活激活或不激活.

在此例中,我们首先指定一个在文件mystyle.css 中的外部风格页.

<LINK href="mystyle.css" rel="stylesheet">

设定title特性把风格页从固有转变成缺省,用户代理器应当提供用户提供有名风格页的可能性,根据title 特性.

<LINK href="mystyle.css" title="Compact" rel="stylesheet">

把关键词"alternate"加到rel 特性使之成为一个轮替风格页.

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet">

所有的轮替风格页共享同一个当用户(通过用户代理器)激活那个风格时提供的标题.具有不同标题的风格页将不在这种情况下被提供.然而,没有title? 特性的风格页将一直提供(除非用户同时关闭了风格页).

用户代理器应当提供用户一个查看和拣选轮替风格的途径.我们建议使用title 特性值来命名每种选择.

Cascading风格页语言如CSS允许风格页信息来自于数个被混合在一起的源.然而并非所有的风格页语言提供cascading.为了定义一个级联你可以简单地提供一个?LINK 和/或STYLE元素的次序. 风格信息以出现于HEAD 的元素次序级联.一个级联可以包含适宜不同媒体格式的风格页.用户代理器有责任来过滤这些风格页哪些是当前情况下不适合的.

在下面的例程中我们定义了两个轮替风格页并命名为"compact".如果用户选择?"compact"风格,两个风格页均被提供,就如同"common.css"风格页,(因为它的title 特性没有设定所以一直有用).如果用户选择"big print"风格,文件"bigprint.css"和"common.css"将被用户代理器应用而"compact" 风格页则否.

<LINK rel="alternate stylesheet" title="compact" href="small-base.css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css">
<LINK rel=stylesheet href="common.css">

这里是一个有LINK 和STYLE元素的例?程.

<LINK REL=stylesheet HREF="corporate.css">
<LINK REL=stylesheet HREF="techreport.css">
<STYLE TYPE="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>

设定缺省有名风格

使用META元素来设定文档的缺省有名风格.例如,为了在一份文档中设定缺省有名风格为"compact"(参见先前的例程),可以在HEAD 中包含如下的行:

<META http-equiv="Default-Style" content="compact">

缺省风格也可以被HTTP引导头设定.上面的META 声明等价于HTTP引导头:

Default-Style:"compact"

如果两个或更多的META 声明或HTTP引导头定义了缺省风格,最后的获得优先权.HTTP 引导头被作为居文档HEAD 之前首先考虑.如果没有显式的声明,缺省风格由第一个设定了title和?rel 特性具有具有"stylesheet"值的LINK 元素定义.

继承和cascading

当用户代理器打算渲染一篇文档的时候,它需要找到风格属性的值,例如字体名称,字体风格,尺寸,行高,文本颜色等等.完整的结构取决于风格页语言,但下面的描述是通常适宜的:

cascading 结构在大量的风格法则均直接提供给一个元素的时候被使用.这个结构允许用户代理器通过指定来排定法则并判断应用哪个法则.如果没有法则被找到,下一步取决于这个风格属性否可以继承.对于这些属性风格页语言提供了缺省值以备在特定的元素没有明确的法则时之用.

如果性性可被继承,用户代理器立刻检查相关元素是否有法则可以应用.这个处理直到找到相宜的法则.这个结构允许风格页紧密地指定.例如,你可以在BODY 中通过简单的应用于BODY 元素的法则为所有的元素指定字体.

在非一致性用户代理器中隐藏风格元素内容

某些风格页语言特意提供一种让作者在非一致性用户代理器中隐藏STYLE 元素内容的语法.

这个CSS例程举例说明如果把老的非一致性用户代理器注释掉STYLE 元素的内容而不被作为文本渲染.

<STYLE type="text/css"> <!-- H1 { color: red } P?{ color: blue} --> </STYLE>

通过HTTP引导头指定风格

有时为一个Web 服务器设置一个可被节点上成组的页面使用的风格页是适当的.HTTP?Link引导头与LINK 元素有相同的效果,相同的特值?和值.多个Link引导头相当于多个LINK 元素出现于相同的次序.因此

Link:REL=stylesheet HREF="corporate.css"

相当于:

<LINK rel="stylesheet" href="corporate.css">

你可以使用多个Link引导头来指定多个轮替风格,? 然后使用rel特性来判断缺省风格.

在下面的例程中,"compact"被缺省运用因为在rel特性中省略了"alternate"关键词.

Link:rel="stylesheet"title="compact"href="compact.css"
Link:rel="alternate stylesheet"title="big print"href="bigprint.css"

这在HTML文档通过电子邮件传送的时候同样有用.某些邮件代理器会改变[RFC822] 引导头的次序.为了保护?在链接引导头中的风格页级联次序不受影响,你可以在同一个引导域中合并数个实例.引号只有在特性值包包括空格的时候需要.使用SGML作为字符参照是HTTP头或邮件头不被允许及在传输可能受到影响时的另种办法.

由HTTP头暗示的LINK 和META元素被定义为出现于任何处于文档HEAD 的显式LINK和META 之前.

前页后页目录元素特性

风格页