引子:
今天在藍(lán)點(diǎn)看了Yang的博客《CSS樣式表中繼承關(guān)系的空格與不空格》,思考了一下,本來想寫《CSS樣式的復(fù)合定義與復(fù)合調(diào)用及簡(jiǎn)單的模塊化設(shè)計(jì)》,但是內(nèi)容太大,還是來點(diǎn)簡(jiǎn)單的實(shí)惠。所以改叫《CSS樣式——從空格談起》吧。
一、空格運(yùn)算符
(1)CSS語言
簡(jiǎn)單地說,CSS語言類似JS語言,是通過客戶端下載后,通過本地瀏覽器解析。而CSS語言又是非常低級(jí)的“弱類型”語言,離JS這種基于對(duì)象的比較完善的“弱類型”語言,還差相當(dāng)一段距離。要知道CSS樣式是定義出來的,而樣式的呈現(xiàn)是根據(jù)文檔流順序和CSS優(yōu)先級(jí)別,瀏覽器自己識(shí)別計(jì)算后顯示出來的。而瀏覽器又有忽略和糾錯(cuò)功能(尤以IE為甚),所以樣式定義的語法有錯(cuò)誤,并不影響瀏覽器正常工作,只不過顯示不出應(yīng)有的效果罷了。在我們?cè)O(shè)計(jì)定義樣式的時(shí)候,排錯(cuò)是比較令人苦惱的,其本質(zhì)原因是于這種弱類型CSS語言本身的不嚴(yán)禁性有關(guān)系的,所以我們就更應(yīng)該注重CSS定義的嚴(yán)禁,才能出較少的錯(cuò)誤,較快更好的完成工作。
(2)CSS的運(yùn)算符
首先說,CSS語言的運(yùn)算符就不多,有.#{}:";還有一個(gè)非常重要的空格。這幾個(gè)運(yùn)算符,都是常用的定義聲明符號(hào)。而在CSS樣式定義中,空格就有點(diǎn)特殊,我們可以把它視為在.Net或Java中命名空間或類包定義中的 . 運(yùn)算符。換句話說,我們可以把空格視為路徑指向的箭頭,表明HTML標(biāo)簽的父子級(jí)別關(guān)系。CSS是與HTML想關(guān)聯(lián)的,也就是說,CSS的每一個(gè)定義都與“某個(gè)HTML標(biāo)簽”或“某段模塊化HTML代碼”相對(duì)應(yīng),而HTML可以調(diào)用多個(gè)樣式類。一個(gè)CSS樣式類可以根據(jù)HTML代碼來“復(fù)合定義”;一個(gè)HTML標(biāo)簽也可以“復(fù)合調(diào)用”多個(gè)樣式類。所以說,CSS樣式定義的復(fù)雜性與關(guān)聯(lián)的HTML是密不可分。
(3)實(shí)例說明
<style type="text/css">
td .b {
color:#00ff00;
}
th.b {
color:#ff0000;
font-family:黑體;
font-size:20px;
}
.b {
color:#0000ff;
font-size:12px;
}
</style>
<table>
<tr>
<td><div class="b">第一個(gè)類b的類路徑是th .b</div></td>
<th class="b">第二個(gè)類b的類路徑是th.b</td>
<td class="b">第三個(gè)類b的類路徑是 .b</th>
</tr>
</table>
<div class="b">第三個(gè)類b的類路徑是 .b</div>
講解:
1、第一個(gè)類b的類路徑是td .b,定義該HTML文檔內(nèi)所有的td標(biāo)簽內(nèi)的帶class="b"的標(biāo)簽的樣式 。
也就是說,
td .b {
color:#00ff00;
新聞熱點(diǎn)
疑難解答
圖片精選