1.5 分類及其它技巧

2018-11-06 17:45 更新
1.5 分類及其它技巧


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

分類

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

這種情況下分類將發(fā)揮作用。你可以將段落P分成3種不同的類別,每一類應(yīng)用不同的樣式表說明。這些規(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>



你可以給類別起任何一種名字,但不要忘了在樣式表規(guī)則中類別名稱前加一個(gè)句號(即英文中的 .)


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

    .first { color: green }



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

情景選擇

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

    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)題的加重文字不會以紅色顯示,而<P>之內(nèi)的文字則是。

注釋

即使是用樣式表制作出的非常簡練的代碼也應(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 */


串接

你可能會問這樣的問題:“為什么要把它叫做串接樣式表呢?下面我們將回答你的問題。

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號