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