引子：
今天在藍(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ǔ)言類似JS語(yǔ)言，是通過(guò)客戶端下載后，通過(guò)本地瀏覽器解析。而CSS語(yǔ)言又是非常低級(jí)的“弱類型”語(yǔ)言，離JS這種基于對(duì)象的比較完善的“弱類型”語(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ì)原因是于這種弱類型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中命名空間或類包定義中的 . 運(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è)樣式類。一個(gè)CSS樣式類可以根據(jù)HTML代碼來(lái)“復(fù)合定義”；一個(gè)HTML標(biāo)簽也可以“復(fù)合調(diào)用”多個(gè)樣式類。所以說(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è)類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)簽的樣式 。
也就是說(shuō)，
td .b {
color:#00ff00;
}
定義的是
<td><div class="b">text</div></td>這組代碼塊中的b類，class="b"是包含在td標(biāo)簽內(nèi)的，是td的子級(jí)，所以在這里要用“空格”指向明確表明父子級(jí)別關(guān)系。
2、第二個(gè)類b的類路徑是th.b，定義的是該HTML文檔內(nèi)所有的帶class="b"的th標(biāo)簽的樣式。
也就是說(shuō)，
th.b {
color: #FF0000
}
定義的是<th class="b">text</td>，在這里的代碼中，th和class='b'是平級(jí)的，先th后.b組成一個(gè)同級(jí)類路徑th.b，所以沒(méi)有空格代表“HTML類”和“自定義類”具有同級(jí)路徑！

3、第三個(gè)類b的類路徑是 .b，定義該HTML文檔內(nèi)所有的td標(biāo)簽的樣式，它是該文檔的一個(gè)全局樣式，是body .b的簡(jiǎn)寫(xiě)。
也就是說(shuō)，
.b {
color:#0000ff;
font-size:12px;
}
定義了
<td class="b">第三個(gè)類b的類路徑是td.b</th>
和
<div class="b">第三個(gè)類b的類路徑是 .b</div>
這兩處的b類沒(méi)有明確的路徑指向，優(yōu)先級(jí)別要比有明確路徑的低。
4、大家可以看到，在HTML代碼中，同樣都是class="b"，但是在CSS定義時(shí)，采用的類路徑不同，作用就不同了。類路徑越完整，優(yōu)先級(jí)越高。在具體應(yīng)用的時(shí)候，我們可以，使用完整類路徑來(lái)定義某HTML代碼塊某一些特殊地方，做異化處理。例如本例表頭th的黑體字顯示效果。
二、HTML中復(fù)合調(diào)用樣式類
（1）在一個(gè)HTML標(biāo)簽內(nèi)，可以復(fù)合調(diào)用多個(gè)樣式類，也是用空格做運(yùn)算符，復(fù)合類名總字符不能超過(guò)256。
（2）示例：
<style type="text/css">
.myTxt {
font-size:50px;
font-family:Arial Black;
}
.txtRed {
color:red;
}
.txtOrange {
colorrange;
}
.txtGreen {
color:green;
}
.txtBlue {
color:blue;
}
</style>
<ul>
<li class="myTxt txtRed">123</li>
<li class="myTxt txtOrange">Text</li>
<li class="txtGreen">Text</li>
<li class="myTxt txtBlue">Text</li>
</ul>
（3）應(yīng)用：
對(duì)于某些多數(shù)樣式屬性累同，僅有幾個(gè)不同樣式屬性的定義，可以用這個(gè)方法來(lái)縮寫(xiě)。
也可以在某個(gè)不改變某個(gè)通用樣式類的同時(shí)，用HTML調(diào)用復(fù)合類，突出局部特例。
三、CSS HTML的模塊化設(shè)計(jì)
（1）舉個(gè)簡(jiǎn)單例子：
.classNameA .classNameB .classNameC
就是一個(gè)類包路徑,A包含B,B包含C.
意思就是,在A塊內(nèi)的全部HTML代碼(包括B塊、C塊),先應(yīng)用樣式classNameA；
然后，在B塊內(nèi)的全部HTML代碼(包括C塊),先應(yīng)用樣式classNameA，之后再先應(yīng)用樣式classNameB；
最后，在C塊內(nèi)的全部HTML代碼,先應(yīng)用樣式classNameA，再先應(yīng)用樣式classNameB,最后應(yīng)用樣式classNameB；
（2）在樣式表中，關(guān)于類包的路徑，對(duì)于某些復(fù)雜的HMTL代碼，最后寫(xiě)絕對(duì)路徑，就是每一個(gè)類名都不要拉下。這樣可讀性更強(qiáng)，錯(cuò)誤率更??；當(dāng)然，寬容度就越低。
例如
<style type="text/css">
/*控制 li 的樣式*/
.a1 ul li {
color:red;
}
/*控制class="a"的div塊內(nèi)，全部連接 a 的樣式*/
.a1 a {
font-size:20px;
}
/*控制class="a"的div塊內(nèi)，一個(gè)一個(gè)為 class="mylink"的樣式*/
.a1 .myLink {
font-size:12px;
}
/*控制 li 內(nèi)連接a的樣式*/
.a1 ul li a {
font-size:40px;
}
/*控制名 li 內(nèi)，一個(gè)為 class="mylink"的連接的樣式 */
.a1 ul li .myLink {
font-size:60px;
font-family:黑體;
}
/*b1樣式*/
.b1 {
color:blue;
}
/*控制 li 內(nèi) b1 的樣式*/
.a1 ul li .b1 {
color:green;
}
</style>
<div class="a1">
<a href="#">linkText</a>
<a href="#" class="myLink">titleText</a>
<div class="b1">b11111111</div>
<ul>
<li>
<a href="#">titleText</a>
<div class="b1">nameCN</div>
</li>
<li>
<a href="#" class="myLink">titleText</a>
<div class="b1">nameCN<span class="c1">nameEN</span></div>
</li>
<li>titleText</li>
<li>titleText</li>
<li>titleText</li>
</ul>
</div>

樣式，按*.HTML從內(nèi)層到外層；按*.CSS上下文，從下文到上文；按內(nèi)聯(lián)樣式表上下文，從下文到上文；按內(nèi)嵌>內(nèi)聯(lián)>外聯(lián)的優(yōu)先級(jí)；
疊加覆蓋計(jì)算最終顯示效果。
CSS語(yǔ)句，嚴(yán)格說(shuō)是JS代碼的一類，換句話說(shuō)，CSS語(yǔ)句也是“弱類型”的，空格是一個(gè)“運(yùn)算符”，由于“弱類型”不嚴(yán)謹(jǐn)，所以，沒(méi)有空格的時(shí)候，雖然不報(bào)錯(cuò)，也有顯示效果，但那是按錯(cuò)誤邏輯運(yùn)算的，有時(shí)歪打正著，但確莫名其妙。再加上有很多滿足各瀏覽器的HACK語(yǔ)法，CSS語(yǔ)句就更加零亂不堪。所以，寫(xiě)的時(shí)候，盡量在滿足寬容度的情況下，嚴(yán)禁一些。
（3）給大家一個(gè)案例
模塊化設(shè)計(jì)，要求相對(duì)封閉獨(dú)立性、可重復(fù)性、可修改性、統(tǒng)一性等等是比較高的，當(dāng)然，模塊化越高越復(fù)雜的，修改起來(lái)也要月謹(jǐn)慎，因?yàn)闋恳话l(fā)而動(dòng)全身，這就要求，在開(kāi)發(fā)設(shè)計(jì)前期要做好詳盡的策劃，從目錄結(jié)構(gòu)、命名規(guī)范，到全局和特例的界限劃分、后期修改的寬容度估計(jì)等等，都要有個(gè)把握。
下面就給一個(gè)我做的網(wǎng)站的地址：http://www.51youcai.com
1、樣式表是按類路徑來(lái)模塊化定義的，有中文注釋；
2、由于加了jsp程序，代碼格式有變動(dòng)，也許會(huì)有不少垃圾代碼；
3、在FireFox下，有幾處顯示不當(dāng)、JS未做相應(yīng)優(yōu)化，請(qǐng)用IE6 瀏覽；
4、感興趣者可以當(dāng)HTML和CSS來(lái)，做參考。

最新評(píng)論