1.5 分類(lèi)及其它技巧

2018-11-06 17:45 更新
1.5 分類(lèi)及其它技巧


我們已經(jīng)學(xué)習(xí)了所有的樣式表基本語(yǔ)法。下面我將給你講幾個(gè)你肯定會(huì)非常感興趣的技巧和快捷方式.

分類(lèi)

我先前已經(jīng)講過(guò)所有的HTML標(biāo)簽都可以用作選擇，并附加樣式表說(shuō)明.但是如果你想達(dá)到的目的比這還要復(fù)雜該如何處理呢？比如,你想讓主體文字的1段用綠色顯示，第2段用紫色顯示，而第3段用灰色顯示，你能做到嗎？

這種情況下分類(lèi)將發(fā)揮作用。你可以將段落P分成3種不同的類(lèi)別，每一類(lèi)應(yīng)用不同的樣式表說(shuō)明。這些規(guī)則（不論是植入的還是外部樣式表文件）將以以下方式顯示： 

    P.first { color: green }
P.second { color: purple }
P.third { color: gray }


  • 你的HTML代碼如下： 


    <P CLASS=first>The first paragraph, 
with a class name of "first."</P>
<P CLASS=second>The second paragraph, with a class name of "second."</P>
<P CLASS=third>The third paragraph, 
with a class name of "third."</P>



你可以給類(lèi)別起任何一種名字，但不要忘了在樣式表規(guī)則中類(lèi)別名稱(chēng)前加一個(gè)句號(hào)（即英文中的 .）


你還可以生成不加任何HTML標(biāo)簽的分類(lèi)： 

    .first { color: green }



這種方式更加靈活，因?yàn)楝F(xiàn)在我們可以將CLASS=first用于任何HTML標(biāo)簽，并應(yīng)用到網(wǎng)頁(yè)<BODY>中，而設(shè)定的文字將以綠色顯示。

情景選擇：

如果你想讓所有加重顯示的文字都以紅色顯示，但條件是只有當(dāng)這些加顯示的文字出現(xiàn)在通常的主體文字內(nèi)時(shí)。不可能嗎？利用樣式表可以實(shí)現(xiàn)你最狂野的夢(mèng)想。情景選擇將使你夢(mèng)想成真，心想事成。情景選擇要求你設(shè)定一個(gè)可以執(zhí)行選擇說(shuō)明的情景即可。 

    P B { color: red }
<H1><B>Emma Thompson</B>, Actress
</H1>
<P>Dramatic actor, inspired 
comedienne. Is there <B>nothing</B> 
she can't do?</P>



樣式表的規(guī)則告訴瀏覽器只將所有<P>之內(nèi)加重顯示的文字以紅色顯示。所以，<P>之外標(biāo)題的加重文字不會(huì)以紅色顯示，而<P>之內(nèi)的文字則是。

注釋

即使是用樣式表制作出的非常簡(jiǎn)練的代碼也應(yīng)該加上注釋。利用樣式表代碼就可以做到這一點(diǎn)。例： 

    P.first { color: green } /* green
for the first paragraph of every 
page */H1 { text-indent: 10px; 
font-family: verdana }
IMG { margin-top: 100px } /* give
all images a top margin */


串接

你可能會(huì)問(wèn)這樣的問(wèn)題：“為什么要把它叫做串接樣式表呢？下面我們將回答你的問(wèn)題。

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)