Warning:
This wiki has been archived and is now read-only.
CSS2/intro
CSS2.1 介紹
Contents
为 HTML 应用 CSS 2.1 的简明教程
本节是非规范的。
在这个教程中，我们会展示设计简单的样式表是多么简单的一件事。看这份教程你需要了解一点 HTML（见 [HTMML4]）的知识和一些基础的桌面发布术语。
我们从这一小段 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的一个基本特性就是样式表会组合），这条规则将决定文档的最终表现。
HTML4 规范定义了如何才能为 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 元素指定了：
- 链接的类型为 "stylesheet"。
- 通过 "href" 属性来指定样式表所在的位置。
- 链接的样式表的类型为："text/css"。
为了展示样式表与结构标记的密切联系，我们在这个教程中继续使用 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.1 拥有包括 'color' 属性的超过90个属性。让我们来看看一些其它的：
<!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 元素上的第二个声明将字体大小设置为了 12pt。单位 "point" 通常在基于打印的排版中被用于表示字体大小和一些其它长度值。这是一个绝对单位的例子，它不会因为环境而相对缩放。
第三个声明使用一个相对单位，它会根据环境而缩放。"em" 这个单位参考了元素的字体大小。在这个例子中，结果是外绕在 BODY 元素外的外边距是其字体大小的三倍。
为XML应用 CSS 2.1 的简明教程
这部分是非规范的。
CSS 可以应用于任何结构化文档格式，例如扩展标记语言 [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>
为了用类文档风格来显示这个片段，我们必须先定义哪些元素是行级的（也就是他们不断行）哪些元素是块级的（也就是会断行的）。
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>
一个可视化浏览器会将上面的例子视觉化成下面这样：
注意，单词 "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 }
一个可视化浏览器会将上面的例子视觉化成下面这样：
给样式表添加更多的规则就可以让你进一步描述文档的表现。
CSS 2.1 的处理模型
这部分是非标准的，但不包括其子部分。
这部分展示了一个支持 CSS 的浏览器的一个可能的模型。这只是一个概念模型，真正的实现可能与此不同。
在这个模型中，浏览器将按照下面的步骤来处理源代码：
- 解析源文档，并创建文档树。
- 识别目标的媒体类型。
- 根据媒体类型来检索并取回所有与文档关联的样式表。
- 对适用于目标媒体类型的文档树中所有元素的每个属性都赋予一个单独的值。这些属性的赋值按照 cascading 和 inheritance 节描述的机制来执行。
一些值的计算会根据媒体类型，依照相应的格式化算法来计算。例如，如果目标媒体类型是屏幕，浏览器就会使用可视化格式模型。 - 从注释过的文档树生成一个格式化结构。经常，格式化结构非常类似于文档树，但他们又有明显的差异，尤其是在开发者使用伪元素来创建内容时。首先，格式化结构无需是“树状图”，结构的性质取决于实现。第二，格式化结构可以包含比文档树多或少的信息。例如，如果文档树中有一个 'display' 属性值为 'none' 的元素，那么该元素将不在格式化结构中生成任何东西。另一方面，一个列表元素可能在格式化结构中生成更多的信息：列表元素的内容和列表本身的信息（比如列表前面的小圆点图片）。
注意，在此阶段中浏览器不会更改文档树的结构。由样式表生成的内容不会返回给文档语言处理器（例如 reparsing ）。 - 将格式化结构转移到目标媒体上（例如：打印结果，在屏幕上显示，将其作为阅读器来渲染，诸如此类）。
画布
对于所有媒体，术语画布（canvas） 描述“格式化结构被渲染的空间”。对于空间的每个范围画布是无限的，但通常只能渲染画布的一个有限区域，由用户代理根据目标媒体决定。例如，用户代理渲染到屏幕上，通常限制一个最小宽度，并且根据视口区域初始化一个宽度。用户代理渲染到纸张上，通常限制宽度和高度。听觉用户代理可能限制声音空间，而不是时间。
CSS 2.1 寻址模型
CSS2.1 选择符和属性允许样式表引用文档或用户代理中下面的部分：
- 文档树中的元素和元素之间的相互关系（查看选择符章节）。
- 文档树中的元素属性，和属性的值（查看属性选择符章节）。
- 部分元素的内容（查看 :first-line 和 :first-letter 伪元素选择符章节）。
- 文档树中出于特定状态的元素（查看伪类章节）。
- 文档将渲染的画布的某方面。
- 一些系统信息（查看用户代理章节）。
CSS 设计理念
本节是非规范的。 CSS2.1 作为 CSS2 和 CSS1 的后序版本，基于以下一组设计理念：
- 向前和向后兼容。CSS2.1 的用户代理能够理解 CSS1 的样式表。 CSS1 的用户代理能够读取 CSS2.1 的样式表，并且丢弃他们不能理解的部分。同时，对于不支持 CSS 的用户代理可以显示样式增强的文档。当然通过 CSS 增强的样式将不被渲染，但所有的内容可以被表现。
- 作为结构化文档的补充。样式表补充结构化文档（例如，HTML 和 XML应用程序），为标记文本提供样式信息。样式表应该非常容易修改，并对标记的影响甚微或没有。
- 与供应商、平台和设备无关。样式表使文档保持供应商，平台和设备无关。样式表本身也是供应商和平台无关的，但CSS2.1允许你为一组设备指定一个样式表（例如，打印机）。
- 可维护性。通过在文档中指向样式表，网站管理员能简化站点的维护和保持整个站点的一致外观和感觉。例如，如果组织的背景色发生改变，仅需更改一个文件。
- 简单。CSS 是一门简单的样式语言，是对人类读写友好的。CSS的属性保持最大程度上的相互独立，一般实现一个效果只有一种方法。
- 网络性能。CSS为内容的呈现方式提供了紧凑的编码。图片或音频文件常被作者用来实现某种特定的渲染效果，样式表和其比起来体积要小的多。同时，减少网络链接的次数，进一步提高网络性能。
- 灵活性。有几种方法可以将CSS应用到内容。关键特征是不同位置的样式信息能够层叠，包括默认（用户代理）样式表，用户样式表，链接样式表，内嵌样式，和元素属性中的样式信息。渴求的某些渲染效果和设备无关相冲突。
- 丰富性。为作者提供一组丰富的渲染效果，增加网站作为表达媒介的丰富性。设计师们已经对桌面版和幻灯片应用中的常见功能渴望许久。但 CSS2.1 为满足设计师的要求，向前迈了一大步。
- 可选的语言绑定。规范中描述的一组 CSS 属性使视觉和听觉格式化模型表现一致。其格式化模型可以通过CSS语言访问，但也可以绑定到其他语言。例如，在JavaScript程序中可以动态改变某个元素的‘color’属性值。
- 可访问性。一些CSS功能将使网络更方便残障用户：
- 控制字体外观属性允许作者消除不可访问的文图图片。
- 位置属性允许作者消除强制布局的标记技巧（例如，不可见图片）。
- !improtan 规则的意义在于有特别演示要求的用户可以覆盖作者的样式表。
- 所有属性的‘inherit’值用来提升层叠的通用性，和更容易生成一致的风格。
- 改进媒体支持，包括媒体分组和 braille，embossed，和 tty 媒体类型，允许用户或作者为这些设备定制页面。
注意：关于使用 CSS 和 HTML 设计可访问文档的信息，查看-WCAG20