CSS 部屬經驗-容器樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 容器樣式的概念
2. 容器樣式定義
3. 建構一個容器
   

容器樣式的概念


我們會發現在上面這三個樣式裡外匡是一樣的，除了顏色上的差異，而這些外匡的 HTML 結構也是一樣的，我稱這樣的外匡為容器，主要只提供樣式的框架，不處理資料的呈現。

將容器與樣式分離的好處是版面的呈現變靈活了，讓排版就像堆積木一樣，而樣式的重複利用性也會變高，樣式定義的複雜度也會降低。


上面這張圖就是容器的架構概念，在容器裡放入資料呈現的樣式，再將容器加入頁面排版裡。


容器樣式定義
如果已經瞭解什麼是容器了，接著要開始為容器的定義作一些規範：

1. 不處理資料的呈現，例如資料的列表。
2. 容器裡不可以在包含容器，過份的疊加套用會讓整體的架構變的很亂，所以讓容器間的關係保持平等是比較好的。
3. 不要設定太多會繼承的樣式屬性，這樣會讓包在裡面的樣式要額外設定一些複寫的樣式屬性，例如字體顏色、對齊方式等。
4. 不要為容器設定高度與寬度的屬性，高度應該要隨著內容而變動，寬度則應該適應版面的大小，這樣才不容易出現跑版的異常問題。
   

建構一個容器
針對上面的樣式來建構容器的 HTML，當然不一定照著一樣的方式建立，依照容器樣式的需求去建立就行了。

這裡會發現我之前在 CSS 部屬經驗-樣式命名 中提到的樣式成員名稱，這裡我還為每個樣式成員都加上了 "Area" 這個名稱前綴，以避免選擇意外套用到不該套用的元素上。

<div class="AreaBox_1">
  <h3 class="AreaTitle">標題文字</h3>
  <div class="AreaContent">
    <!-- 
      其他樣式元素... 
    -->
  </div>
  <div class="AreaBottom">
    <div></div>
  </div>
</div>

這裡可以看出 CSS 的選擇器的層級最多只有三層，如果樣式的層級太深以後要接手的人會很難進入狀況，層級太淺樣式又會很沒結構感，造成樣式很零散，兩層到三層之間的選擇器設定是比較好維護的。

關於容器的樣式設定我並沒有設定的很完整，請自由發揮吧！

.AreaBox_1 {
    /*右上角的底圖*/
    background:transparent url(../images/xxxx.gif) no-repeat right top;
    /*上下的間距*/
    margin:5px auto;
}
.AreaBox_1 .AreaTitle{
    /*左上角的底圖*/
    background:transparent url(../images/xxxx.gif) no-repeat left top;
    /*標題設定*/
    color:#585E1A;
    font-size:16px;
    padding:10px 0 14px 35px;
}
.AreaBox_1 .AreaContent{
    /*中間的底圖*/
    background:transparent url(../images/xxxx.gif) repeat-y left center;
    padding:0 12px;
}
.AreaBox_1 .AreaBottom{
    /*右下角的底圖*/
    background:transparent url(../images/xxxx.gif) repeat-y right top;
}
.AreaBox_1 .AreaBottom div{
    /*左下角的底圖*/
    background:transparent url(../images/xxxx.gif) repeat-y left top;
    height:10px;
}

參考頁面：
Last.fm
Wacanai.com