层叠样式表第2级 CSS2规范开发手册 - WEB前端开发 专注前端开发，关注用户体验

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

2 CSS2简介

    目录

2.1 HTML中的CSS2简明指南

    在本指南中，展示了定义简单的样式表是很容易的。要了解这一指南，你需要对HTML有一点了解（参见[HTML40]）并掌握一些基本的桌面出版术语。

    我们以一短小的HTML文档作为开始：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//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: blue }

    一条CSS规则包含两个主要的部分：选择子（'H1'）以及声明（'color: blue'）。声明包含两个部分：属性（'color'）和值（'blue'）。虽然上述的例子中，只是影响了用来渲染HTML文档所需的属性中的一个，其本身已经构成了一个样式表。和其它的样式表相结合（样式表的结合是CSS的基本特性），就可以确定文档最终的呈现。

     HTML 4.0规范定义了HTML文档中如何指定样式表规则：可以是在HTML文档中，或者通过一个外部样式表。把样式表置入文档中，可以使用STYLE元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </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.0//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.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

    现在的样式表包含两条规则：第一条将BODY元素的颜色设置为'red'，而第二条将H1元素的颜色设置为'blue'。由于并没有指定P元素的颜色，它将从它的父元素，即BODY元素那里继承颜色值。H1元素也是BODY元素的一个子元素，但第二条规则的设立超越了继承值。 在CSS中，经常会有不同值之间的冲突，本规范描述了如何解决这些冲突。

    CSS2有100个以上不同的属性，包括'color'。我们来看一下其中的一些属性： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//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元素的子元素将继承BODY元素的'font-family'属性值。

    第二个声明将BODY元素的字体尺寸设置为12点。“点”这个单位广泛地应用在出版物印刷行业，用来表示字体尺寸和其它长度值。这是一个绝对单位的示例，不随着环境的不同而相对变化。

    第三个声明使用了相对单位，将根据环境而相对变化。“em”单位是指元素的字体尺寸。在本例中，结果是BODY元素周围的边距是字体尺寸的三倍。

2.2 XML中的CSS2简明指南

    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文档的一个建议是使用处理指令： 

<?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 CSS2处理模型

    本节描述了支持CSS的用户端如何工作的一个可能的模型。这只是一个概念模型，实际的应用可能有差别。

    在该模型中，用户端按照如下步骤来处理一个源文件：

  1. 分析源文档并生成文档树。
  2. 确定目标媒介类型.
  3. 对于特定目标媒介类型，获取和文档相关的所有样式表。
  4. 对于目标媒介类型适用的每一个属性，指定一个单一值，以此对每一个元素加以注释。属性值的赋予要根据一定的机制，该机制在层叠和继承中加以讨论。

    值的计算部分上依赖于目标媒介类型所适用的格式化算法。比方说，假定目标媒介是屏幕，则用户端应用可视化格式模型。如果目标媒介视打印纸，用户端应用页面模型。如果目标媒介视音频渲染设备（如语音合成器），用户端就应用语音渲染模型。

  5. 从已注释的文档树中，生成一个格式化结构。通常情况下，格式化结构和文档树十分接近，但也可能相差很大，特别是当作者采用伪元素和生成内容的时候。首先，格式化结构可能完全不是“树形结构”——结构的本性取决于其如何实现。第二，格式化结构中包含的信息可能比文档树中包含的多，也可能比它少。例如，文档树中一个元素的'display'属性值设置为'none'，那么该元素不会在格式化结构中产生任何内容。另一方面，一个列表元素可能在格式化结构中生成更多的信息：列表元素的内容和列表样式信息（如，用于标记的图形）。

    注意，在这一阶段，CSS用户端不会去改变文档树。特别地，由于有样式表而产生的内容不会反馈回文档语言处理器（以进行再分析等）。

  6. 将格式化结构传递到目标媒介（如，打印结果，在屏幕上显示，加以语音渲染等）。

    第一步超出了本规范的讨论范围（可以参见[DOM]）。

    第二步到第五步在本规范中得到详细阐述。

    第六步也超出了本规范的讨论范围。

2.3.1 渲染区域

    对于所有的媒介而言，术语渲染区域定义了“格式化结构被加以渲染的空间”。渲染区域在空间的所有维上都是无限的，不过渲染通常在渲染区域的一个有限的区域中进行。该区域由用户端根据目标媒介而建立。例如在渲染到屏幕时，用户端通常指定一个最小的宽度并根据视点的尺寸选择一个初始的宽度。渲染到页面时，用户端通常会指定宽度和高度的限制。音频用户端会指定音频空间的限制，但没有时间方面的限制。

2.3.2 CSS2定址模型

     CSS2选择子和属性允许样式表引用文档或用户端中的如下部分：

2.4 CSS设计原则

    CSS2和之前的CSS1类似，也基于一套设计原则：

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