樣式表可幫我們解釋XML文檔中各元素的具體意思，所以通過樣式表可直接在浏覽器上顯示XML文檔。在XML文檔在序言部分通過xml-stylesheet處理指令可指定關聯的樣式表。xml-stylesheet指令必須有一個href屬性和type屬性。href指向樣式表的URL，type指定樣式表的MIME類型：對
樣式表可幫我們解釋XML文檔中各元素的具體意思，所以通過樣式表可直接在浏覽器上顯示XML文檔。目前主要的樣式表語言有：
CSS1(Cascading Stylesheets Level 1，層疊式樣式表1)
CSS2(Cascading Stylesheets Level 2，層疊式樣式表2)
XSLT(XSL Transformations 1.0 XSL 轉換 1.0)
在XML文檔在序言部分通過xml-stylesheet處理指令可指定關聯的樣式表。xml-stylesheet指令必須有一個href屬性和type屬性。href指向樣式表的URL，type指定樣式表的MIME類型：對CSS為text/css，對於XSLT為text/xml或application/xml。下面是一個簡單的使用樣式表的XML文檔：
<?xml version="1.0"?>
<?xml-stylesheet href="test.css" type="text/css"?>
...
除以上兩個必須的屬性外，還有4種可選屬性：
media，標識該樣式應用於什麼媒體，如報紙(paper)、計算機監視器(screen)、電視(tv)或所有(all)。
charset，指明樣式表采用字符集編碼方式，如：utf-8。
alternate，指明是否有可選的樣式表，默認為no，表明是主樣式表，如果為yes，則是備用樣式表。
title，在有alternate的前提下，title用於指定不同樣式表的標題。如：
<?xml-stylesheet href="big.css" type="text/css" alternate="yes" title="Large fonts"?>
<?xml-stylesheet href="small.css" type="text/css" alternate="yes" title="Small fonts"?>
<?xml-stylesheet href="medium.css type="text/css" title="Normal fonts"?> #默認的主樣式表
樣式表現在已成為Web應用中的一個關鍵技術，它的作用主要體現在以下三個方面：
本文由（http://www.jb51.net）整理發布！轉載請注明出處，謝謝！
設計一個樣式表可以應用於多個文檔。樣式表可以存在於XML文檔外，XML文檔可通過鏈接使用樣式表。這意味著如果你有幾千個文檔，都可以鏈接到同一個樣式表中，改變一個樣式表等於改變幾千個文檔的顯示效果。
實現內容和表現的分離，增強文檔的一致性和可維護性。通過單一的樣式表，實現所有文檔顯示的一致。如果顯示樣式有變動，我們只需維護有限的幾個樣式表就可以了。
實現一個文檔，多個樣式。通過樣式表，可把一篇文檔以HTML形式、PDF形式或文本形式顯示出來。
CSS2
CSS2是層疊樣式表，它是一種排版技術，能讓元素按特定的樣式顯示，如字體大小，顏色、布局等。在網頁中有三種使用方法：
用<style>標記聲明，如
<style>
div {font-size: 12pt;}
div {color: blue;}
</style>
在元素中用style屬性指定，如：
<div style="font-size: 12pt;color: blue">CSS測試</div>
用LINK標記鏈接一個外部CSS文件，如：
<link rel="stylesheet" type="text/css" href="mycss.css">
按作用域來分，有三類的樣式表，分別是網頁解釋器樣式表、作者樣式表和浏覽者樣式表。網頁解釋器樣式表也叫默認的樣式表，當沒有另外的樣式表加載時使用。作者樣式表就是網頁設計師設計的樣式表。浏覽者樣式表是浏覽網頁的用戶在浏覽器上另外設置的樣式表。
CSS的基本數據類型
integer，表示整數，可取正負值。如：12，-24。
number，表示數字，可取正負值和小數。如：12.1，-14.3。
lenght，表示距離長度，可取正負值和小數，後跟一個單位，如:12em，12cm。單位又分相對單位和絕對單位，相對單位有：em，ex，px。絕對單位有：in(英寸)，cm(公分)，mm(公厘)，pt(等於1/72英寸)，pc(等於12pt)。
percentage，表示百分比值，可取正負和小數。如：20%，-40%。
uri，表示網絡資源。如：http://www.ringkee.com。
inherit參數值
<style>
body {width: 600px;}
.div1 {width: 120%;}
.div2 {width: inherit;}
說明：
div1的寬度是600px*120%
div2的寬度繼承父元素body的參數，是600px
選擇符的作用是指定哪些元素使用哪些樣式。選擇符可以分為簡單選擇符和復合選擇符兩類，簡單選擇符是類型選擇符、通用選擇符加上零個或多個屬性選擇符、ID選擇符、偽類等組成。復合選擇符是用">"和" "號結合多個簡單選擇符組成。">"和" "號兩邊要加上空格。
本文由（http://www.jb51.net）整理發布！轉載請注明出處，謝謝！
下面介紹各種選擇符：
通用選擇符，用"*"號表示，可用於所有標記。如：
<style>
* {font-size: 14pt;}
*.EM {color: red;}
</style>
<div>應用字體樣式</div>
<em class="EM">應用紅色樣式</em>
類型選擇符，與標記名一樣，只作用已該標記上。如：
<style>
div {font-size: 14pt;}
</style>
<div>應用樣式</div>
子代選擇符，HTML標記是可嵌套的，子代選擇符可把樣式表應用於子嵌套的子標記上，如：
<style>
div p b {font-size: 14pt;}
</style>
<div>
<p>沒有應用樣式</p>
<p><b>應用樣式</b></p>
</div>
子選擇符，與子代選擇符類似，但它只調用第一層子元素。如：
<style>
div > b {color: red;}
div p > em {color: green;}
</style>
<div><b>當b標記是div標記的子標記時應用紅色樣式</b></div>
<div><p><em>當em是p的子標記且p是div的子標記時應用綠色樣式</em></p></div>
鄰近選擇符，當兩個元素位於同一層且在位置是前後關系時，可以使用鄰近選擇符。兩個選擇符用" "號分開，如果A位於B之前，則B可應用樣式。如：
<style>
div p {color: red;}
</style>
<div>沒有應用樣式</div>
<p>應用紅色樣式。</p>
屬性選擇符，HTML標記有屬性，我們可為特定的屬性指定樣式。有四種寫法，分別是：
[屬性]，樣式只應用於指定的屬性。
[屬性=值]，樣式只應用於指定的屬性與值都相同的情況
[屬性~=值]，樣式只應用於指定的屬性且屬性值包含指定值的情況，屬性值是用空格分隔的字符串。
[屬性|=值]，樣式只應用於指定的屬性且屬性值是的第一個字符串是指定值的情況，屬性值是用"-"分隔的字符串。
<style>
[href] {color: red;}
A[href="http://www.ringkee.com"] {color: green;}
table[summary~="table"] {color: black;}
table[summary|="this-is-a-table"] {color: blue;}
</style>
<a href="http://www.python.org">應用紅色樣式</a>
<a href="http://www.ringkee.com">應用綠色樣式</a>
<table summary~="This is a table>
<tr>
<td>應用黑色樣式</td>
</tr>
</table>
<table summary|="This-is-a-table>
<tr>
<td>應用藍色樣式</td>
</tr>
</table>
類選擇符，與屬性選擇符類似，但它只指對class屬性應用樣式。類選擇符用"."語法，如.value與[class~=value]是一樣的。
<style>
.myid {color: red;}
</style>
<div class="myid">應用紅色樣式</div>
ID選擇符，與屬性選擇符類似，但它只指對ID屬性，用"#"語法。
<style>
#myid {color: red;}
</style>
<div id="myid">應用紅色樣式</div>
:first-child偽類，當標記是另一個標記的第一個子標記時，應用樣式。
<style>
p:first-child {color: red;}
</style>
<p>p是body的第一個子標記，應用紅色樣式</p>
<div>測試</div>
<p>p標記是body的第三個子標記，不應用紅色樣式</p>
:link和:visited偽類只作用於a標記，在指定href屬性的前提下，:link表示a標記還沒被點擊時的樣式，:visited表示被當點後的樣式。
<style>
a:link {color: blue;}
a:visited {color: red;}
</style>
<a href="http://www.ringkee.com">鏈接沒點擊前是藍色的，點擊後是紅色的</a>
:hover，:active和:fouce偽類也只能作用於a標記，且也要指定href屬性。:hover指定當用戶把鼠標移到a標記上並且指針變成手型時應用的樣式。:active指定點擊a鏈接並放開鼠標時所顯示的樣式。:fouce指定用戶點擊a標記瞬間，即鏈接成為焦點時所顯示的樣式。:hover要放在:link和:visited之後，否則:hover的樣式會覆蓋:link和:visited的樣式。
<style>
a:link {color: blue;}
a:visited {color: red;}
a:haover {color: green;}
a:focus {color: black;}
a:active {color: white;}
</style>
<a href="http://www.ringkee.com">應用樣式</a>
:left及:right偽類只作用於頁面內容。當頁面在左邊時應用:left指定的樣式，當頁面在右邊時應用:right指定的樣式。
:first-line只對div和p標記不效，樣式只應用於這兩個標記內的第一行內容。
<style>
:first-line {color: red;}
</style>
<div width:50px;>
該元素內的第一行內容應用紅色樣式。
</div>
:first-letter偽類也只能作用於div和p標記，與:first-line不同的是它只作用於標記內的第一個字符。如果我們想要每一行的開頭字符大一點就可使用該偽類。
<style>
:first-letter {font-size: 40pt;}
</style>
<p>這行文字開頭第一個字符的大小是40pt</p>
:before和:after偽類可在內容的前面或後面增加特定的內容或指定樣式。
<style>
p:before {content: "("; color: red;}
p:after {content: ")"; color: green;}
</style>
<p>這行文字前後會增加一對括號，前括號為紅色</p>
<p>這行文字前後會增加一對括號，後括號為綠色</p>
層疊選擇符是指當有多個選擇符的樣式都應用於同一個標記時的選擇規則。該規則利用一個三位數來確定，數字最大的就可選中。這三位數的確定規則的這樣的，如果選擇符中有ID選擇符，則百位數加1,否則為0。如果有屬性選擇符、類選擇符或偽類選擇符，則十位數加1，否則為0。如果有類型選擇符，則個位數加1，否則為0。如果選擇符是#div div，這三位數則是101。讓我們分析一下，#div是ID選擇符，所以在百位數上加1，div是類型選擇符，所以個位數上加1變成101。"*"表示0，優先級最低。
樣式表的主要功能是指定同一個文件在不同媒體上按不同的樣式顯示。通過在種方式可指定不同媒體
@media方式
<style>
@media screen {div{color:red;}}
@media print {div{color:green;}}
</style>
<div>不同媒體顯示不同顏色</div>
@import是另一種指定不同媒體的方式，它可引入外部的css文檔。它的語法格式是：
<style>
@import url("simple.css") screen;
</style>
在HTML4.0中，可以用LINK標記的media屬性為不同媒體類型指定樣式表。
<LINK rel="stylesheet" href="import.css" type="text/css" media="print">
!important規則會改變應用樣式的優先級，有!important參數樣式的優先級最高，會優先顯示。
<style>
h1 {color:red;}
h1 {color:green !important;}
</style>
<h1>字體為綠色</h1>