DIV CSS 佈局教程網

引子：

今天在藍點看了Yang的博客《CSS樣式表中繼承關系的空格與不空格》，思考了一下，本來想寫《CSS樣式的復合定義與復合調用及簡單的模塊化設計》，但是內容太大，還是來點簡單的實惠。所以改叫《CSS樣式——從空格談起》吧。

一、空格運算符

（1）CSS語言
    簡單地說，CSS語言類似JS語言，是通過客戶端下載後，通過本地浏覽器解析。而CSS語言又是非常低級的“弱類型”語言，離JS這種基於對象的比較完善的“弱類型”語言，還差相當一段距離。要知道CSS樣式是定義出來的，而樣式的呈現是根據文檔流順序和CSS優先級別，浏覽器自己識別計算後顯示出來的。而浏覽器又有忽略和糾錯功能（尤以IE為甚），所以樣式定義的語法有錯誤，並不影響浏覽器正常工作，只不過顯示不出應有的效果罷了。在我們設計定義樣式的時候，排錯是比較令人苦惱的，其本質原因是於這種弱類型CSS語言本身的不嚴禁性有關系的，所以我們就更應該注重CSS定義的嚴禁，才能出較少的錯誤，較快更好的完成工作。

（2）CSS的運算符

首先說，CSS語言的運算符就不多，有.#{}:";還有一個非常重要的空格。這幾個運算符，都是常用的定義聲明符號。而在CSS樣式定義中，空格就有點特殊，我們可以把它視為在.Net或Java中命名空間或類包定義中的 . 運算符。換句話說，我們可以把空格視為路徑指向的箭頭，表明HTML標簽的父子級別關系。CSS是與HTML想關聯的，也就是說，CSS的每一個定義都與“某個HTML標簽”或“某段模塊化HTML代碼”相對應，而HTML可以調用多個樣式類。一個CSS樣式類可以根據HTML代碼來“復合定義”；一個HTML標簽也可以“復合調用”多個樣式類。所以說，CSS樣式定義的復雜性與關聯的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文檔內所有的td標簽內的帶class="b"的標簽的樣式 。
也就是說，
td .b { 
       color:#00ff00; 
}
定義的是
<td><div class="b">text</div></td>這組代碼塊中的b類，class="b"是包含在td標簽內的，是td的子級，所以在這裡要用“空格”指向明確表明父子級別關系。

2、第二個類b的類路徑是th.b，定義的是該Html文檔內所有的帶class="b"的th標簽的樣式。
也就是說，
th.b {  
       color: #FF0000
}
定義的是<th class="b">text</td>，在這裡的代碼中，th和class='b'是平級的，先th後.b組成一個同級類路徑th.b，所以沒有空格代表“Html類”和“自定義類”具有同級路徑！



3、第三個類b的類路徑是 .b，定義該Html文檔內所有的td標簽的樣式，它是該文檔的一個全局樣式，是body .b的簡寫。
也就是說，
.b {
       color:#0000ff;
       font-size:12px;
}
定義了
<td class="b">第三個類b的類路徑是td.b</th>
和
<div class="b">第三個類b的類路徑是 .b</div>

這兩處的b類沒有明確的路徑指向，優先級別要比有明確路徑的低。

4、大家可以看到，在HTML代碼中，同樣都是class="b"，但是在CSS定義時，采用的類路徑不同，作用就不同了。類路徑越完整，優先級越高。在具體應用的時候，我們可以，使用完整類路徑來定義某Html代碼塊某一些特殊地方，做異化處理。例如本例表頭th的黑體字顯示效果。

二、Html中復合調用樣式類
（1）在一個Html標簽內，可以復合調用多個樣式類，也是用空格做運算符，復合類名總字符不能超過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）應用：
對於某些多數樣式屬性累同，僅有幾個不同樣式屬性的定義，可以用這個方法來縮寫。
也可以在某個不改變某個通用樣式類的同時，用Html調用復合類，突出局部特例。

三、CSS+Html的模塊化設計

（1）舉個簡單例子：
.classNameA .classNameB .classNameC 
就是一個類包路徑,A包含B,B包含C. 

意思就是,在A塊內的全部Html代碼(包括B塊、C塊),先應用樣式classNameA； 
然後，在B塊內的全部Html代碼(包括C塊),先應用樣式classNameA，之後再先應用樣式classNameB； 
最後，在C塊內的全部Html代碼,先應用樣式classNameA，再先應用樣式classNameB,最後應用樣式classNameB；

（2）在樣式表中，關於類包的路徑，對於某些復雜的HMTL代碼，最後寫絕對路徑，就是每一個類名都不要拉下。這樣可讀性更強，錯誤率更小；當然，寬容度就越低。 

例如 
<style type="text/CSS"> 
/*控制 li 的樣式*/ 
.a1 ul li { 
    color:red; 
} 

/*控制class="a"的div塊內，全部連接 a 的樣式*/ 
.a1 a { 
    font-size:20px; 
} 

/*控制class="a"的div塊內，一個一個為 class="mylink"的樣式*/ 
.a1 .myLink { 
       font-size:12px; 
} 

/*控制 li 內連接a的樣式*/ 
.a1 ul li a { 
       font-size:40px; 
} 

/*控制名 li 內，一個為 class="mylink"的連接的樣式 */ 
.a1 ul li .myLink { 
       font-size:60px; 
       font-family:黑體; 
} 

/*b1樣式*/ 
.b1 { 
      color:blue; 
} 
/*控制 li 內 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從內層到外層；按*.CSS上下文，從下文到上文；按內聯樣式表上下文，從下文到上文；按內嵌>內聯>外聯的優先級； 
疊加覆蓋計算最終顯示效果。

CSS語句，嚴格說是JS代碼的一類，換句話說，CSS語句也是“弱類型”的，空格是一個“運算符”，由於“弱類型”不嚴謹，所以，沒有空格的時候，雖然不報錯，也有顯示效果，但那是按錯誤邏輯運算的，有時歪打正著，但確莫名其妙。再加上有很多滿足各浏覽器的HACK語法，CSS語句就更加零亂不堪。所以，寫的時候，盡量在滿足寬容度的情況下，嚴禁一些。

（3）給大家一個案例
模塊化設計，要求相對封閉獨立性、可重復性、可修改性、統一性等等是比較高的，當然，模塊化越高越復雜的，修改起來也要月謹慎，因為牽一發而動全身，這就要求，在開發設計前期要做好詳盡的策劃，從目錄結構、命名規范，到全局和特例的界限劃分、後期修改的寬容度估計等等，都要有個把握。

下面就給一個我做的網站的地址：http://www.51youcai.com
1、樣式表是按類路徑來模塊化定義的，有中文注釋；
2、由於加了JSP程序，代碼格式有變動，也許會有不少垃圾代碼；
3、在Firefox下，有幾處顯示不當、JS未做相應優化，請用IE6+浏覽；
4、感興趣者可以當Html和CSS來，做參考。