Web開(kāi)發(fā)學(xué)習(xí)心得3——CSS的語(yǔ)法與層疊

2020-03-24 17:26:34

字體：大中小

供稿：網(wǎng)友

這篇主要討論CSS的語(yǔ)法及層疊的概念，有關(guān)CSS布局方面的內(nèi)容下篇討論。如前兩篇文章所述，CSS是專(zhuān)門(mén)用來(lái)負(fù)責(zé)文檔的展現(xiàn)的，那既然如此，CSS就一定能夠控制每種元素的展現(xiàn)，于是，就有了第一類(lèi)語(yǔ)法——元素選擇符。元素選擇符語(yǔ)法如下：element

{

樣式規(guī)則

} 這個(gè)非常好理解，所謂元素選擇符，就是說(shuō)文檔中所有該元素，都以該樣式規(guī)則顯示。非常好，有了元素選擇符，就能夠很大程度上控制文檔的展現(xiàn)了。然而，人們很快就碰到了新的問(wèn)題：我有兩個(gè)相同的元素，但是我希望兩個(gè)元素以不同的樣式展現(xiàn)。為了滿(mǎn)足該要求，于是，就有了第二類(lèi)語(yǔ)法——類(lèi)選擇符。類(lèi)選擇符語(yǔ)法如下：.html' target='_blank'>class（注意class前面的小數(shù)點(diǎn)）

{

樣式規(guī)則

} 該選擇符表示，所有屬于該類(lèi)的元素都以該樣式規(guī)則展現(xiàn)。那么，什么叫屬于該類(lèi)，怎么樣才屬于該類(lèi)呢？這就需要元素添加一個(gè)“class”屬性，并將屬性值指定為該類(lèi)選擇符名。有了這些，就能指定文檔中任何元素的樣式了。然而，人們發(fā)現(xiàn)，文檔中常常會(huì)包含某些唯一的區(qū)塊，如頁(yè)眉、頁(yè)腳等，這些區(qū)塊的樣式常常只允許應(yīng)用到該唯一的區(qū)塊，雖然可以用類(lèi)選擇符來(lái)實(shí)現(xiàn)（給該區(qū)塊一個(gè)不同于頁(yè)面其他元素的唯一的類(lèi)名），但是，如果有專(zhuān)門(mén)的語(yǔ)法來(lái)實(shí)現(xiàn)這種唯一，那無(wú)疑能使CSS更清晰。于是，就有了第三類(lèi)語(yǔ)法——id選擇符。 id選擇符語(yǔ)法如下：#id（注意id前面的#號(hào)）

{

樣式規(guī)則

} 該選擇符表示，該id的元素以該樣式規(guī)則展現(xiàn)。id選擇符需要元素添加一個(gè)“id”屬性，并給予唯一的名字作為屬性值，即同一文檔不允許有兩個(gè)或以上的元素?fù)碛邢嗤膇d值。以上3種選擇符，就構(gòu)成了CSS最基本的語(yǔ)法。基于這3種選擇符，又衍生出一些其他的規(guī)則，撿一些常見(jiàn)的簡(jiǎn)單說(shuō)明如下： “選擇符1 選擇符2”（注意空格分隔符）：表示選擇符1下的所有子孫選擇符2。如“p .red”表示元素選擇符p的子孫中類(lèi)名為red的所有元素。 “選擇符1 選擇符2”（注意大于號(hào)分隔符：表示選擇符1下的所有兒子選擇符2（注意只限于兒子）。如“p .red”表示元素選擇符p的兒子中類(lèi)名為red的所有元素。 “選擇符1類(lèi)選擇符2”（注意選擇符之間緊挨）：表示選擇符1中所有屬于類(lèi)選擇符2的元素。如“p.red”表示 p 元素中屬于red的所有元素。 “選擇符1id選擇符2”（注意選擇符之間緊挨）：表示選擇符1中id為選擇符2的元素。如“p#red”表示 p 元素中id為red的元素。另外，如果兩個(gè)選擇符的樣式規(guī)則一樣，可以簡(jiǎn)寫(xiě)為“選擇符1，選擇符2”（注意逗號(hào)分隔符），如“p，.red”表示元素選擇符p與類(lèi)選擇符.red擁有同樣的樣式。了解了CSS的規(guī)則之后，我們?cè)賮?lái)講講層疊的概念。所謂層疊，就是指子孫元素繼承祖先元素的樣式屬性的行為，大部分的屬性都能繼承，但也有部分屬性不能繼承，如padding，margin，float等。這個(gè)就不多說(shuō)了，這里主要講講在一個(gè)元素的一個(gè)樣式屬性被多個(gè)選擇符選擇的時(shí)候，如何判斷最終應(yīng)用哪個(gè)屬性值的問(wèn)題。《Head First HTML and CSS XHTML》中講到一種方法是這樣的：根據(jù)選擇符計(jì)算出一個(gè)數(shù)字，數(shù)字最大的那個(gè)就是最終要應(yīng)用的樣式，如果存在多個(gè)相同的最大值，那么取位置最后面的那個(gè)。那么怎么根據(jù)選擇符來(lái)計(jì)算那個(gè)數(shù)字呢？方法如下：如果選擇符中包含元素選擇符，那么就給那個(gè)數(shù)字加1，有幾個(gè)元素選擇符，就加幾個(gè)1；如果選擇符中包含類(lèi)選擇符，那么就給那個(gè)數(shù)字加10，有幾個(gè)類(lèi)選擇符，就加幾個(gè)10；如果選擇符中包含id選擇符，那么就給那個(gè)數(shù)字加100，有幾個(gè)id選擇符，就加幾個(gè)100。我們來(lái)舉幾個(gè)具體的例子：
注意，以逗號(hào)隔開(kāi)的選擇符并不能將其當(dāng)作一個(gè)整體來(lái)計(jì)算，而要拆開(kāi)分別計(jì)算。如p, .red，它相當(dāng)于一個(gè)p（001）和一個(gè).red（010），而不是整體011。另外，10個(gè)元素選擇符并不頂一個(gè)類(lèi)選擇符，10個(gè)類(lèi)選擇符也不頂一個(gè)id選擇符，實(shí)際上，任意多個(gè)元素選擇符都不頂一個(gè)類(lèi)選擇符，任務(wù)多個(gè)類(lèi)選擇符也不頂一個(gè)id選擇符。以上規(guī)則可以用如下通俗的方式描述：首先比較id選擇符的個(gè)數(shù)；其次比較類(lèi)選擇符的個(gè)數(shù)；再其次比較元素選擇符的個(gè)數(shù)；最后，如果3者都相等，那么取靠后定義的那個(gè)。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS規(guī)范閉合浮動(dòng)元素

下一篇：利用CSS濾鏡讓網(wǎng)頁(yè)效果更有風(fēng)格