（1）CSS語言
簡單地說，CSS語言類似JS語言，是通過客戶端下載后，通過本地瀏覽器解析。而CSS語言又是非常低級的“弱類型”語言，離JS這種基于對象的比較完善的“弱類型”語言，還差相當(dāng)一段距離。要知道CSS樣式是定義出來的，而樣式的呈現(xiàn)是根據(jù)文檔流順序和CSS優(yōu)先級別，瀏覽器自己識別計算后顯示出來的。而瀏覽器又有忽略和糾錯功能（尤以IE為甚），所以樣式定義的語法有錯誤，并不影響瀏覽器正常工作，只不過顯示不出應(yīng)有的效果罷了。在我們設(shè)計定義樣式的時候，排錯是比較令人苦惱的，其本質(zhì)原因是于這種弱類型CSS語言本身的不嚴禁性有關(guān)系的，所以我們就更應(yīng)該注重CSS定義的嚴禁，才能出較少的錯誤，較快更好的完成工作。
（2）CSS的運算符
首先說，CSS語言的運算符就不多，有.#{}:";還有一個非常重要的空格。這幾個運算符，都是常用的定義聲明符號。而在CSS樣式定義中，空格就有點特殊，我們可以把它視為在.Net或Java中命名空間或類包定義中的 . 運算符。換句話說，我們可以把空格視為路徑指向的箭頭，表明HTML標簽的父子級別關(guān)系。CSS是與HTML想關(guān)聯(lián)的，也就是說，CSS的每一個定義都與“某個HTML標簽”或“某段模塊化HTML代碼”相對應(yīng)，而HTML可以調(diào)用多個樣式類。一個CSS樣式類可以根據(jù)HTML代碼來“復(fù)合定義”；一個HTML標簽也可以“復(fù)合調(diào)用”多個樣式類。所以說，CSS樣式定義的復(fù)雜性與關(guān)聯(lián)的HTML是密不可分。
（3）實例說明
| 以下是引用片段： <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">第一個類b的類路徑是th .b</div></td> <th class="b">第二個類b的類路徑是th.b</td> <td class="b">第三個類b的類路徑是 .b</th> </tr> </table> <div class="b">第三個類b的類路徑是 .b</div> |
1、第一個類b的類路徑是td .b，定義該HTML文檔內(nèi)所有的td標簽內(nèi)的帶class="b"的標簽的樣式 。
| 以下是引用片段： td .b { color:#00ff00; } |
2、第二個類b的類路徑是th.b，定義的是該HTML文檔內(nèi)所有的帶class="b"的th標簽的樣式。
| 以下是引用片段： th.b { color: #FF0000 } |
3、第三個類b的類路徑是 .b，定義該HTML文檔內(nèi)所有的td標簽的樣式，它是該文檔的一個全局樣式，是body .b的簡寫。
| 以下是引用片段： .b { color:#0000ff; font-size:12px; } |
4、大家可以看到，在HTML代碼中，同樣都是class="b"，但是在CSS定義時，采用的類路徑不同，作用就不同了。類路徑越完整，優(yōu)先級越高。在具體應(yīng)用的時候，我們可以，使用完整類路徑來定義某HTML代碼塊某一些特殊地方，做異化處理。例如本例表頭th的黑體字顯示效果。
二、HTML中復(fù)合調(diào)用樣式類
（1）在一個HTML標簽內(nèi)，可以復(fù)合調(diào)用多個樣式類，也是用空格做運算符，復(fù)合類名總字符不能超過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> |
三、CSS+HTML的模塊化設(shè)計
（1）舉個簡單例子：
.classNameA .classNameB .classNameC
就是一個類包路徑,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)于類包的路徑，對于某些復(fù)雜的HMTL代碼，最后寫絕對路徑，就是每一個類名都不要拉下。這樣可讀性更強，錯誤率更小；當(dāng)然，寬容度就越低。
例如
| 以下是引用片段： <style type="text/css"> /*控制 li 的樣式*/ .a1 ul li { color:red; } /*控制class="a"的div塊內(nèi)，全部連接 a 的樣式*/ /*控制class="a"的div塊內(nèi)，一個一個為 class="mylink"的樣式*/ /*控制 li 內(nèi)連接a的樣式*/ /*控制名 li 內(nèi)，一個為 class="mylink"的連接的樣式 */ /*b1樣式*/ <div class="a1"> |
樣式，按*.HTML從內(nèi)層到外層；按*.CSS上下文，從下文到上文；按內(nèi)聯(lián)樣式表上下文，從下文到上文；按內(nèi)嵌>內(nèi)聯(lián)>外聯(lián)的優(yōu)先級；
疊加覆蓋計算最終顯示效果。
CSS語句，嚴格說是JS代碼的一類，換句話說，CSS語句也是“弱類型”的，空格是一個“運算符”，由于“弱類型”不嚴謹，所以，沒有空格的時候，雖然不報錯，也有顯示效果，但那是按錯誤邏輯運算的，有時歪打正著，但確莫名其妙。再加上有很多滿足各瀏覽器的HACK語法，CSS語句就更加零亂不堪。所以，寫的時候，盡量在滿足寬容度的情況下，嚴禁一些。
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權(quán)益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對自己在本站的言論和行為負責(zé);
三、本站對您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號