# 2 CSS2.2的相关介绍
> by aning
[TOC]
## 2.1 基于HTML的CSS2.2简单教程
这部分是非规范化的。
在本教程中，我们展示了设计简单的样式表是多么容易。为了更好的学习本教程，你需要知道一点HTML(详见[[HTML4]](https://www.w3.org/TR/CSS22/refs.html#ref-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规则由两个主要部分组成:<u>[选择器](https://www.w3.org/TR/CSS22/selector.html)</u>（'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元素详述：
* 链接类型：一个"样式表"。
* 样式表的位置用过"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.2有超过90个属性，包括<u>["color"](https://www.w3.org/TR/CSS22/colors.html#propdef-color)</u>。让我们看一些其他的：
~~~
<!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元素的声明将font-famliy设置为“Gill Sans”。如果该字体不可用，则用户代理（通常称为“浏览器”）将使用“无衬线字体”font-famliy，该font-famliy是所有用户代理知道的五个通用字体之一。BODY的子元素将继承“font-famliy”属性值。
第二个声明将BODY元素的字体大小设置为12pt。“point”单元常用于基于印刷字体的排版，以表示字体大小和其他长度值。这是一个绝对单位的例子，它不与环境有关。
第三声明使用一个相关单位来衡量其周围的环境。“em”单元是指元素的字体大小。在这种情况下，结果是BODY元素周围的边距比字体大小宽三倍。
## 2.2 基于XML的CSS2.2简单教程
