樣式表可幫我們解釋XML文檔中各元素的具體意思，所以通過樣式表可直接在瀏覽器上顯示XML文檔。在XML文檔在序言部分通過xml-stylesheet處理指令可指定關(guān)聯(lián)的樣式表。xml-stylesheet指令必須有一個(gè)href屬性和type屬性。href指向樣式表的URL，type指定樣式表的MIME類型：對(duì)
樣式表可幫我們解釋XML文檔中各元素的具體意思，所以通過樣式表可直接在瀏覽器上顯示XML文檔。目前主要的樣式表語言有：

CSS1(Cascading Stylesheets Level 1，層疊式樣式表1)
CSS2(Cascading Stylesheets Level 2，層疊式樣式表2)
XSLT(XSL Transformations 1.0 XSL 轉(zhuǎn)換 1.0)
在XML文檔在序言部分通過xml-stylesheet處理指令可指定關(guān)聯(lián)的樣式表。xml-stylesheet指令必須有一個(gè)href屬性和type屬性。href指向樣式表的URL，type指定樣式表的MIME類型：對(duì)CSS為text/css，對(duì)于XSLT為text/xml或application/xml。下面是一個(gè)簡單的使用樣式表的XML文檔：
<?xml version="1.0"?> <?xml-stylesheet href="test.css" type="text/css"?> ...
除以上兩個(gè)必須的屬性外，還有4種可選屬性：

media，標(biāo)識(shí)該樣式應(yīng)用于什么媒體，如報(bào)紙(paper)、計(jì)算機(jī)監(jiān)視器(screen)、電視(tv)或所有(all)。
charset，指明樣式表采用字符集編碼方式，如：utf-8。
alternate，指明是否有可選的樣式表，默認(rèn)為no，表明是主樣式表，如果為yes，則是備用樣式表。
title，在有alternate的前提下，title用于指定不同樣式表的標(biāo)題。如：
<?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"?> #默認(rèn)的主樣式表
樣式表現(xiàn)在已成為Web應(yīng)用中的一個(gè)關(guān)鍵技術(shù)，它的作用主要體現(xiàn)在以下三個(gè)方面：
本文由腳本之家（http://www.dbjr.com.cn）整理發(fā)布！轉(zhuǎn)載請(qǐng)注明出處，謝謝！

設(shè)計(jì)一個(gè)樣式表可以應(yīng)用于多個(gè)文檔。樣式表可以存在于XML文檔外，XML文檔可通過鏈接使用樣式表。這意味著如果你有幾千個(gè)文檔，都可以鏈接到同一個(gè)樣式表中，改變一個(gè)樣式表等于改變幾千個(gè)文檔的顯示效果。
實(shí)現(xiàn)內(nèi)容和表現(xiàn)的分離，增強(qiáng)文檔的一致性和可維護(hù)性。通過單一的樣式表，實(shí)現(xiàn)所有文檔顯示的一致。如果顯示樣式有變動(dòng)，我們只需維護(hù)有限的幾個(gè)樣式表就可以了。
實(shí)現(xiàn)一個(gè)文檔，多個(gè)樣式。通過樣式表，可把一篇文檔以HTML形式、PDF形式或文本形式顯示出來。

CSS2
CSS2是層疊樣式表，它是一種排版技術(shù)，能讓元素按特定的樣式顯示，如字體大小，顏色、布局等。在網(wǎng)頁中有三種使用方法：


用<style>標(biāo)記聲明，如
<style> div {font-size: 12pt;} div {color: blue;} </style>
在元素中用style屬性指定，如：
<div style="font-size: 12pt;color: blue">CSS測(cè)試</div>
用LINK標(biāo)記鏈接一個(gè)外部CSS文件，如：
<link rel="stylesheet" type="text/css" href="mycss.css">
按作用域來分，有三類的樣式表，分別是網(wǎng)頁解釋器樣式表、作者樣式表和瀏覽者樣式表。網(wǎng)頁解釋器樣式表也叫默認(rèn)的樣式表，當(dāng)沒有另外的樣式表加載時(shí)使用。作者樣式表就是網(wǎng)頁設(shè)計(jì)師設(shè)計(jì)的樣式表。瀏覽者樣式表是瀏覽網(wǎng)頁的用戶在瀏覽器上另外設(shè)置的樣式表。
CSS的基本數(shù)據(jù)類型

integer，表示整數(shù)，可取正負(fù)值。如：12，-24。
number，表示數(shù)字，可取正負(fù)值和小數(shù)。如：12.1，-14.3。
lenght，表示距離長度，可取正負(fù)值和小數(shù)，后跟一個(gè)單位，如:12em，12cm。單位又分相對(duì)單位和絕對(duì)單位，相對(duì)單位有：em，ex，px。絕對(duì)單位有：in(英寸)，cm(公分)，mm(公厘)，pt(等于1/72英寸)，pc(等于12pt)。
percentage，表示百分比值，可取正負(fù)和小數(shù)。如：20%，-40%。
uri，表示網(wǎng)絡(luò)資源。如：http://www.ringkee.com。
inherit參數(shù)值
<style> body {width: 600px;} .div1 {width: 120%;} .div2 {width: inherit;} 說明： div1的寬度是600px*120% div2的寬度繼承父元素body的參數(shù)，是600px
選擇符的作用是指定哪些元素使用哪些樣式。選擇符可以分為簡單選擇符和復(fù)合選擇符兩類，簡單選擇符是類型選擇符、通用選擇符加上零個(gè)或多個(gè)屬性選擇符、ID選擇符、偽類等組成。復(fù)合選擇符是用">"和" "號(hào)結(jié)合多個(gè)簡單選擇符組成。">"和" "號(hào)兩邊要加上空格。
本文由腳本之家（http://www.dbjr.com.cn）整理發(fā)布！轉(zhuǎn)載請(qǐng)注明出處，謝謝！
下面介紹各種選擇符：

通用選擇符，用"*"號(hào)表示，可用于所有標(biāo)記。如：
<style> * {font-size: 14pt;} *.EM {color: red;} </style> <div>應(yīng)用字體樣式</div> <em class="EM">應(yīng)用紅色樣式</em>
類型選擇符，與標(biāo)記名一樣，只作用已該標(biāo)記上。如：
<style> div {font-size: 14pt;} </style> <div>應(yīng)用樣式</div>
子代選擇符，HTML標(biāo)記是可嵌套的，子代選擇符可把樣式表應(yīng)用于子嵌套的子標(biāo)記上，如：
<style> div p b {font-size: 14pt;} </style> <div> <p>沒有應(yīng)用樣式</p> <p><b>應(yīng)用樣式</b></p> </div>
子選擇符，與子代選擇符類似，但它只調(diào)用第一層子元素。如：
<style> div > b {color: red;} div p > em {color: green;} </style> <div><b>當(dāng)b標(biāo)記是div標(biāo)記的子標(biāo)記時(shí)應(yīng)用紅色樣式</b></div> <div><p><em>當(dāng)em是p的子標(biāo)記且p是div的子標(biāo)記時(shí)應(yīng)用綠色樣式</em></p></div>
鄰近選擇符，當(dāng)兩個(gè)元素位于同一層且在位置是前后關(guān)系時(shí)，可以使用鄰近選擇符。兩個(gè)選擇符用" "號(hào)分開，如果A位于B之前，則B可應(yīng)用樣式。如：
<style> div p {color: red;} </style> <div>沒有應(yīng)用樣式</div> <p>應(yīng)用紅色樣式。</p>
屬性選擇符，HTML標(biāo)記有屬性，我們可為特定的屬性指定樣式。有四種寫法，分別是：

[屬性]，樣式只應(yīng)用于指定的屬性。
[屬性=值]，樣式只應(yīng)用于指定的屬性與值都相同的情況
[屬性~=值]，樣式只應(yīng)用于指定的屬性且屬性值包含指定值的情況，屬性值是用空格分隔的字符串。
[屬性|=值]，樣式只應(yīng)用于指定的屬性且屬性值是的第一個(gè)字符串是指定值的情況，屬性值是用"-"分隔的字符串。
<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">應(yīng)用紅色樣式</a> <a href="http://www.ringkee.com">應(yīng)用綠色樣式</a> <table summary~="This is a table> <tr> <td>應(yīng)用黑色樣式</td> </tr> </table> <table summary|="This-is-a-table> <tr> <td>應(yīng)用藍(lán)色樣式</td> </tr> </table>
類選擇符，與屬性選擇符類似，但它只指對(duì)class屬性應(yīng)用樣式。類選擇符用"."語法，如.value與[class~=value]是一樣的。
<style> .myid {color: red;} </style> <div class="myid">應(yīng)用紅色樣式</div>
ID選擇符，與屬性選擇符類似，但它只指對(duì)ID屬性，用"#"語法。
<style> #myid {color: red;} </style> <div id="myid">應(yīng)用紅色樣式</div>
:first-child偽類，當(dāng)標(biāo)記是另一個(gè)標(biāo)記的第一個(gè)子標(biāo)記時(shí)，應(yīng)用樣式。
<style> p:first-child {color: red;} </style> <p>p是body的第一個(gè)子標(biāo)記，應(yīng)用紅色樣式</p> <div>測(cè)試</div> <p>p標(biāo)記是body的第三個(gè)子標(biāo)記，不應(yīng)用紅色樣式</p>
:link和:visited偽類只作用于a標(biāo)記，在指定href屬性的前提下，:link表示a標(biāo)記還沒被點(diǎn)擊時(shí)的樣式，:visited表示被當(dāng)點(diǎn)后的樣式。
<style> a:link {color: blue;} a:visited {color: red;} </style> <a href="http://www.ringkee.com">鏈接沒點(diǎn)擊前是藍(lán)色的，點(diǎn)擊后是紅色的</a>
:hover，:active和:fouce偽類也只能作用于a標(biāo)記，且也要指定href屬性。:hover指定當(dāng)用戶把鼠標(biāo)移到a標(biāo)記上并且指針變成手型時(shí)應(yīng)用的樣式。:active指定點(diǎn)擊a鏈接并放開鼠標(biāo)時(shí)所顯示的樣式。:fouce指定用戶點(diǎn)擊a標(biāo)記瞬間，即鏈接成為焦點(diǎn)時(shí)所顯示的樣式。:hover要放在:link和:visited之后，否則:hover的樣式會(huì)覆蓋: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">應(yīng)用樣式</a>
:left及:right偽類只作用于頁面內(nèi)容。當(dāng)頁面在左邊時(shí)應(yīng)用:left指定的樣式，當(dāng)頁面在右邊時(shí)應(yīng)用:right指定的樣式。
:first-line只對(duì)div和p標(biāo)記不效，樣式只應(yīng)用于這兩個(gè)標(biāo)記內(nèi)的第一行內(nèi)容。
<style> :first-line {color: red;} </style> <div width:50px;> 該元素內(nèi)的第一行內(nèi)容應(yīng)用紅色樣式。 </div>
:first-letter偽類也只能作用于div和p標(biāo)記，與:first-line不同的是它只作用于標(biāo)記內(nèi)的第一個(gè)字符。如果我們想要每一行的開頭字符大一點(diǎn)就可使用該偽類。
<style> :first-letter {font-size: 40pt;} </style> <p>這行文字開頭第一個(gè)字符的大小是40pt</p>
:before和:after偽類可在內(nèi)容的前面或后面增加特定的內(nèi)容或指定樣式。
<style> p:before {content: "("; color: red;} p:after {content: ")"; color: green;} </style> <p>這行文字前后會(huì)增加一對(duì)括號(hào)，前括號(hào)為紅色</p> <p>這行文字前后會(huì)增加一對(duì)括號(hào)，后括號(hào)為綠色</p>
層疊選擇符是指當(dāng)有多個(gè)選擇符的樣式都應(yīng)用于同一個(gè)標(biāo)記時(shí)的選擇規(guī)則。該規(guī)則利用一個(gè)三位數(shù)來確定，數(shù)字最大的就可選中。這三位數(shù)的確定規(guī)則的這樣的，如果選擇符中有ID選擇符，則百位數(shù)加1,否則為0。如果有屬性選擇符、類選擇符或偽類選擇符，則十位數(shù)加1，否則為0。如果有類型選擇符，則個(gè)位數(shù)加1，否則為0。如果選擇符是#div div，這三位數(shù)則是101。讓我們分析一下，#div是ID選擇符，所以在百位數(shù)上加1，div是類型選擇符，所以個(gè)位數(shù)上加1變成101。"*"表示0，優(yōu)先級(jí)最低。
樣式表的主要功能是指定同一個(gè)文件在不同媒體上按不同的樣式顯示。通過在種方式可指定不同媒體

@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標(biāo)記的media屬性為不同媒體類型指定樣式表。
<LINK rel="stylesheet" href="import.css" type="text/css" media="print">
!important規(guī)則會(huì)改變應(yīng)用樣式的優(yōu)先級(jí)，有!important參數(shù)樣式的優(yōu)先級(jí)最高，會(huì)優(yōu)先顯示。
<style> h1 {color:red;} h1 {color:green !important;} </style> <h1>字體為綠色</h1>

最新評(píng)論