# 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簡單教程
