上一页   下一页   目录   属性   索引  

2 CSS 2.2 简介

目录

2.1 针对 HTML 的 CSS 2.2 简要教程

本节为非规范性内容。

在本教程中，我们将展示如何轻松设计简单的样式表。要完成本教程，你需要了解一些 HTML 知识（参见[HTML4]）以及一些基本的桌面出版术语。

我们从一个小型 HTML 文档开始：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

要将 H1 元素的文本颜色设置为红色，你可以编写以下 CSS 规则：

  h1 { color: red }

一个 CSS 规则由两个主要部分组成：选择器（'h1'）和声明（'color: red'）。在 HTML 中，元素名称不区分大小写，因此 'h1' 和 'H1' 都有效。声明有两个部分：属性名称（'color'）和属性值（'red'）。虽然上面的示例仅试图影响呈现 HTML 文档所需的一个属性，但它本身就算作一个样式表。结合其他样式表（CSS 的一个基本特性是样式表可以组合），该规则将决定文档的最终呈现方式。

HTML 4 规范定义了如何为 HTML 文档指定样式表规则：可以在 HTML 文档中，或通过外部样式表。要将样式表放入文档中，请使用 STYLE 元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    h1 { color: red }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

为了最大程度的灵活性，我们建议作者指定外部样式表；这样可以在不修改源 HTML 文档的情况下进行更改，并且可以在多个文档之间共享。要链接到外部样式表，你可以使用 LINK 元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

LINK 元素指定了以下内容：

为了展示样式表与结构化标记之间的紧密关系，在本教程中我们继续使用 STYLE 元素。让我们添加更多颜色：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    body { color: black; background: white }
    h1 { color: red; background: white }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

现在样式表包含四个规则：前两个设置了 BODY 元素的颜色和背景（最好将文本颜色和背景颜色一起设置），而后两个设置了 H1 元素的颜色和背景。由于未为 P 元素指定颜色，它将继承其父元素（即 BODY）的颜色。H1 元素也是 BODY 的子元素，但第二个规则覆盖了继承的值。在 CSS 中，常常会有不同值之间的冲突，本规范描述了如何解决这些冲突。

CSS 2.2 具有超过 90 个属性，包括 'color'。让我们看看其他一些属性： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    body { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

首先要注意的是，多个声明被分组在由花括号（{...}）包围的块内，并且用分号分隔，尽管最后一个声明后也可以跟一个分号。

BODY 元素上的第一个声明将字体家族设置为 "Gill Sans"。如果该字体不可用，用户代理（通常称为“浏览器”）将使用 'sans-serif' 字体家族，这是所有用户代理都知道的五种通用字体家族之一。BODY 的子元素将继承 'font-family' 属性的值。

第二个声明将 BODY 元素的字体大小设置为 12 磅。“磅”单位通常用于基于印刷的排版中，以表示字体大小和其他长度值。这是一个绝对单位的示例，不会相对于环境进行缩放。

第三个声明使用了一个相对单位，该单位会根据其周围环境进行缩放。“em”单位指的是元素的字体大小。在这种情况下，BODY 元素周围的边距是字体大小的三倍宽。

2.2 针对 XML 的 CSS 2.2 简要教程

本节为非规范性内容。

CSS 可以用于任何结构化文档格式，例如可用于可扩展标记语言（eXtensible Markup Language）[XML11]的应用程序。事实上，XML 比 HTML 更依赖样式表，因为作者可以创建用户代理不知道如何显示的自定义元素。

下面是一个简单的 XML 片段： 

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

要以类似文档的方式显示此片段，我们首先必须声明哪些元素是内联级的（即，不会导致换行），哪些是块级的（即，会导致换行）。 

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

第一个规则将 INSTRUMENT 声明为内联元素，而第二个规则使用逗号分隔的选择器列表，将所有其他元素声明为块级元素。XML 中的元素名称区分大小写，因此以小写形式编写的选择器（例如 'instrument'）与大写形式（例如 'INSTRUMENT'）是不同的。

将样式表链接到 XML 文档的一种方法是使用处理指令： 

<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

视觉用户代理可以将上述示例格式化为：

示例渲染   [D]

请注意，“flute”一词保持在段落内，因为它是内联元素 INSTRUMENT 的内容。

然而，文本的格式并没有达到预期效果。例如，标题的字体大小应比其余文本大，并且你可能希望将作者的名字以斜体显示：

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

视觉用户代理可以将上述示例格式化为：

示例渲染   [D]

向样式表中添加更多规则将允许你进一步描述文档的呈现。

2.3 CSS 2.2 处理模型

本节内容不包括其子部分为非规范性内容。

本节介绍了用户代理支持 CSS 工作的可能模型之一。这只是一个概念模型；实际实现可能有所不同。

在此模型中，用户代理通过以下步骤处理源文档：

  1. 解析源文档并创建文档树。
  2. 识别目标媒体类型。
  3. 检索与文档相关联的所有样式表，这些样式表是为目标媒体类型指定的。
  4. 通过为文档树的每个元素分配一个适用于目标媒体类型的属性值，对文档树的每个元素进行注释。属性值的分配遵循层叠和继承部分中描述的机制。

    值的计算部分取决于适用于目标媒体类型的格式化算法。例如，如果目标媒体是屏幕，用户代理将应用视觉格式化模型。

  5. 从注释后的文档树生成一个格式化结构。通常，格式化结构与文档树非常相似，但也可能有显著差异，特别是在作者使用伪元素和生成内容时。首先，格式化结构不一定是“树状”的——结构的性质取决于实现。其次，格式化结构可能包含比文档树更多或更少的信息。例如，如果文档树中的某个元素的'display'属性值为'none'，则该元素在格式化结构中将不会生成任何内容。另一方面，列表元素可能会在格式化结构中生成更多信息：列表元素的内容和列表样式信息（例如，一个项目符号图像）。

    请注意，在此阶段，CSS 用户代理不会更改文档树。特别是，由样式表生成的内容不会反馈给文档语言处理器（例如，用于重新解析）。

  6. 将格式化结构传输到目标媒体（例如，打印结果、在屏幕上显示、渲染为语音等）。

2.3.1 画布

对于所有媒体，术语画布描述的是“格式化结构呈现的空间”。画布在每个维度上都是无限的，但渲染通常发生在用户代理根据目标媒体确定的画布有限区域内。例如，渲染到屏幕的用户代理通常会强制设置一个最小宽度，并根据视口的尺寸选择一个初始宽度。渲染到页面的用户代理通常会施加宽度和高度的限制。听觉用户代理可能会在音频空间中施加限制，但不会在时间上施加限制。

2.3.2 CSS 2.2 地址模型

CSS 2.2 选择器和属性允许样式表引用文档或用户代理的以下部分：

2.4 CSS 设计原则

本节为非规范性内容。

CSS 2.2，和之前的 CSS2 及 CSS1 一样，基于一组设计原则：

上一页   下一页   目录   属性   索引