1.6 串接

2018-11-06 17:52 更新

1.6 串接



屏幕就是一個(gè)戰(zhàn)場，在一個(gè)HTML文件中，如果有3種不同的樣式表規(guī)則都使用P作為其選擇。輸入的樣式表指示瀏覽器將<P>文字用紅色顯示，而植入的樣式表指示瀏覽器用藍(lán)色顯示，而行內(nèi)樣式表指示瀏覽器用黃色。

那么可憐的瀏覽器該聽誰的呢？

好在支持樣式表的瀏覽器自身配有樣式表的串接順序來應(yīng)付這種情形。總有幾種樣式表規(guī)則要比其它的規(guī)則更重要。根據(jù)正式的規(guī)定，以下為樣式表的串接順序：

  1. Inline styles （行內(nèi)樣式）

  2. Embedded styles （植入樣式）

  3. Linked styles （鏈接樣式）

  4. Imported styles （輸入樣式）

  5. Default browser styles（缺省瀏覽器樣式）


瀏覽器將按照上述順序執(zhí)行樣式表的指令。

但是還要一個(gè)問題。如果同一種類的多個(gè)規(guī)則相互沖突怎么辦？比如，如果一項(xiàng)植入樣式表規(guī)則將<P>以綠色顯示，而另一個(gè)規(guī)則要求以紅色顯示？

多虧聰明的樣式表標(biāo)準(zhǔn)的發(fā)明人，對于這種沖突也有一個(gè)順序，但很復(fù)雜。這里有一個(gè)極其簡單的解決順序：

1.使用特別說明的樣式表規(guī)則，例： 

BODY { color: green }
P { color: red }

有一項(xiàng)規(guī)則特別說明<P> 中的文字一紅色顯示，但它同時(shí)也繼承了<BODY>的綠色規(guī)定。但是特別說明了的規(guī)則的重要性要大于繼承的規(guī)則，所以<P>之內(nèi)的文字一紅色顯示。


2.應(yīng)用繼承的樣式表規(guī)則

如果不存在第1步中所列的特別說明的規(guī)則（比如存在特別說明了的多項(xiàng)規(guī)則），則瀏覽器轉(zhuǎn)向執(zhí)行繼承的規(guī)則。如果找不到繼承的規(guī)則，則瀏覽器轉(zhuǎn)向執(zhí)行第3步。


3.按照樣式表規(guī)則在HTML中的顯示順序執(zhí)行。 

P { color: green }
P { color: red }

當(dāng)無法適用上述規(guī)則時(shí)，瀏覽器將根據(jù)規(guī)則在代碼中顯示順序執(zhí)行。在上例中，<P>作為講座一紅色顯示，因?yàn)樗亲詈蠼o出的規(guī)則。


注意：正式的串接樣式表規(guī)定對于串接順序有更詳細(xì)的規(guī)定。但由于執(zhí)行規(guī)定Netscape Communicator 和Internet 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
beck'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ī)則。

但是最主要的幾種瀏覽器Netscape 和IE 4.0 都規(guī)定應(yīng)優(yōu)先執(zhí)行HTML。唉.......

你看到了吧，瀏覽器不能如我們希望的那樣應(yīng)用串接樣式表。節(jié)哀順變吧。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號