2009-07-23

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

0 回應: