?? 0402-0100.htm
字號(hào):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0071)http://162.105.170.55/ASPs/GetLearningArticleTemp.asp?section=0402-0100 -->
<HTML><HEAD><TITLE>XML中國(guó)論壇 - 初學(xué)進(jìn)階 - 4.2.1 CSS的書寫規(guī)范</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TABLE {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"
}
.pt9 {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"
}
.pt10 {
FONT-WEIGHT: 700; FONT-SIZE: 10pt; LINE-HEIGHT: 18pt; FONT-FAMILY: "宋體"
}
.TempOutline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; COLOR: #666666; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.TempOutline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; COLOR: #666666; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage0 {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage111 {
FONT-SIZE: 9pt; MARGIN-LEFT: 51pt; TEXT-INDENT: -64pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
</STYLE>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0
onload=""><!-- 以下為主體內(nèi)容 -->
<div align="center">
<center>
<TABLE width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<TBODY>
<TR vAlign=top>
<TD width=38 rowSpan=2></TD>
<TD vAlign=center width="510" >
<p align="center"><IMG height=33
src="image/title_learner.gif" width=226></TD>
<TD width=38 rowSpan=2></TD>
</TR>
<TR vAlign=top>
<TD width="510" ><!-- 正文內(nèi)容 -->
<DIV class=pt10><B>4.2.1 CSS的書寫規(guī)范</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>層疊樣式單CSS是一種樣式描述規(guī)則，目前W3C有兩個(gè)推薦標(biāo)準(zhǔn)，CSS1和CSS2。CSS1于1996年12月通過，CSS2則于1998年5月通過。CSS2是在CSS1的基礎(chǔ)上制定的，基本上涵蓋了CSS1，并在CSS1的基礎(chǔ)上增加了媒體類型、特性選擇符、聲音樣式等功能，并對(duì)CSS1原有的一些功能進(jìn)行了擴(kuò)充。</P>
<P>其實(shí)，CSS制定之初的服務(wù)對(duì)象并不是XML，它最初是針對(duì)HTML提出的樣式單語言，不過現(xiàn)在也身兼數(shù)職，同樣可以很好地應(yīng)用于描述XML文檔的表現(xiàn)。利用CSS，我們可以定義HTML或XML文檔中元素的顯示效果，包括元素的位置、顏色、背景、邊空、字體、排版格式等等。在具體考察CSS在XML中的應(yīng)用之前，讓我們先來講一些有關(guān)CSS放之四海而皆準(zhǔn)的規(guī)則，也就是CSS的書寫規(guī)范。</P>
<P>CSS的基本思想是為結(jié)構(gòu)文檔中的各個(gè)標(biāo)記定義出相對(duì)應(yīng)的一組顯示樣式。定義的基本格式為：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">選擇符 { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>下面我們給出一個(gè)HTML的例子，為讀者增加一些感性認(rèn)識(shí)：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><HTML><BR><HEAD> <BR>
<STYLE><BR> H1{color:red; }
<BR> .myclass{color:green}<BR>
H2.myclass{color:blue}<BR> #myid{color:brown}<BR>
</STYLE><BR></HEAD>
<P><BODY> <BR> <H1>這是紅色的一號(hào)標(biāo)題。</H1>
<BR> <P
class="myclass">"myclass"類中的正文是綠色的。</P><BR> <H2
class="myclass">但"myclass"類中的二號(hào)標(biāo)題是藍(lán)色的。</H2><BR><P
class="myclass"
id="myid">以"myid"為標(biāo)識(shí)的正文則是棕色的。</P><BR></BODY><BR></HTML></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>它的瀏覽結(jié)果為：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD>
<H1><FONT color=#ff0000>這是紅色的一號(hào)標(biāo)題。</FONT></H1>
<P class=myclass><FONT color=#00ff00>"myclass"類中的正文是綠色的。</FONT></P>
<H2 class=myclass><FONT
color=#0000ff>但"myclass"類中的二號(hào)標(biāo)題是藍(lán)色的。</FONT></H2>
<P class=myclass id=myid><FONT
color=brown>以"myid"為標(biāo)識(shí)的正文則是棕色的。</FONT></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>CSS幾經(jīng)修訂，現(xiàn)已<FONT
color=#000000>包容了非常全</FONT>面復(fù)雜的顯示效果。單介紹CSS，就可專門出一本書。為了節(jié)省篇幅，突出重點(diǎn)，我們只大致介紹一些CSS的基本定義方法，如果讀者需要更詳細(xì)的信息，還請(qǐng)查相關(guān)的書籍和參考手冊(cè)。
<OL>
<LI><STRONG>選擇符</STRONG> </LI></OL>
<P>選擇符是指被施加樣式的元素，瀏覽器在文件中碰到這些元素時(shí)，就使用定義好的樣式來顯示它們。基本的選擇符包括標(biāo)記、類、標(biāo)識(shí)、偽類等等。
<UL>
<LI><EM>標(biāo)記(tag)選擇符</EM><BR>標(biāo)記可以是HTML中的標(biāo)記，也可以是XML中已定義的標(biāo)記。具體的定義方式是：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">標(biāo)記名 { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>在本例中，為HTML中的標(biāo)記<H1>定義了樣式，將該標(biāo)記下的文本用紅色顯示，因此，瀏覽結(jié)果中的第一行是紅色的。</P>
<LI><EM>類(class)選擇符</EM><BR>無論是HTML還是XML文檔，有些內(nèi)容是可以分類處理的，相應(yīng)地，對(duì)于某一類的內(nèi)容可以定義不同的樣式予以顯示。例子中定義了一個(gè)類“myclass”，并為它定義了綠色顯示的樣式，所以屬于該類的元素，即第二行文本，顯示出來是綠色的。<BR>需要說明的是，定義樣式時(shí)class可以與標(biāo)記相關(guān)聯(lián)，也就是說class的樣式受到包含它的標(biāo)記的制約。因此，在樣式單的第三行為屬于myclass類的標(biāo)記<H2>定義了黃色顯示的樣式，相應(yīng)地，第三行文本呈黃色。<BR>與標(biāo)記相關(guān)的類選擇符與不相關(guān)的類選擇符的定義方法分別是：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">標(biāo)記名.類名 { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>和</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">.類名 { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>另外，在對(duì)XML文檔中的類定義樣式時(shí)，首先該class應(yīng)該是在DTD中預(yù)先聲明了的，否則會(huì)導(dǎo)致錯(cuò)誤的發(fā)生。</P>
<LI><EM>標(biāo)識(shí)(id)選擇符</EM><BR>在HTML/XML文檔中，常常要唯一地標(biāo)識(shí)一個(gè)元素，即賦予它一個(gè)id標(biāo)識(shí)，以便在對(duì)整個(gè)文檔進(jìn)行處理時(shí)能夠很快的找到這個(gè)元素。CSS也可以將標(biāo)識(shí)id作為選擇符進(jìn)行樣式設(shè)定，定義的方法與類大同小異，只要把符號(hào)“.”改成“#”就行了。方法是：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">標(biāo)記名#標(biāo)識(shí)名 { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>和</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">#標(biāo)識(shí)名 { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>一般情況下，為標(biāo)識(shí)定義的樣式是優(yōu)先于為類定義的樣式的，因此例子中第四行中的文本雖然屬于類“myclass”，但顯示效果為棕色。</P>
<LI><EM>偽類(pseudo-classe)選擇符<BR></EM>偽類選擇符主要是指鏈接錨點(diǎn)的一些特性，在CSS中可以為鏈接錨點(diǎn)的不同狀態(tài)賦予不同的屬性。如：<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD align=middle width="40%"><STRONG>示 例</STRONG></TD>
<TD align=middle width="50%"><STRONG>效 果</STRONG></TD></TR>
<TR>
<TD width="40%">A:link { color: blue }</TD>
<TD width="50%">沒訪問過的鏈接顏色顯示為藍(lán)色</TD></TR>
<TR>
<TD width="40%">A:visited { color: red }</TD>
<TD width="50%">訪問過的鏈接顏色顯示為紅色</TD></TR>
<TR>
<TD width="40%">A:active { color: yellow }</TD>
<TD width="50%">激活的鏈接顏色顯示為黃色</TD></TR>
<TR>
<TD width="40%">A:hover { color: green }</TD>
<TD
width="50%">鼠標(biāo)滑過鏈接時(shí)顏色顯示為綠色</TD></TR></TBODY></TABLE></CENTER></DIV></LI></UL>
<P>此外，可以將某個(gè)樣式同時(shí)施加在多個(gè)選擇符指定的不同元素上，只要將在大括號(hào)括起來的樣式定義之前的各選擇符之間用逗號(hào)分隔即可。如果選擇符之間用空格分隔，則是用前面的父元素來約束后面的子元素。</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">選擇符，選擇符，... { 樣式屬性：取值；樣式屬性：取值；... }
</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>和</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">選擇符 選擇符 ... { 樣式屬性：取值；樣式屬性：取值；...
}</TD></TR></TBODY></TABLE></CENTER></DIV>
<OL>
<LI value=2><STRONG>樣式屬性</STRONG> </LI></OL>
<P>樣式屬性就是指元素的哪些屬性可以在樣式單中給予改變，在CSS1和CSS2中有很多的篇幅講樣式屬性。其中CSS1中包括字體屬性（字形、大小、粗細(xì)、傾斜等）、顏色屬性、背景屬性、文本屬性、邊框?qū)傩裕?yè)邊空、邊框、內(nèi)空等）、顯示屬性（獨(dú)立塊、內(nèi)聯(lián)、列表、表格、隱藏等）幾大類。在CSS2中對(duì)顯示屬性的最大改進(jìn)就是增加了表格的顯示方式，此外還增加了一些與頁(yè)面排版、跨媒體出版相關(guān)的內(nèi)容。
<OL>
<LI value=3><STRONG>屬性值</STRONG> </LI></OL>
<P>在定義樣式時(shí)，除需指出樣式所施加的元素、元素的屬性之外，還要給屬性賦予一個(gè)新值。根據(jù)屬性的不同，屬性值的選取也有所不同，主要不外乎以下四種：
<UL>
<LI><EM>長(zhǎng)度</EM><BR>在樣式中很多的屬性都與長(zhǎng)度有關(guān)，如寬高、字號(hào)、字距、行距、邊空、線寬等等。需要注意的是：當(dāng)長(zhǎng)度作為一個(gè)尺寸的度量，其單位是非常重要的，否則，失之毫厘，謬以千里，顯示結(jié)果可能就會(huì)出乎你的意料之外了。
<LI><EM>URL</EM><BR>有時(shí)需要給某些屬性賦予URL值，如背景圖象屬性（background-image）。在進(jìn)行URL賦值時(shí)，要將URL放在url()之中，也可以將其用單引號(hào)或者雙引號(hào)括起來。
<LI><EM>顏色</EM><BR>在CSS中顏色是個(gè)很重要的屬性，顏色值的賦值有四種形式：顏色名稱、十六進(jìn)制數(shù)、十進(jìn)制數(shù)及百分比方式，其中前兩種方式較為常用。例如對(duì)于紅色來講可以用下面幾種方法定義：
</LI></UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<DL>
<DD>p { color:red }
<DD>p { color:#ff0000 }
<DD>p { color:rgb(255,0,0) }
<DD>p { color:rgb(100%, 0%, 0%) } </DD></DL></BLOCKQUOTE></BLOCKQUOTE>
<UL>
<LI><EM>關(guān)鍵字<BR></EM>這里的關(guān)鍵字是指預(yù)先定義好的字符型屬性值，對(duì)于不同的屬性有不同關(guān)鍵字值。例如上面提到的顏色名稱實(shí)際上就屬于關(guān)鍵字，其它的又如用于線型的none、solid、dashed、double等等。<BR><STRONG><BR></STRONG></LI></UL></DIV>
<P></P>
<P></P></TD></TR></TBODY></TABLE>
</center>
</div>
<P></P>
<P>
<P></P></BODY></HTML>?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -