上一章   下一章   内容   属性   索引  

2 CSS 2.1简介

内容

2.1 CSS 2.1 HTML简单教程

本节内容是非规范的

本教程中，我们展示了设计简单样式表是多么容易。为了（阅读）本教程，你需要知道一点HTML（见[HTML4]）和一些基本的桌面排版术语（desktop publishing terminology）

我们从一个短小的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>

现在样式表有了4条规则：前2条设置BODY元素的颜色和背景（同时设置颜色和背景色是个不错的选择），而后2条设置H1元素的颜色和背景。因为没有给P元素指定颜色，它将从父元素继承，也就是BODY。H1元素也是BODY元素的子元素，但第二条规则重写了继承来的值。CSS中不同值之间经常有这样的冲突，本规范描述了怎样处理它们

CSS 2.1有超过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'字体族（所有用户代理都应该提供的5个一般字体族之一）。BODY的子元素将继承'font-family'属性的值

第二条声明把BODY元素的字体大小设置为12磅（point）。"磅"这个单位一般用在印刷字体中来描述字体大小和其它长度值，是一个不会根据环境缩放的绝对单位

第三条声明用了相对单位，会根据环境缩放。"em"这个单位指的是元素的字体大小。这种情况下，BODY元素的margin是字体大小的3倍宽

2.2 CSS 2.1 XML简单教程

本节内容是非规范的

CSS可以用在任何结构化文档格式中，例如可扩展标记语言（eXtensible Markup Language）[XML10]应用程序。实际上，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>

为了用一种类文档的风格（fashion）显示这段内容，我们必须先声明哪些元素是行内的（也就是说，不会造成换行），哪些是块级的（也就是说，会造成换行） 

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>

一个可视化用户代理能够把上面的示例格式化为：

Example rendering   [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 }

一个可视化用户代理能够把上例格式化为：

Example rendering   [D]

给样式表添加更多规则将进一步描述文档的表现

2.3 CSS 2.1 处理模型

本节内容（不包含子节）是非规范的

本节展示了一种可能的用户代理支持CSS的工作模型，这只是一种概念模型，实际实现可能不同

在这种模型中，用户代理通过下列步骤来处理源码：

  1. 解析源文档并创建文档树.
  2. 识别目标媒体类型.
  3. 检索文档相关特定目标媒体类型的所有样式表
  4. 通过给每个适用于目标媒体类型的属性赋值来为文档树中的元素做标注。根据层叠与继承中描述的机制来对属性赋值

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

  5. 根据有标注的文档树，生成格式化结构。通常，格式化结构与文档树很像，但也可能大不一样，尤其是编写者使用伪元素和生成的内容时。首先，格式化结构根本没必要是“树形的”——结构的类型取决于实现。其次，与文档树相比，格式化结构包含的信息可能更多也可能更少。例如，如果文档树中的一个元素有一个值为'none'的'display'属性，这个元素将不会在格式化结构中生成任何东西。而一个列表元素可能在格式化结构中生成更多信息：列表元素的内容和列表样式信息（例如，黑点图片）

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

  6. 把格式化结构传递给目标媒体（例如，打印结果，在屏幕上显示，渲染为声音等等）

2.3.1 canvas

对于所有媒体而言，术语 canvas都表示“格式化结构将被渲染的地方”。canvas对每个维度的空间来说都是无限的，但渲染通常出现在canvas上一块有限的区域中，由用户代理根据目标媒体建立。例如，用户代理渲染到屏幕通常限定一个最小宽度并根据视口的尺寸选择初始宽度。用户代理渲染页面时通常强制加上宽度和高度约束。听觉用户代理可能对音频空间加以限制，但并不及时（Aural user agents may impose limits in audio space, but not in time.）

2.3.2 CSS 2.1 元素查找（addressing）模型

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

2.4 CSS设计原则

本节内容是非规范的

CSS 2.1和CSS2，以及在它之前的CSS1，都是基于这些设计原则的：

上一章   下一章   内容   属性   索引