您的位置：寻梦网首页＞编程乐园＞HTML园地＞HTML 4.0 参考文献
前页 后页 目录 元素 特性

风格页

目录
  1. 在 HTML 中加入风格
    1. 设定风格页的缺省语言
    2. 行内风格信息
    3. 头风格信息: STYLE 元素
    4. 外部风格页
    5. 设定缺省命名风格
  2. 继承和延续
  3. 对非一致性用户代理器隐藏风格元素的内容
  4. 通过HTTP头指定风格
风格页是网页设计者如何工作中的一个主要的突破, 它扩展了他们改良他们页面的能 力。Web 被构想于科技的环境中, 用户关心的是它的文档的内容然后是它的展现。自 从人们在宽广的人生道路上发现了Web, HTML的限制成为电脑继续受到挫折的根源。这 些作者曾经对于纸上谈兵(译者: 本来是指在纸介质上)有充分的控制权。他们学习如 何在HTML 体裁的限制上打擦边球。这个意图是好的- 为了提高网页的展现效果-但对于如此做的技术却不容乐观。这些技术在一部分人, 一部分时间面前工作, 但始终没有为所有的人, 所有的时间, 它们包括:
  • 使用HTML 扩展属性
  • 把文字转换成图像
  • 使用图像控制空白区域
  • 在网页界面使用表格
  • 通过编写程式来代替使用HTML
这些技术非常地提高了网页的复杂程度, 与错综复杂的问题随之而来的是有限的适应性, 并且使有残疾弹性限入痛苦。

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

HTML 4.0 提供下列功能的支持:

灵活的风格信息存放
把风格页放在分开的文档中使得它们容易再次使用。有时对于在它们提供的文档, 以及在文档的开始时编组, 对贯穿文档主干的元素的特性包含渲染指导是有用的。为了使它在节点的基础上更容 易管理, 这份说明书描述如何使用HTTP 引导头来设定被提供给文档的风格页。
独立地指定风格页语言
这份说明书没把HTML束缚于任何一个特定的风格页语言。 这就允许了一个范围的此类语言可被使用, 例如多数用户使用的简单的形式和少数有高级特殊需要的用户使用的复杂的类型。下 面的例程均使用CSS (Cascading Style Sheets) 语言[CSS1], 但其它的风格页语言也是可用的..
级联风格页
这是由某些风格页语言如CSS提供的能力允许风格页信息来自于数个混合的源。例如, 组织风格指导方针, 一组风格的共同的风格标准, 指定单个文档的风格。通过把这些 信息单独储存, 风格页可以被重复使用, 使得创作简单化而且可以使网络缓存更有效。 级联定义了一个风格页的排序列在其中 后来的较以前的规则有更高的优先权。并非所有的风格页语言提供级联。
媒体从属
HTML 允许你用一种媒体无关的方法来指定文档。这就使得人们可以用广泛的不同的 设备和媒体来传送网页, 例如视窗系统, 麦金塔和X11 的图像显示器, 电视的转换盒 (set-top boxes), 特殊的可移动电话和个人输入设备, 语音浏览器以及盲人用的点阵 设备。
与之相反的, 风格页提供指定媒体和媒体组。一个故意用作屏幕的风格页, 应该可适用于打印, 但对于语音浏览器则没有用处。这份说明书允许你在风格页定义 广泛的媒体种类。这允许用户代理器来避免取得不适当的风格页。风格页语言可以在 同一风格页中包含媒体依赖性的描述。
交互风格
作者可以希望提供给读者数个阅读文本的交互风格。例如, 一个使用小字体的紧凑版 本, 一个使用大字体来增加易读性的风格。这份说明书允许你指定这样的交互, 包括 一个缺省的风格。用户应该被赋于在这些风格中选择或干脆关闭风格页的机会。
注意: 在这份文档的发行和新媒体格式 章节中包含了关于风格页的更细节化信息..

把风格加到 HTML

HTML 文档可以直接包含风格页法则也可以调入风格页。HTML可以使用任何风格页语言。一 个简单的风格页语言已经足够满足大多数用户的需求, 但多种语言可以更好的适应高 级的特殊需要。HTML 不依赖于某一种指定的风格页语言。然而, 根据这份文档的目的, 我们将将提出一些 Cascading 风格页的举例说明([CSS1]), 缩写为 CSS (Cascading Style Sheets).

设定缺省的风格页语言

风格法则的语法是属于风格页的, 而不是HTML 的。由于提供风格页的用户代理器必 须剖析这些法则, 用户必须声明哪个风格页语言被使用。

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

<META http-equiv="Content-Style-Type" content="text/css">
缺省的风格页语言也可以被HTTP引导头设定。上面的META声明等价于HTTP引导头: 
Content-Style-Type: text/css
如果两个或更多的META 声明或HTTP引导头指定了缺省的风格页语言, 最后一个占有优先权。在此计划中HTTP 引导头在文档HEAD 之前出现并被考虑。如果不存在明显的声明, 缺省风格页语言被设置为CSS。我们建议 编写工具提供一个显示的声明。

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

内层风格信息

特性定义
style = cdata
这个特性指定了当前元素的风格信息。
style 特性指定一个单纯元素的 风格信息。风格信息通过使用缺省风格页语言 来指定。
这个例程指定了一个特殊段落的文字的颜色和字体大小信息。

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

注意 CSS 的声明语法: name : value. 属性定义由分号分列。
style 特性在你打算为一个单独HTML 元素提一个特定的风格时是适当的。 如果这个风格将被数个元素重复使用, 你应该考虑使用STYLE 元素。 根据其基本的灵活性, 可以把风格放在一个单独的风格页中。

引导风格信息:STYLE 元素

<!ELEMENT STYLE - - CDATA?-- style info -->
<!ATTLIST STYLE
?%i18n; -- lang, dir, for use with title --
?type?CDATA?#REQUIRED -- Internet content type
?for style language --
?media CDATA?#IMPLIED?-- designed for use with these media --
?title CDATA?#IMPLIED?-- advisory title --
?>
开始标记: 需要, 结束标记: 需 要
特性定义
?
type = cdata
这个特性定义了元素内容的风格页语言, 因此可以超越缺省的风格页语言. 风格页语 言被作为一种互联网媒体格式(如 "text/css") 指定. 互联网媒体格式在[MIMETYPES] 定义.
media = cdata-list
这 个 特 性 指 定 了 一 个 风 格 信 息 的 有 意 的 目 标 媒 体. 可 以 是 单 个 的 媒 体 格 式 或 用 逗 号 分 列 的 媒 体 列 表. 可 能 的 媒 体 格 式 为:
  • screen: 输 出 打 算 为 不 分 页 的 计 算 机 屏 幕. 这 是 缺 省 值.
  • print: 输 出 预 定 为 分 页 的, 不 透 明 材 料 以 及 屏 幕 上 的 打 印 预 览 模 式.
  • projection: 输 出 到 放 映 设 备.
  • braille: 输 出 到 盲 人 触 觉 反 溃 设 备.
  • speech: 输 出 至 语 音 系 统.
  • all: 提 供 到 所 有 的 设 备.
在 它 处 定 义 的 特 性
STYLE 元 素 允 许 作 者 在 文 档 引 导 中 放 置 风 格 页 法 则. HTML 允 许 任 何 在 文 档 的 HEAD 部 分 中 有 任 意 数 量 的 STYLE 元 素.

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

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

  • 所 有 明 确 的 HTML 实 例 (如: 所 有 的 P 元 素, 所 有 的 H1 元 素, 等 等)
  • 所 有 属 于 一 个 明 确 的 类 的 所 有 HTML 元 素 实 例?(就 是 说 那 个 的 class 特 性 被 设 了 些 值).
  • HTML 元 素 的 单 个 实 例 (就 是 说 哪 个 的 id 特 定 被 设 了 些 值).
风 格 法 则 的 优 先 和 继 承 规 则 根 据 风 格 页 语 言.
下 面 的 CSS STYLE 声 明 在 文 档 的 每 个 H1 元 素 外 加 条 线 并 使 之 与 页 面 居 中.
<HEAD>
?lt;STYLE type="text/css">
 H1 {border-width: 1; border: solid; text-align: center}
?lt;/STYLE>
</HEAD>
为 了 指 定 这 个 风 格 信 息 只 提 供 给 某 个 特 殊 类 的 H1 元 素, 我 们 如 下 修 整: 
<HEAD>
?lt;STYLE type="text/css">
 H1.myclass {border-width: 1; border: solid; text-align: center}
?lt;/STYLE>
</HEAD>
<BODY>
?lt;H1 class="myclass"> This H1 is affected by our style </H1>
?lt;H1> This one is not affected by our style </H1>
</BODY>
最 后, 为 了 限 制 风 格 信 息 只 用 于 单 个 的 H1 实 例, 设 定id 特 性: 
<HEAD>
?lt;STYLE type="text/css">
 H1.myid {border-width: 1; border: solid; text-align: center}
?lt;/STYLE>
</HEAD>
<BODY>
?lt;H1 class="myclass"> This H1 is not affected </H1>
?lt;H1 id="myid"> This H1 is affected by style </H1>
?lt;H1> This H1 is not affected </H1>
</BODY>
虽 然 风 格 页 信 息 可 设 定 给 几 乎 所 有 的 HTML 元 素, 有 两 个 元 素 有 其 特 殊 的 用 处 因 为 它 们 没 有 任 何 预 定 的 的 陈 述. 因 为 DIV 和 SPAN 元 素 只 定 义 结 构, 当 它 和 风 格 页 绑 定 的 时 候, 允 许 用 户 无 限 地 扩 展 HTML.
有 下 面 的 例 程 中, 我 们 使 用 SPAN 元 素 来 设 定 一 个 段 落 的 前 几 个 字 为 small caps 字 体.
<HEAD>
?lt;STYLE type="text/css">
?SPAN.sc-ex { font-variant: small-caps }
?lt;/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>
?lt;STYLE type="text/css">
 DIV.Abstract { text-align: justify }
?lt;/STYLE>
</HEAD>
<BODY>
?lt;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.
?lt;/DIV>
</BODY>

媒体格式

HTML 允 许 作 者 设 计 不 依 赖 作 何 指 定 展 示 媒 体 的 文 档. 因 此, 用 户 可 以 在 广 泛 的 不 同 的 用 户 代 理 器 上 浏 览 Web: 个 人 电 脑 及 工 作 站 的 图 像 显 示 器, 电 视 的 转 换 盒 (set-top boxes), 特 殊 的 可 移 动 电 话 和 个 人 输 入 设 备, 语 音 浏 临 器 以 及 盲 人 的 点 阵 感 知 设 备.
?
media 特 性 指 定 了 希 望 的 风 格 法 则 的 输 出 途 径. 通 过 设 定 media, 作 者 可 以 让 用 户 代 理 器 避 免 从 网 络 上 取 得 不 提 供 设 备 的 风 格 页.
下 面 的 例 程 声 明 了 提 供 给 所 有 的 H1 元 素. 当 在 计 算 机 屏 幕 显 示 的 时 候, 所 有 的 实 例 都 将 居 中 并 且 是 蓝 色 的. 在 打 印 时, 所 有 的 实 例 都 居 中. 我 们 同 时 为 语 音 系 统 定 义 一 个 不 一 样 的 风 格.
<HEAD>
?lt;STYLE type="text/css" media="screen">
?H1 { color: blue}
?lt;/STYLE>

?lt;STYLE type="text/css" media="screen, print">
 H1 { text-align: center }
?lt;/STYLE>

?lt;STYLE type="text/acss" media="speech">
 H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
?lt;/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 文 档 单 独 定 义. 这 是 提 供 这 个 能 力 的 好 处:
  • 在 多 个 文 档 (和 节 点) 间 共 享 风 格 页
  • 不 用 修 改 文 档 就 能 改 变 风 格 页
当 风 格 页 允 许 使 用 时, 用 户 可 以 得 到 风 格 的 选 择. 每 种 风 格 都 有 可 能 级 联 于 数 个 数 格 页. 某 些 风 格 页 (被 称 作?dfn>固 有?/dfn>) 的 提 供 不 依 赖 于 用 户 的 选 择 (它 尽 量 指 向 正 确 的 媒 体 格 式), 而 另 一 些 (被 称 作?dfn>轮 替) 只 提 供 于 特 殊 的 选 择. 一 个?dfn>缺 省 风 格 页 是 一 个 当 页 面 被?调 入 时 提 供 的 风 格 页, 但 用 户 可 以 乐 意 使 用?dfn>轮 替 风 格 页 的 话 可 以 禁 止 它.

使 用 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 之 前.

前页 后页 目录 元素 特性