|
一 將css樣式表加入到網(wǎng)頁(yè)中
把css加入網(wǎng)頁(yè)中有四種方法 1.Embedded styles （植入樣式表） 所有的樣式表信息都列于HTML文件的頂部，同<body>分列,，例： <HTML> <STYLE TYPE="text/css"> <!-- H1{color:green; font-family:impact} P{background:yellow;font-family:courier} --> </STYLE> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> ....... 植入樣式表規(guī)則后,，瀏覽器在整HTML頁(yè)面中都執(zhí)行該規(guī)則。如果你想對(duì)網(wǎng)頁(yè)中一次性加入樣式表,，就可采用此方法,。 你可能注意到代碼中有兩處很奇怪：TYPE="text/css"屬性和標(biāo)簽。TYPE="text/css"設(shè)定采用MIME類型,，這樣以來,，不支持css的瀏覽器可以忽略樣式表。 注釋標(biāo)簽（<,！--和-->）更為重要,。有些老的瀏覽器（如MAC機(jī)用的IE2.0）即使在設(shè)定了TYPE="text/css"屬性時(shí)也不能忽略樣式表繼續(xù)執(zhí)行下面的命令。而且還會(huì)顯示樣式表的代碼,。而使用注釋標(biāo)簽則可以避免發(fā)生這種情況,。 2.Linked style（鏈接樣式表） 這里是樣式表功能發(fā)揮的淋漓盡致的地方。你可以將多個(gè)HTML文件都鏈接到一中中心樣式表文件,。這個(gè)外部的樣式表文件將設(shè)定你所有的網(wǎng)頁(yè)餓規(guī)則,。如果你改變樣式表文件的某一細(xì)節(jié),，所有的頁(yè)面都會(huì)隨之改變。 使用方法：查聲一個(gè)普通的網(wǎng)頁(yè),，但使用<STYLE>規(guī)則,，而是在<HEAD>內(nèi)使用，<LINK>標(biāo)簽： <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css" </HEAD> <BODY> .... (使用鏈接樣式表時(shí),，你無須使用注釋標(biāo)簽,。） 現(xiàn)在生成一個(gè)單獨(dú)的文本文件，起名mystyles.css(或者任何你喜歡的名字）,。文件內(nèi)容如下： H1{color:green;font-family:impact} P{background:yellow;font-family:courier} 如同發(fā)布HTML文件那樣,，將這個(gè)CSS文件發(fā)布到服務(wù)器中。在瀏覽器中觀看時(shí)你會(huì)發(fā)現(xiàn)瀏覽器將依照鏈接標(biāo)簽將鏈接了的HTML網(wǎng)頁(yè)按照樣式表的規(guī)則顯示,，HREF蘇醒中你可以選擇使用絕對(duì)或相對(duì)URL,。 3.Imported styles(輸入樣式表） 輸入外部樣式表的方法同鏈接的方法累世，不同指出在于鏈接法不能同其他方法結(jié)合使用,，但輸入法則可以,。例： <HTML> <STYLE TYPE="text/css"> <!-- @import url(company.css); H1{color  range;font-family:impact}--> </style> <HEAD> <TITLE> My First Stylesheet </TITLE> </HEAD> <BODY> <H1> Stylesheet:The Tool of the Web Design Gods </H1> <P> Amaze your friends! Squash your enemies! </P> </BODY> </HTML> 而其中輸入的company.css文件內(nèi)容如下： H1{color:green;font-family:times} P {background:yellow;font-family:courier} 在本例中瀏覽器首先輸入compny.css的規(guī)則（@import必須打頭），然后加入移植的規(guī)則,，從而為這個(gè)網(wǎng)頁(yè)產(chǎn)生規(guī)則集合,。 請(qǐng)注意，對(duì)于H1在外部樣式表文件和植入的樣式表文件中都設(shè)定了規(guī)則,。在兩者沖突的情況下,，瀏覽器應(yīng)執(zhí)行哪一項(xiàng)規(guī)則 呢？植入的規(guī)則此時(shí)將占上風(fēng),。 輸入樣式表的靈活性可以使你輸入無數(shù)多個(gè)樣式表,，并可以按照自己的喜好用植入的樣式表凌駕于輸入的樣式表以上。 4.Inline styles(行內(nèi)樣式表） 你還可以HTML行中加入樣式表規(guī)則,，如下： <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> <H1 STYLE="color range;font-family:impact">Stylesheets:The Tool OF The Web Design Gods </H1> <P STYLE="background:yellow; font-family:courier"> Amaze your friends! Squash your enemies! </P> </BODY> </HTML> 在這個(gè)例子中,，你無須在HTML頂部加入樣式表代碼。加入行內(nèi)的樣式表屬性將使瀏覽器同樣執(zhí)行樣式表規(guī)則,。 該方法不方便之處在于：你必須在每行中都加入樣式表規(guī)則,，否則下一行時(shí)瀏覽器將轉(zhuǎn)回到文件的缺省設(shè)置。 加入行內(nèi)的樣式表相比不如植入,、鏈接及輸入的樣式表那樣功能強(qiáng)大,，但是有時(shí)候你會(huì)發(fā)現(xiàn)它也很有用。 屏幕就是戰(zhàn)場(chǎng),，在一個(gè)HTML文件中,，如果有三種不同的樣式表規(guī)則都使用P做為其選擇,。輸入的樣式表指示瀏覽器將<P>文字用紅色顯示,，而植入的樣式表指示瀏覽器用藍(lán)色顯示,，而行內(nèi)樣式表指示瀏覽器用黃色。 二 規(guī)則 好在支持樣式表的瀏覽器自身配有樣式表的串接順序來應(yīng)付這種情形,?？傆袔追N樣式表規(guī)則要比其他的規(guī)則更重要。根據(jù)正式的規(guī)定,，以下為樣式表的串接順序： 1.Inline styles(行內(nèi)樣式） 2.Embedded styles(植入樣式） 3.Linked styles(鏈接樣式） 4.Imported styles(輸入樣式） 瀏覽器將按照上述順序執(zhí)行樣式表的指令,。 但是還有一個(gè)問題，如果同一種類的多個(gè)規(guī)則相互沖突怎么辦,？比如,，如果一項(xiàng)植入樣式表規(guī)則將<P>以綠色顯示，而另一個(gè)規(guī)則要求以紅色顯示,。 多虧了聰明的樣式表標(biāo)準(zhǔn)的發(fā)明人,，對(duì)于這種沖突也有一個(gè)順序，但很復(fù)雜,。這里有一個(gè)極其簡(jiǎn)單的解決順序： 使用特別說明的樣式表規(guī)則,，例如： BODY{color:green} P {color:red} 有一項(xiàng)規(guī)則特別說明<P>中的文字用紅色顯示，但它同時(shí)也繼承了<BODY>的綠色規(guī)定,。但是特別說明了的規(guī)則的重要性要大于繼承規(guī)則,，所以<P>之內(nèi)的文字用紅色顯示。 應(yīng)用繼承的樣式表規(guī)則 按照樣式表規(guī)則在HTML中的顯示順序執(zhí)行 P{color:green} P{color:red} 當(dāng)無法使用上述規(guī)則時(shí),，瀏覽器將根據(jù)規(guī)則在代碼中顯示順序執(zhí)行,。在上例中，<P>中的文字紅色顯示,，以為它是最后給出的規(guī)則,。 注意：正式的串接樣式表規(guī)定對(duì)于串接順序有更詳細(xì)的規(guī)定。但由于執(zhí)行規(guī)定Netscape Coommunicator和Inter Explorer都不支持,，所以本文中細(xì)述,。 最后一個(gè)問題：如果樣式表規(guī)則同HTML標(biāo)簽沖突時(shí)，如何處理,？我們看一下這個(gè)例子： I{font-family:impact} <p>I think <I> <FONT FACE="Times'> East of Eden </FONT> </I> is Stein back's best novel </P> 該例中樣式表規(guī)則要求瀏覽器使用Impact,但是傳統(tǒng)的HTML<FONT FACE>標(biāo)簽要求用Times字體,，一個(gè)很明顯的傳統(tǒng)。 根據(jù)正式的樣式表規(guī)定,，應(yīng)該優(yōu)先執(zhí)行樣式表規(guī)則,。 但是當(dāng)前流行的幾種瀏覽器如Netscape 和IE 4.0都規(guī)定應(yīng)優(yōu)先執(zhí)行HTML 轉(zhuǎn)自電腦報(bào) |
|
|
