Posted on 2005-04-24 09:20
zool 閱讀(215)
評(píng)論(0) 編輯 收藏 所屬分類:
other
1
一個(gè)樣式表由樣式規(guī)則組成, 以告訴瀏覽器怎樣去呈現(xiàn)一個(gè)文檔. 有很多將樣式規(guī)則加入到你的HTML文檔中的方法, 但最簡(jiǎn)單的啟動(dòng)方法是使用HTML的STYLE組件. 這個(gè)元素放置于文檔的HEAD部分, 包含網(wǎng)頁(yè)的樣式規(guī)則.
要注意到盡管STYLE元素是試驗(yàn)樣式表的好方法, 它具有某些在用戶使用這種方法之前應(yīng)該考慮的缺點(diǎn). 不同方法的優(yōu)點(diǎn)和缺點(diǎn)在將樣式表加入到HTML中部分中有討論。
每個(gè)規(guī)則的組成包括一個(gè)選擇符--通常是一個(gè)HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.
有很多的屬性可以用于定義一個(gè)元素. 每個(gè)屬性帶一個(gè)值, 共同地描述選擇符應(yīng)該如何呈現(xiàn).
樣式規(guī)則組成如下:
選擇符 { 屬性: 值 }
單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開(kāi):
選擇符 { 屬性1: 值1; 屬性2: 值2 }
以下是一段定義了H1和H2元素的顏色和字體大小屬性:
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
--------------------------------------------------------------------------------
有很多方法將樣式表加入到HTML中，每個(gè)都帶有自己的優(yōu)點(diǎn)和缺點(diǎn)。新的HTML元素和屬性已被加入以允許樣式表與HTML文檔更簡(jiǎn)易地組合起來(lái)。
連接到一個(gè)外部的樣式表
嵌入一個(gè)樣式表
輸入一個(gè)樣式表
內(nèi)聯(lián)樣式
CLASS屬性
ID屬性
SPAN元素
DIV元素
關(guān)于認(rèn)證的備注
--------------------------------------------------------------------------------
連接到一個(gè)外部的樣式表
一個(gè)外部的樣式表可以通過(guò)HTML的LINK元素連接到HTML文檔中:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
< LINK>標(biāo)記是放置在文檔的HEAD部分。可選的TYPE屬性用于指定媒體類型--text/css是一個(gè)層疊樣式表--允許瀏覽器忽略它們不支持的樣式表類型。為CSS文件配置服務(wù)器而將text/css當(dāng)作Content-type內(nèi)容發(fā)送出去也是一個(gè)好注意。
外部樣式表不能含有任何像<HEAD>或<STYLE>這樣的HTML的標(biāo)記。樣式表僅僅由樣式規(guī)則或聲明組成。一個(gè)單獨(dú)由
P { margin: 2em }
組成的文件就可以用作外部樣式表了。
<LINK>標(biāo)記也有一個(gè)可選的MEDIA屬性，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有
screen (缺省值)，提交到計(jì)算機(jī)屏幕；
print， 輸出到打印機(jī)；
projection，提交到投影機(jī)；
aural，揚(yáng)聲器；
braille，提交到凸字觸覺(jué)感知設(shè)備；
tty，電傳打字機(jī) (使用固定的字體)；
tv，電視機(jī)；
all，所有輸出設(shè)備。
多樣的媒體通過(guò)用逗號(hào)隔開(kāi)的列表或值all指定。
Netscape Navigator 4.x 錯(cuò)誤地忽略除了screen值外的任何使用MEDIA值聲明的連接或嵌入樣式表。例如，MEDIA="screen,projection"會(huì)令到樣式表被Navigator 4.x忽略，盡管展示的設(shè)備是計(jì)算機(jī)的屏幕。Navigator 4.x 也忽略使用MEDIA=all聲明的樣式表。
REL 屬性用于定義連接的文件和HTML文檔之間的關(guān)系。REL=StyleSheet指定一個(gè)固定或首選的樣式而REL="Alternate StyleSheet"定義一個(gè)交互樣式。固定樣式在樣式表激活時(shí)總被應(yīng)用。缺少的TITLE屬性，就像例子中的第一個(gè)<LINK>標(biāo)記，定義一個(gè)固定樣式。
一個(gè)首選樣式會(huì)自動(dòng)被應(yīng)用，就像例子中的第二個(gè)<LINK>標(biāo)記。REL=StyleSheet和一個(gè)TITLE屬性的組合指定一個(gè)首選的樣式。網(wǎng)頁(yè)制作者不能指定多于一個(gè)的首選樣式。
交互樣式通過(guò)REL="Alternate StyleSheet"指出。例子中的第三個(gè)<LINK>標(biāo)記定義一個(gè)交互樣式，用戶可以選擇用來(lái)代替首選樣式表。
注意現(xiàn)在的瀏覽器一般都缺乏選擇交互樣式的能力。
單一的樣式也可以通過(guò)多個(gè)樣式表給出
<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
在這個(gè)例子中，三個(gè)樣式表組合成一?quot;Contemporary"樣式，作為一個(gè)首選樣式表被應(yīng)用。要組合多個(gè)樣式表成一個(gè)單一樣式，必須在每個(gè)樣式表中使用相同TITLE。
當(dāng)樣式被應(yīng)用到很多的網(wǎng)頁(yè)時(shí)，一個(gè)外部樣式表是理想的。網(wǎng)頁(yè)制作者使用外部樣式表可以改變整個(gè)網(wǎng)站的外觀而僅僅通過(guò)改變一個(gè)文件。同樣的，大多數(shù)瀏覽器會(huì)保存外部樣式表在緩沖區(qū)，從而如果樣式表在緩沖區(qū)就避免了在展示網(wǎng)頁(yè)時(shí)的延遲。
Microsoft Internet Explorer 3 for Windows 95/NT4并不支持來(lái)自連接的樣式表中的BODY 背景圖象或顏色。如果考慮到這個(gè)錯(cuò)誤，網(wǎng)頁(yè)制作者不妨提供另外的包括一個(gè)背景圖象或顏色的結(jié)構(gòu)，例縝度牖蚰諏劍蚴褂肂ODY元素的 BACKGROUND屬性。
--------------------------------------------------------------------------------
嵌入一個(gè)樣式表
一個(gè)樣式表可以使用STYLE元素在文檔中嵌入:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用于指定媒體類型，LINK元素也一樣。同樣地，TITLE和MEDIA屬性也可以用STYLE指定。
舊版本的瀏覽器，并不能識(shí)別STYLE元素，會(huì)將其當(dāng)作BODY的一部分照常展示其內(nèi)容，從而使這些樣式表對(duì)用戶是可見(jiàn)的。要防止這樣做，STYLE元素的內(nèi)容要包含一個(gè)SGML注解(<!-- comment -->)在里面，像上述例子那樣。
嵌入的樣式表可用于當(dāng)一個(gè)文檔具有獨(dú)一無(wú)二的樣式的時(shí)候。如果多個(gè)文檔都使用同一樣式表，那么外部樣式表會(huì)更適用。
--------------------------------------------------------------------------------
輸入一個(gè)樣式表
一個(gè)樣式表可以使用CSS的@import 聲明被輸入。這個(gè)聲明用于一個(gè)CSS文件或內(nèi)部的STYLE元素:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
注意其它的CSS規(guī)則應(yīng)該仍然包括在STYLE元素中，但所有的@import 聲明必須放在樣式表的開(kāi)始部分。任意在樣式表中指定了的規(guī)則，其自身超越在輸入樣式表中對(duì)立的規(guī)則。例如上例，即使一個(gè)輸入的樣式表包含DT { background: aqua }，定義項(xiàng)(definition terms)依然會(huì)是黃色的背景。
被輸入的樣式表的順序?qū)τ谒鼈冊(cè)鯓訉盈B是很重要的。在上述的例子中，如果style.css輸入的樣式表指定了STRONG元素會(huì)顯示為紅色而punk.css樣式表指定了STRONG元素顯示為黃色的話，那么后面的規(guī)則會(huì)獲勝，而STRONG元素會(huì)顯示為黃色。
輸入的樣式表對(duì)于模塊性效果很有用處。例如，一個(gè)網(wǎng)站可以通過(guò)使用了的選擇符分類樣式表。一個(gè)simple.css樣式表給出公共的元素像BODY、P、 H1和H2。此外，一個(gè)extra.css樣式表給出較少共通的元素像CODE、BLOCKQUOTE和DFN。一個(gè)tables.css樣式表可以用于定義變革元素的規(guī)則。這三個(gè)樣式表在需要的時(shí)候可以使用@import 聲明包括在HTML中。三個(gè)樣式表也可以通過(guò)LINK元素組合。
--------------------------------------------------------------------------------
內(nèi)聯(lián)樣式
樣式可以使用STYLE屬性內(nèi)聯(lián)。STYLE屬性可以應(yīng)用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。這個(gè)屬性將任何數(shù)量的CSS聲明當(dāng)作自己的值，而每個(gè)聲明用分號(hào)隔開(kāi)。以下是一個(gè)例子:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> 這段的樣式是紅色的New Century Schoolbook字，如果字體可用的話。</P>
注意在STYLE中New Century Schoolbook包含在單引號(hào)中，因?yàn)殡p引號(hào)被用作包含樣式聲明。內(nèi)聯(lián)的樣式比其他方法更加靈活。要使用內(nèi)聯(lián)樣式，必須使用Content-Style-Type HTTP頁(yè)眉擴(kuò)展對(duì)整個(gè)文檔進(jìn)行單獨(dú)的樣式表語(yǔ)言聲明。使用內(nèi)聯(lián)CSS的網(wǎng)頁(yè)制作者必須將text/css作為Content-Style-Type HTTP頁(yè)眉，或在HEAD部分包括以下標(biāo)記:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
因?yàn)楹托枰故镜膬?nèi)容混合在一起，內(nèi)聯(lián)樣式會(huì)失去一些樣式表的優(yōu)點(diǎn)。同樣地，內(nèi)聯(lián)樣式默認(rèn)地接受所有媒體，因?yàn)闆](méi)有任何的為內(nèi)聯(lián)樣式指定明確的媒體的語(yǔ)句。這種方法應(yīng)該盡量少用，如當(dāng)一個(gè)樣式會(huì)應(yīng)用在所有媒體到一個(gè)元素的個(gè)別情況。如果樣式會(huì)被應(yīng)用到單一元素的場(chǎng)合，但只能使用確認(rèn)的媒體的話，使用ID屬性代替STYLE屬性。
--------------------------------------------------------------------------------
CLASS屬性
CLASS屬性用于指定元素屬于何種樣式的類。例如，樣式表可以加入punk和warning類:
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }
這些類可以使用CLASS屬性在HTML中引用:
<H1 CLASS=punk>屬性擴(kuò)展</H1>
<P CLASS=warning>一些屬性擴(kuò)展會(huì)有負(fù)值的邊效果，產(chǎn)生于支持和不支持的瀏覽器上...
在這個(gè)例子中，punk類可以用于任何BODY元素因?yàn)樗跇邮奖碇袥](méi)有HTML元素關(guān)聯(lián)。而在這個(gè)例子的樣式表，warning類只能用于P元素。
一個(gè)良好的習(xí)慣是在命名類的時(shí)候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的warning類也可以命名為red，但如果網(wǎng)頁(yè)制作者決定改變這個(gè)類的樣式為別的顏色，或希望為那些使用PC喇叭的人定義為aural(聽(tīng)覺(jué))樣式的話，那么這個(gè)名字就變得毫無(wú)意義了。
類會(huì)是應(yīng)用樣式到HTML文檔中在結(jié)構(gòu)上一樣的部分的有效的辦法。例如，本頁(yè)使用類給CSS源代碼和HTML源代碼使用不同的樣式。
--------------------------------------------------------------------------------
ID屬性
ID屬性用于定義一個(gè)元素的獨(dú)特的樣式。一個(gè)CSS規(guī)則如
#wdg97 { font-size: larger }
可以通過(guò)ID屬性應(yīng)用到HTML中:
<P ID=wdg97>歡迎訪問(wèn)Web Design Group及TV water 168!</P>
整個(gè)文檔當(dāng)中的每個(gè)ID屬性的值都必須是唯一的。其值必須是一個(gè)以字母開(kāi)頭緊接字母、識(shí)字或連字符。字母限于A-Z和a-z。
注意HTML 4.0允許在ID屬性中有句號(hào)，但CSS1不允許在ID選擇符中有句號(hào)。也要注意CSS1允許Unicode字符161-255而且忽略Unicode字符為一個(gè)數(shù)字代碼，但HTML 4.0不允許這些字符在一個(gè)ID屬性值當(dāng)中。
當(dāng)一個(gè)樣式只需要在任何文檔中應(yīng)用一次時(shí)，使用ID是很適合的。 ID與STYLE屬性相比，在于ID允許指定媒體的樣式，而且也可以被應(yīng)用于多個(gè)文檔(雖然每個(gè)文檔只用一次)。
--------------------------------------------------------------------------------
SPAN元素
SPAN元素被加入到HTML中以允許網(wǎng)頁(yè)制作者給出樣式但無(wú)須附加在一個(gè)HTML的結(jié)構(gòu)元素上。SPAN在樣式表中作為一個(gè)選擇符使用，而且它也能接受STYLE、CLASS和ID屬性。
SPAN是一個(gè)內(nèi)聯(lián)元素，所以它可以作為HTML中的元素如EM和STRONG使用。最重要的差別在于雖然EM和STRONG帶有結(jié)構(gòu)的意義，但SPAN就沒(méi)有這樣的意義。它的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何的作用。
一些SPAN例子如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN>前面是
段落中少數(shù)的文字，會(huì)是小型大寫(xiě)字母。樣式也可以內(nèi)聯(lián)，如改變文
字的樣式為<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>
--------------------------------------------------------------------------------
DIV元素
DIV元素在功能上與SPAN元素相似，最主要的差別在于DIV ("division"，"部分"的簡(jiǎn)稱)是一個(gè)塊級(jí)元素。DIV可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。例如:
<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定義，但HTML 3.2中只有ALIGN屬性能兼容。HTML 4.0在屬性中加入CLASS、STYLE、和ID屬性。</P>
<P>因?yàn)镈IV可以包含其他塊級(jí)集成，在用于建立文檔的大型章節(jié)例如本備注是很有用的。</P>
<P>要求關(guān)閉標(biāo)記。</P>
</DIV>
--------------------------------------------------------------------------------
關(guān)于認(rèn)證的備注
少數(shù)使用了CSS樣式的文檔能在HTML3.2 (Wilbur)層(在WDG網(wǎng)站，譯者注)得到認(rèn)證。HTML3.2不會(huì)解釋SPAN元素，也不解釋CLASS、STYLE或ID屬性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA屬性。
這些有關(guān)的樣式元素和屬性對(duì)不支持的瀏覽器不會(huì)有害，因?yàn)樗鼈兡馨踩睾雎浴Ｎ臋n使用這些元素和屬性可以被認(rèn)證防御于HTML 4.0。
看到蟲(chóng)子老是有排版的問(wèn)題。。。 就轉(zhuǎn)了一貼。。現(xiàn)在的網(wǎng)頁(yè)布局都用層了。。 （哎，，其實(shí)也我也習(xí)慣了表格。。雖然很麻煩，，但是熟悉了。）其實(shí)層布局確實(shí)是簡(jiǎn)單很多。。。。 大家看看吧。
__________________