思考 - css 設計的構思與佈局

我們儘量以探討方式介紹，引導如何構思及擴展 css 設計，希望能激發更多設計想法為主，避免陷入步驟式或教條式的悲慘學習模式。

開始：定義一些基本的 css 設計

最外圍的 .TreeMenu 指定寬度 (width) 、背景顏色 (background)、邊線 (border) ， 而 h1 指定字體大小 (font) ， a 去掉底線， ul, h1 去除周圍距離 (padding, margin) 等等。

css

h1, ul {
 margin: 0;
 padding: 0;
}
.TreeMenu {
 width: 10em;
 background: rgb(92%,86%,100%);
 border: 1px solid rgb(60%,60%,80%);
}
.TreeMenu .section h1 {
 font-size: 100%;
 font-weight: normal;
}
.TreeMenu .section ul {
 list-style: none;
}
.TreeMenu .section li a {
 text-decoration: none;
}

line-height (行高) 是設計的主要概念

視覺性的瀏覽器通常會預先賦予每行「大於一個字」的行高 (line-height) ，為了避免不同瀏覽器間產生的差異，以及後面設計 css 時有所依據，先將整個選單內 line-height 定義為「字高度」的倍數，例中為 1.1 倍，看起來行距應該會較原來更緊一點。由於 line-height 特性 (property) 有繼承性 (inheritance) ，所以只需要定義一次在 .TreeMenu 或 .section 就可以；這裡也順便為分類標題 h1 加背景色修飾一下。

接續前面，增加 一點 css 定義 (紅字)

.TreeMenu .section {
 line-height: 1.1;
}
.TreeMenu .section h1 {
 font-size: 100%;
 font-weight: normal;
 background: rgb(85%,70%,90%);
}

我們只以倍數定義行高，也沒有指定字體的尺寸 (font-size)，如此是為了使全部的設計，單純地以字高 (em) 的倍數來計算，不用去管字體到底幾個像素 (pixel) 大，或者一行有多少像素高。想指定 font-size 當然可以，不過行高最好還是以倍數的方式指定，設計時才不至於太難計算；這只是建議囉，全部都用像素為單位也沒問題，計算清楚，小腦袋瓜別爆掉就好。

產生樹狀的垂直線條

在 ul 左側加上線條，當做樹狀結構的垂直線，並且左邊空出一點距離，讓子選項內容 li 看起來向內縮排。這個距離應該是要對應分類標題 h1 來設計，我們指定了向內縮半個字 (0.5em)，所以線看起來像是由標題第一個字中間向下延伸；標題最前面如果變成小圖示 (icons) ，那就以圖示寬度的一半去定義縮排距離也可以。這裡應該以 margin 來指定內縮距離，因為我們必須讓垂直線緊貼著 li 。線條寬度沒有使用 em 定義，是因為 1px 寬幾乎沒什麼影響，但是如果需要設計較粗的線，單位最好一致。

在前面已指定的 ul 增加 css 定義 (紅字)

.TreeMenu .section ul {
 list-style: none;
 margin-left: 0.5em;
 border-left: 1px dotted;
}

我們沒有特別指定線條 border 的顏色，將會與該區域字的顏色相同，如果想另外定義顏色，可以像這樣，

border-left: 1px dotted rgb(255,0,0);

線條要改成實線也可以， dotted → solid ，當然其它形式的線條也可有更多變化。

產生樹狀的水平連接線條

在子選項 li 下方加上線條，當做樹狀結構子選項的橫連接線。這裡也讓 li 的內容 a 向內縮排，不過，不同於前面，我們必須保持每個 li 下方的線與左側 ul 的線緊緊相接，所以在 li 指定 padding ，僅讓內容 a 向內縮，但 li 本身沒有縮排。

接續前面，增加 li 的 css 定義

.TreeMenu .section li {
 padding-left: 0.5em;
 border-bottom: 1px dotted;
}

border 也沒有特別指定顏色，這樣可以對應前面 ul 的 border 顏色，如果想另外定義顏色，方法同前。

css position:relative; 讓 a 向下位移 (offset)

css position:relative; 主要的特點就是，元素可以由本身的 Box 位移，並且保留其它元素原來的排版。利用這個特點，只要讓 a 向下位移半行，而 li 會維持原來的位置及下方的橫線， a 的中間就會剛好壓在 li 的線上。前面已經指定 line-height:1.1; (1.1倍的字高)，所以半行就是 0.55em ，太棒了，只有 a 向下移，所有 a 以外的東西都不會動。

在前面已指定的 a 增加 css 定義 (紅字)

.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.55em;
}

由於水平線條只有 1px 厚度，對整個位置並無影響，可以不需考量；但是如果指定了較粗的線條，就需要顧慮到線條的厚度會佔掉空間，向下位移的距離應該多加半個線的厚度，這也是為什麼前面有提醒要注意單位一致的原因，如果線的單位是 px ，而行高是 em，那還真有點難算。

背景顏色蓋掉重疊的線

明顯地，現在面臨兩個問題：一、字的背面不應該有線。二、因為 a 的向下位移，造成與下一個分類重疊。第二個問題稍後再討論。第一個問題比較容易處理，我們為 a 指定背景色就可以蓋住 li 的橫線了，由於 a 本身為行內層級元素 (inline-level elements) ，所以背景色只會在有字的區域呈現。如果 a 不想有背景顏色，只要指定與 .TreeMenu 相同的背景色， a 看起來就像沒有背景色的樣子。

在前面已指定的 a 增加 css 定義 (紅字)

.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.55em;
 background: rgb(80%,85%,100%);
}

如果想讓字之後的整條線都蓋掉，只要把 a 轉換成區塊層級 (block-level) 呈現即可。

繼續為 a 增加 css 定義 (紅字)

.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.55em;
 background: rgb(80%,85%,100%);
 display: block;
}

此時會看到子選項內容 a 之間有 1px 的間隔，這是因為 a 的實際高度本來就比 li 少 1px 高 (li 比 a 多了線條的高度)。

增加距離避免重疊，就算完成了。

只要在分類間加一點距離，重疊的問題就解決了，為 .section 下方加上 padding 應是較恰當的方式。為了分類裡面的上下距離看起來一樣 ([上古神話]上方與[章回小說]下方) ，我們指定了 padding-bottom:1.1em; ，與行高相等的距離。

在前面已指定的 .section 增加 css 定義 (紅字)

.TreeMenu .section {
 line-height: 1.1;
 padding-bottom: 1.1em;
}

換成在 ul 下方增加距離也可以，不過，只能以 margin 來定義，因為 padding 會使左側的線跟著向下延長，就不會與最後一個 li 的橫線緊接了。

目前應該已經算是完成囉，只剩下修飾更好而已。

hasLayout 處理 ie bugs

ie 7 或 ie 6 ，在 ul 或 a 可能會發生高度失準或背景圖片移位的問題，解決這類的 bugs 常用的方式是 hasLayout property 。由於目前在 ie 8 都還正常，為了清楚區隔，我們最好運用 css hacks 技巧。

視問題的區域，自行斟酌增加 css 定義

*+html .TreeMenu .section ul {
 zoom:1;
} /*hack ie7*/
* html .TreeMenu .section ul {
 zoom:1;
} /*hack ie6*/
*+html .TreeMenu .section ul a {
 zoom:1;
} /*hack ie7*/
* html .TreeMenu .section ul a {
 zoom:1;
} /*hack ie6*/

如果 a 還是有高度或不正常間隙問題

*+html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie7*/
* html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie6*/

在子選項前加小圖示，並且做最後修飾

以小圖示作為 a 的背景，並且指定左邊 padding 距離，讓 a 的內容文字向內縮排，才不會與小圖示重疊。例中的小球圖示 (ic008.png) 寬度 10px ，我們指定它的位置在 a 的最左側並且上下居中，這樣會讓小球剛好緊接在 li 的線後，然後左側 padding 距離為 15px ，讓字不要與圖看起來太緊鄰。另外，把 a 的背景顏色指定成與 .TreeMenu 相同。

我們也在 a 及標題 h1 上下加了一點 padding 距離，讓字看起來不會與邊緣太緊鄰。不過， a 上下各增加了 0.25em ，表示整行的高度也增加了，所以，向下位移的 top 定義也需要對等增加 0.25em 的距離 (0.55 + 0.25 = 0.8em) ；而 .section 下方的 padding 距離也應該增加為 1.6em (1.1em + 0.25em + 0.25em) 。

範例完整的 css 設計

h1, ul {
 margin: 0;
 padding: 0;
}
.TreeMenu {
 width: 10em;
 background: rgb(92%,86%,100%);
 border: 1px solid rgb(60%,60%,80%);
}
.TreeMenu .section {
 line-height: 1.1;
 padding-bottom:1.6em;
}
.TreeMenu .section h1 {
 font-size: 100%;
 font-weight: normal;
 background: rgb(85%,70%,90%);
 padding-top: 0.25em;
 padding-bottom: 0.25em;
}
.TreeMenu .section ul {
 list-style: none;
 margin-left: 0.5em;
 border-left: 1px dotted;
}
*+html .TreeMenu .section ul {
 zoom:1;
 padding-bottom:1px;
 margin-bottom:-1px;
} /*hack ie 7*/
* html .TreeMenu .section ul {
 zoom:1;
 padding-bottom:1px;
 margin-bottom:-1px;
} /*hack ie 6*/
.TreeMenu .section li {
 padding-left: 0.5em;
 border-bottom: 1px dotted;
}
.TreeMenu .section li a {
 text-decoration: none;
 position: relative;
 top: 0.8em;
 background: rgb(92%,86%,100%) url(ic008.png) no-repeat left center;
 display: block;
 padding: 0.25em 4px 0.25em 15px;
 margin-bottom: -1px;
}
*+html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie 7*/
* html .TreeMenu .section ul a {
 zoom:1;
 vertical-align:top;
} /*hack ie 6*/

前面提到由於 li 的下方線條使 a 之間會有 1px 間距，只需要在 a 或 li 指定 margin-bottom:-1px; (綠字)，就會使 li 之間有 1px 重疊， a 之間就沒有間距了，不過， ie 7, ie 6 最後一個 li 的線會看不見，修正方式也加在 hacks 裡了 (綠字) ，有興趣可以自行試試。

思考 - 背景半透明效果輕鬆設計： css color module level 3

顏色單位 (color units) 在 css 設計裡，主要運用在指定背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) ，而多了可以直接定義顏色不透明度 (opacity) 的模式，設計背景半透明效果可說是輕而易舉。

半透明背景色 (background-color) 效果

直接看範例一 xhtml

<div id="st1" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
   …以下略，實際內容見範例內…
  </p>
 </div>
</div>

共同基本的 css 定義

html, body, h1, h2, h3 {
 margin: 0px;
 padding: 0px;
}
h1 {
 font-size: 100%;
 font-weight: normal;
}
p{
 margin-top: 1em;
 margin-bottom: 1em;
}
h1,p{
 padding: 1em 1.25em;
}
.st {
 color: white; /*文字白色*/
 /*div.st加背景圖片並定義與圖片同尺寸*/
 background: url(圖片檔案位址) no-repeat center;
 height: 534px;
 width: 800px;
 overflow: auto; /*內容超過高度時產生捲軸*/
 margin: 1.2em auto 0;
 text-align: justify;
 border:1px solid rgb(60%,60%,60%);
 border-right:none;
}

css 定義半透明背景色 (background)

#st1 .inner {
 padding: 1em 4%;
}
/*標題 h1, 段落 p 加半透明背景色*/
#st1 h1 {
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgba(0%,10%,20%,0.6);
}

實際呈現可參閱 [範例一] ←請以有支援 css 3 的 firefox 閱覽。

多層半透明色重疊效果 - 背景加上邊線色 (border-color)

共同的 css 定義與範例一相同。

範例二 xhtml

<div id="st2" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>

css 增加定義半透明邊線色 (border)

#st2 .inner {
 padding-bottom: 0.25em;
}
/*半透明背景色與例一雷同*/
#st2 h1 {
 background: rgba(40%,0%,0%,0.6);
 border-top: 2em solid;
 border-right: 260px solid;
 border-bottom: 0.5em solid;
 border-color: rgba(100%,100%,100%,0.2); /*20%白色*/
} /*三邊加上不同寬度的 border*/
#st2 p {
 background: rgba(0%,10%,20%,0.6);
 border-top: 12px solid rgba(100%,100%,100%,0.4);
 border-right: 12px solid rgba(55%,55%,65%,0.4);
 border-bottom: 12px solid rgba(30%,30%,40%,0.4);
 border-left: 12px solid rgba(80%,80%,90%,0.4);
} /*四邊加上40%不同顏色的 border*/

實際呈現可參閱 [範例二] ←請以有支援 css 3 的 firefox 閱覽。

需要了解的是， css 指定元素的背景色或背景圖片 (background) 會顯示在 border edge 區域以內，也就是說， border 色與 background 色是重疊的，當 border 顏色定義成半透明時，就會與其後方背景顏色產生混合。在範例二中， h1 加了 20% 半透明白色 border ，但實際呈現的是疊合了暗紅的半透明背景色，因而，在最後面的背景圖片被不同的半透明顏色覆蓋，而產生不同的層次感，並且因為寬度不同的 border 而使設計更具活潑感；而 p 則在四邊運用不同的顏色與背景色混合，讓背景圖片產生較立體的半透明視覺效果。

這樣的雙層半透明網頁設計效果，只在一個元素 (element) 上定義樣式 (styles) 就可輕易完成，沒有 css level 3 時根本困難重重。

文字半透明 (color) 效果

顏色單位 (color units) 當然可以用在 css color 特性 (property) ， color 通常用來指定文字的顏色，所以也就可以讓文字變成半透明了。

共同的 css 定義與範例一相同。

範例三 xhtml

<div id="st3" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>

css 把標題首字變半透明色 (color)

#st3 h1::first-letter {
 /* h1 第一個字變粗大且半透明呈現*/
 font: 900 900% "標楷體",simhei,"細明體";
 vertical-align: -8%;
 color: rgba(85%,100%,100%,0.5); /*50%亮藍*/
}
/*半透明背景及邊線,與前例雷同*/
#st3 h1 {
 background: rgba(40%,0%,0%,0.4);
 border-bottom: 20px solid rgba(50%,20%,30%,0.4);
 border-left: 60px solid rgba(50%,20%,30%,0.4);
 padding: 1em 1.25em 0 0;
}
#st3 p {
 background: rgba(0%,10%,20%,0.6);
 border-top: 12px solid rgba(100%,100%,100%,0.4);
 border-right: 12px solid rgba(55%,55%,65%,0.4);
 border-bottom: 12px solid rgba(30%,30%,40%,0.4);
 border-left: 12px solid rgba(80%,80%,90%,0.4);
}

實際呈現可參閱 [範例三] ←請以有支援 css 3 的 firefox 閱覽。

當然，半透明文字的顏色也會與背景色疊合成另一個半透明色，再讓最後面的背景圖片穿透上來。

css 3 hsla 讓定義色彩及明暗度更直覺

以色相、飽和度、亮度 (Hue, Saturation, Lightness - HSL) 指定顏色，也是 css 3 開始有的顏色單位，與色彩模型中的 HSB 有些類似，或許還有很多人不太習慣，不過許多情況它還挺方便用的。

共同的 css 定義與範例一相同。

範例四 xhtml

<div id="st4" class="st">
 <div class="inner">
  <h1>也讓時間等一等</h1>
  <p>積極很好。人，肯積極，多半心裡有目標。…
     …以下略，實際內容見範例內…
  </p>
 </div>
</div>

css 改變半透明色的飽和度及亮度

#st4 .inner {
 padding: 1em 4%;
}
#st4 h1 {
 background: hsla(120,60%,20%,0.6);
 border-top: 1.5em solid hsla(120,40%,12%,0.3);
 border-right: 80px solid hsla(120,40%,50%,0.3);
} /*背景及邊線都是綠色調*/
#st4 p {
 background: hsla(0,70%,30%,0.7);
 border-right: 80px solid hsla(0,70%,80%,0.2);
} /*背景及邊線都是紅色調*/

實際呈現可參閱 [範例四] ←請以有支援 css 3 的 firefox 閱覽。

很多時候需要以同一種色調 (Hue or Tone)，呈現出不同明暗度的感覺，讓視覺上更有層次及立體感，範例中使用 hsla 定義顏色會是個好方法。眼尖的人應該已經看出，h1 或是 p 中指定的色相值 (Hue) 都是一樣的，也就是說用了同一種色調，而只是單純地在背景色 (background) 或是 border 定義不同的亮度值 (Lightness)，就可以產生更有深度的視覺效果；而如果希望降低或增加顏色的鮮艷度，如範例中只需要指定較低或較高的飽和度值 (Saturation) 就可以了， h1 就只是稍微改變了飽和度。使用 hsl 定義顏色，確實可以讓我們省卻不斷地挑選 rgb 顏色的麻煩，因為只要決定一個顏色，剩下就由亮度或飽和度來調整就可以了。

未支援 rgba, hsla 的瀏覽器也想半透明效果

未支援具有半透明 alpha 值色彩單位 (color units) 的瀏覽器，如果使用 rgba, hsla 指定色彩，只會略過該項定義，但不會因此而影響樣式表 (style sheets) 裡其它的定義。因此，我們可以另外替未支援的瀏覽器定義一組色彩，以範例一背景定義為例：

css 增加定義給未支援瀏覽器

#st1 h1 {
 background: rgb(30%,0%,0%); /*未支援瀏覽器指定不透明色*/
 background: rgba(30%,0%,0%,0.6);
}
#st1 p {
 background: rgb(0%,10%,20%); /*未支援瀏覽器指定不透明色*/
 background: rgba(0%,10%,20%,0.6);
}

未支援的瀏覽器只會執行第一項不透明顏色的定義，第二項會略過不產生任何影響；對於有支援半透明色彩的瀏覽器，雖然兩項定義都有效，但當然是以最後一項為執行的依據；所以，注意兩項順序顛倒就不會有半透明效果囉。這種作法，至少未支援的瀏覽器不至於結果差距太多。

以 png 格式半透明圖片作為背景

未支援的瀏覽器如果也想要有類似前述半透明效果的背景顏色，只要先製作一個很小的 png 格式的半透明圖片，例如 10×10 px 不透明度 (opacity) 70% 的黑色圖片 [圖例下載→ ] ，然後定義成背景圖片 (background-image)。以範例一的 p 為例：

css 改成定義背景為半透明 png 圖片

#st1 p {
 background: url(bg_bk70.png); /*未支援瀏覽器指定半透明背景圖片*/
 background: rgba(0,0,0,0.7); /*70%黑色*/
}

第一項除了 ie 6 沒辦法「正確」呈現外，其實較新型瀏覽器 (包括 ie 7) 都會有半透明黑色背景，唯一有點不方便的是，如果定義不同顏色的半透明背景，每次都必須製作不同的半透明 png 圖片。實際上，只需要第一項就可以在各家瀏覽器達到半透明背景的效果了。加上第二項將會更好，因為也可以讓有支援 alpha 值的瀏覽器直接運用更便利的 css 半透明顏色定義方式，對未來更有幫助，第二項的定義會將背景圖片 (background-image) 變成預設值 none (無)。

css 3 的 opacity 不透明度特性，像這樣 opacity:0.7; ，如果想要運用在此處，其實不是很恰當，因為 opacity 的定義會使整個元素 (element) 都變成半透明，包括內容裡的文字，如此可能影響閱讀，目前卻有很多人使用這種方法，有點匪夷所思，有興趣可以參閱久久前的某一個討論，裡面也有提到麻煩的 opacity 處理方式及以下將會提到的 ie filter 中的 alpha opacity。

filter 中的 alpha(opacity) 不透明度指定給 ie 6

ie 6 就需要用到 ie 專用 (ie only) 的 css filter 語法中 alpha 的不透明度 opacity ，不過這個方法也是整個元素 (element) 都會半透明呈現，而且元素必須指定 hasLayout property ；也由於是特定給 ie 6 的設計，所以最好運用 css hacks 技巧：

css 接著前例，定義半透明給 ie 6

* html #st1 p {
 background: rgb(0,0,0); /*背景黑色，也讓先前指定的背景圖片回復沒有*/
 zoom: 1; /*hasLayout*/
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); /*70%不透明度*/
}

這是 ie 專用 (ie only) 語法， 所以其實 ie 7 也可以用。麻煩的問題是裡面文字內容也半透明了，雖然有一奇特方法， css 定義其內層元素 (element) 為 position: relative; 就可讓裡面內容回復成不透明。但是像範例中的 p ，內層沒有可定義的元素 (element) 也就沒輒了，其實部落格設計也會遇到沒辦法自己增加元素的問題。另外，像範例中有捲軸產生捲動內容，但是在 ie 如果內層定義成 position: relative; ，該元素 (element) 就像是「固定」在原位，不會隨捲軸捲動了。所以，指定 ie 這個特性時，只能多注意一點囉。

ie 6 也使用半透明 png 圖片作背景

另一種 ie 專用 (ie only) 的 css filter 語法中 AlphaImageLoader ，可以讓 ie 6 「較正確」呈現半透明 png 圖片，不過圖片會「插在」背景 (background) 及內容 (content) 之間，所以如果原先有指定背景，會變成像似兩個重疊的背景：

css 改成「插入」半透明 png 圖片當背景

* html #st1 p {
 background: none; /*先前指定的背景圖片改回沒有*/
 zoom: 1; /*hasLayout*/
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg_bk70.png",sizingMethod="scale");
 /*插入圖片並縮放至與元素同尺寸*/
}

圖片會由所在元素的 border box 左上角開始插入。語法中 filter 內的 src="bg_bk70.png" (綠字) ，明顯地，雙引號內就是指出圖片檔的位址。而 sizingMethod="scale" 可以有三種選擇：

• sizingMethod="image" ：不論所在元素的 Box 大小，圖片一律以圖片本身尺寸完整顯示。如果 Box 尺寸大於圖片， Box 超過圖片的區域會被「裁掉」不顯示；如果 Box 尺寸小於圖片， Box 會保持尺寸，不會增大，而圖片則會「突出」 Box 範圍。這個定義是預設值，所以沒有 sizingMethod 這段時，仍會套用此定義。
• sizingMethod="scale" ：圖片會自動依據元素的 border box 尺寸縮放，所以圖片呈現可能會寬高不等比例變形。
• sizingMethod="crop" ：圖片會保持圖片本身尺寸，但是圖片超出 Box 範圍的部分，不會顯示，類似 css 定義背景圖片的呈現方式。

看起來似乎達到想要的半透明背景效果，也不會讓內容文字也變半透明。這樣的作法只是為了讓原本不能正確呈現的 ie 也能有我們想要的效果，嚴格說起來應算是 ie 的旁門左道，並非 w3c 標準規範。怪的是 ie 仍有不可預期的問題，使用時要先有心理準備就是了，像是內容如果包括需要滑鼠感應的元素 (如按鈕、輸入項之類) ，會變成無法執行，又得以 css 指定這類元素 position:relative; 才會作用。

思考 - Box Model 與 css 版面視覺設計

Box 在版面編排上可以說是無所不在，就算「內容」 (content) 是單單一個字都具有 box，佔有一小塊矩形區域；當然，也能由 css 個別指定不同的 padding, border, margin。如果 padding, border, margin 的距離都是「零」，那麼當然， padding box, border box, margin box 的大小就會與 content box 所擁有的寬高一樣。

許許多多字的 Box 就如同「堆積木」，一個個相鄰著由上而下堆疊起來 (書寫方向為由左向右、由上至下時)，將內容有規則地分布在版面上，而這個規則就是設計者以 css 定義的呈現方式。

行內層級 (inline-level) 與區塊層級 (block-level) 呈現模式不同

許多的「字」結合起來可以產生「段落」，段落則再形成更大的矩形 box ，將文字圍繞起來。

例如 xhtml

<p>
看到竹子想到王陽明。看到桃花想到桃花源記。看到蓮花想到周敦頤。<em>看到荷花想到何仙姑。看到玫瑰想到愛神。看到菊花想到陶淵明。</em>看到百合想到香水。～節錄自 monica 「聯想的遊戲」
</p>

元素 p 代表段落，一般以區塊層級 (block-level) 方式呈現，會是一個「獨立」的矩形 box ，可特別稱為 block boxes (圖中綠線) 。而 p 所包含的「內容」 (content) 可想像成，由「三節」行內層級 (inline-level) 或文字層級 (text-level) 的文字組成，三個行內層級元素 (inline-level emements) 當然都有自己的 box ，可特別稱為 inline boxes ，以一個個「自動緊接」的方式呈現，與 block boxes 圍成「一區」的矩形不盡相同。

1. 看到竹子想到王陽明。看到桃花想到桃花源記。看到蓮花想到周敦頤。
2. <em>看到荷花想到何仙姑。看到玫瑰想到愛神。看到菊花想到陶淵明。</em>
3. 看到百合想到香水。～節錄自 monica 「聯想的遊戲」

1 與 3 只是文字，屬於文字層級 (text-level) 元素，雖然有「自然產生」的 inline boxes ，不過由於沒有賦予特定的元素名稱，也可稱為「不具名 (anonymous) 元素」，所以無法經由 css selectors 為其指定 padding, border, margin 等；而 2 因為已被指定成 em 元素 (行內層級元素) ，就可以由設計者定義。

行內層級元素無法容納在一行內時， inline boxes 就會拆斷成二行或是數行，範例中的 em 元素就可能拆成二行或是三行的矩形框 (圖中藍線)，不再是標準的一塊矩形而已了。 inline boxes 的「左邊」在該元素第一行起始的左方，「右邊」在最末行結尾的右方，所以如果指定「左或右」的 padding, border, margin 時，只會在第一行和最末行作用，不會在各分行的「拆斷處」產生；指定「上或下」會在各行產生 (當然，依據 margin 規則，定義「上或下」不會作用在「不可替換」行內元素 (non-replaced inline elements) 。

抽象的 line box 因 inline boxes 而產生

line box 像是抽屜，也像骨架一般，將行內元素分成一層一層「收納」，如前例 (圖中紅線)，一層放不下就會轉到下一層。通常會看到行與行之間其實會有些許的空隙，不只是「字」的高度而已，這就是 line box 這個抽屜的高度，並不是 inline box 的高度。所以，實際上 inline boxes 是存在於一行一行抽象的 line box 裡，而 line box 一行行疊成區塊層級元素 (如前例的 p) 。 line box 由上向下，一行緊鄰著一行，而且永遠不會相互重疊。

line box 與前面所講的 box 不同， line box 是因行內元素所產生的抽象空間，只是區塊層級元素 (block-level elements) 的 box model 一部分而已，不是真實的元素，所以也不可能為其指定 box 的各項數值 (如 width, height, padding, border, margin 等) 。 line box 的寬度根據其容納區 (containing block) 所決定，而高度則由 css line-height 或 vertical-align 的定義來決定。

多重的 block boxes 像洋葱一層包著一層

實際上，每一個區塊層級元素 (block-level elements) ，必然會由另一個區塊層級元素包圍，根元素除外 (root element, html 文件指的就是 html 元素) ，所以，許多個 block boxes 一層一層包圍起來時就好似洋葱的構造。

例如 xhtml

<blockquote>
<h1>聯想的遊戲</h1>
<p>看到三國演義想到七俠五義。看到紅樓夢想到牡丹亭。看到山海經想到鏡花緣。看到芭蕉扇想到鐵扇公主。看到豬八戒想到沙悟淨。看到孫悟空想到如來佛。看到史記想到司馬遷。看到船想到孔明借箭。看到滿山秋色想到最愛的詩人王維。看到赤子純真一般的畫想到豐子愷。看到李叔同想到大護法夏丏尊。～節錄自 monica 「聯想的遊戲」</p>
</blockquote>

很明顯地， h1, p, blockquote 都是區塊層級元素。 h1 與 p 的「內容」 (content) 僅包含著行內層級的元素，就像前面一樣，兩者各自擁有矩形的 block box ，也都可以各自指定 padding, border, margin (圖中紅線) 。而 blockquote 從外包圍著 h1 與 p ， h1 與 p 成了 blockquote 的「內容」 (content) ； blockquote 形成另一個 block box (圖中綠線) ，當然也可以指定 box 的各項數值。

思考 - hasLayout 與 css hacks 拯救 ie bugs

本篇一開始就提到，為物件指定 hasLayout 性質就可以修復很多 ie 令人噴飯的 css bugs (hasLayout 大部分可修復背景不正常及 position 特性位移等問題) ，有幾種目前公認穩定又好的方式，但是有時必須搭配 CSS hacks ，才可以在不同瀏覽器正常地呈現，而如果需要通過 W3C validation ，用到非 w3c 標準語法時就需要運用 Conditional Comments 把語法隔離起來。

xhtml

<div id="main" class="hasLayout">
 <h2>早梅 張謂</h2>
 <p>一樹寒梅白玉條，迥臨村路傍溪橋。不知近水花先發，疑是經冬雪未銷。</p>
</div>

css

.hasLayout {min-height:0;} /* ie 7 hasLayout 生效 */
* html .hasLayout {height:0;} /* hack ie 6 hasLayout 生效 */

上面 css 語法例子符合 w3c 標準，是很穩定的好方法，只是語法感覺有點冗長。 min-height:0; 本來就是預設值，加了此項其實是多餘的，所以對任何瀏覽器不會有影響，也就不需要用到 hacks ；而 min-height:0; 在 ie 7 可驅使 hasLayout 生效，難纏的 ie bugs 也就隨之解決了。但是， height:0; 在不同瀏覽器上呈現有很大差異，所以就必須採取 css hacks 的技巧。 ie 7 與 ie 6 的 bugs 未必會在同一個物件同樣發生，所以，上述語法並沒有要求一定兩項條件都要同時存在，比較常出現 bugs 會是在 ie 6 ，可以視狀況加入其中一項或兩項囉。另外需要提醒的是，依據規則此方法在「文字層級」物件沒有作用。

承上 xhtml 例，再看另一種 css hasLayout 作法。

css

#main {zoom:1;}

以 zoom 指定 hasLayout 算是精簡的好方法， ie 5.5 以後版本就有支援。 zoom:1; 維持物件原來大小不作任何改變，但可驅使 hasLayout 有效，而且不論區塊層級或行內元素都有作用；非 ie 瀏覽器尚未支援 zoom 特性，所以完全不受影響，也就不需要用到 hacks 。唯一的小問題只是 zoom 並未納入 w3c 標準。

再看不同的例子。

xhtml

<div id="nav">
<ul>
 <li><a href="#">王維-陽關曲</a></li>
 <li><a href="#">張謂-早梅</a></li>
 <li><a href="#">杜甫-客至</a></li>
</ul>
</div>

css

#nav li a {display:inline-block;} /* hasLayout 生效 */
#nav li a {display:block;}

此例在版面設計常會遇到，因設計需要必須將行內元素 a 轉換成區塊層級呈現 (改變物件的 display 特性) ，很明顯地，加了 display:inline-block; 這項其實是多餘的，因為元素 a 還是會依照其後定義的 dislpay:block; 呈現，所以任何瀏覽器的呈現也不會有差異；而 display:inline-block; 驅使 hasLayout 生效， ie bugs 也就隨之解決了。這個方式 ie 5.5 以後版本就有支援，完全符合 w3c 標準，精簡且不需要用到 css hacks ，適當地運用也是一個很好的技巧。

最後叮嚀，不要想偷懶企圖使用像 * {zoom:1;} 的方式一次指定所有物件，發生問題的時候恐怕沒人救得了你；指定 hasLayout 性質的方式算是不少了，學習在不同情況下，針對有問題的物件變換最恰當的語法來修復 ie bugs ，才是網頁設計者應有的態度。

思考 - ::before, ::after Pseudo-element Selectors 使用原則

:: 為 CSS3 擬元素的標準表示法，主要是為了與 : 的擬類別 (Pseudo-classes) 作區分，有別於原來 css2 兩者同樣使用 : 表示，目前較先進瀏覽器 (firefox, opera, safari, …) 均有支援。

::before 搭配 contnet 特性 (property) 雙引號內所指示的字元，可在 selectors 指定的元素最前加入該字串 (包括空格，如上例的 "$ ")， css 因而將此字串視為一個元素，所以可以賦予該字串各種設計風格； ::after 一樣用法，不同的只是加在最後。可以把上例想像成加了兩個實際的元素，如：

xhtml

<strong class="amount"><span>$ </span>700<span> 萬元</span></strong>

另加一下 css 看看變化，

css

.amount {color:red;}

這樣會是整個 $ 700 萬元 都變成紅字，因為 ::before, ::after 所加入的字串擬元素，仍屬於 .amount 元素的內容，所以依據繼承性，擬元素 $, 萬元 也都是紅字了。稍微改變一下 css 看看：

css

.amount::before {content:"$ "; color:blue;}
.amount::after {content:" 萬元"; color:blue;}

這樣只有擬元素變成藍字，結果會像 $ 700 萬元，先前定義的紅字還是存在。 ::before, ::after 沒有限制兩個同時都要指定，也可以只指定一個前或一個後。

需要注意的是，以 ::before, ::after 配合 content 所產生的擬元素字串，會視為行內層級元素 (inline emements)，也就是文字層級 (text-level) 。

至於 content 特性還有更有用的字串加入方式，由於撰文時大多瀏覽器支援不甚完全，以後再作討論，有興趣可先參考 W3C The content Property 說明。

思考 - 條件式註解的應用

運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ：

xhtml 語法

<!--[if IE]>
 <p>您正在使用的瀏覽器為 ie 。</p>
<![endif]-->

<!--[if IE 6]>
 <p>您正在使用的瀏覽器為 ie6 。</p>
<![endif]-->

<!--[if IE 7]>
 <p>您正在使用的瀏覽器為 ie7 。</p>
<![endif]-->

<!--[if lt IE 7]>
 <p>您正在使用的瀏覽器為比 ie7 較舊的版本。</p>
<![endif]-->

<!--[if gte IE 8]>
 <p>您正在使用的瀏覽器為 ie8 或比 ie8 更新的版本。</p>
<![endif]-->

<!--[if !IE]>-->
 <p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->

<!--[if !(IE 6)]>
 <p>您正在使用的瀏覽器為 ie ，但不是 ie6 。</p>
<![endif]-->

<!--[if (gte IE 5.5)&(lt IE 7)]>
 <p>您正在使用的瀏覽器為 ie5.5 或 ie6 。</p>
<![endif]-->

<!--[if (IE 7)|(IE 6)]>
 <p>您正在使用的瀏覽器為 ie7 或 ie6 。</p>
<![endif]-->

<!--[if gte IE 7]><!-->
 <p>您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。</p>
<!--<![endif]-->

上面的語法實際呈現如下，請使用不同瀏覽器測試。

您正在使用的瀏覽器不是 ie 。

您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。

ie Conditional Comments 幾乎可以包圍任何 html 內容，包括整個元素 (elements) 或單獨的標籤 (tags) ；這屬於 html 語法，只適用在 html 語法內，出現在其它如 css 語法裡或 javascript 程式裡是會錯誤的。有時候我們因某些狀況不得不使用 ie 自創專有的語法，又必須符合 w3c 標準語法規範，或是需要避開 ie 的錯誤，又為了避免與其它瀏覽器發生衝突，條件式註解就成了有用的技巧。

條件註解當作 css hacks

僅供 ie6 及其較舊版套用的樣式清單檔

<!--[if lte IE 6]>
 <link href="style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

條件註解讓 javascript 在指定的瀏覽器執行

僅供 ie 執行的 javascript 程式檔

<!--[if IE]>
 <script src="script_ie.js" type="text/javascript"></script>
<![endif]-->

註解裡的運算子 (operators) : lt, lte, gt, gte…

語法中除了 if, IE 比較容易體會含意外，其餘看似難懂的符號，列出來解釋一下就容易了。

• lt : lower than ，比某一版本更舊的版本，如 [if lt IE 7] 。
• lte : lower than or equal to ，某一版本及其更舊的版本，如 [if lte IE 6] 。
• gt : greater than ，比某一版本更新的版本，如 [if gt IE 6]。
• gte : greater than or equal to ，某一版本及其更新的版本，如 [if gte IE 8] 。
• ! : 「非」、「排除」、「反向」的意思，可加在版本、運算子、或子運算式 ( ) 前，如 [if !IE] ，指定 ie 以外有效。
• ( ) : 可將基本的條件加入子運算式 (subexpression) 處理更複雜的條件，如 [if !(IE 6)] ，指定除 ie6 以外的 ie 有效。。
• & : 符合由 & 連接的全部子運算式的條件，如 [if (gt IE 5.0)&(lt IE 7)] ，指定 ie5 之後， ie7 之前有效。
• | : 符合由 | 連接的任一個子運算式的條件，如 [if (IE 5.5)|(IE 6)] ，指定 ie5.5 或是 ie6 有效。

所以， [if lte IE 6] 和 [if lt IE 7] 同樣指的都是 ie6 及其更舊版本，而 [if gt IE 6]與 [if gte IE 7] 同指 ie7 及其較新版本。

實際上，常用的運算子應該只有前面五項，所以沒有特別需求的話，不需要浪費太多時間鑽研每一項的用法囉！

稍作變化才能正確用在 ie 以外瀏覽器

在前面語法中，關於 ie 以外瀏覽器顯現的作法，加了一點東西，這是將 ie 專用註解語法 (紅色部分) ，再加註解標記，變成前後兩部分 html 標準註解 (注意藍色部分) ，才可以讓內容不再是註解；而 ie 仍舊以原來特殊語法判斷，不會理會另外加的符號，如此既能區分瀏覽器，又不會違反 w3c 標準語法。另外需要注意的是，如果同時也要讓某些 ie 顯現 (如最後一項) ，就必須動點手腳，如 [if gte IE 7]><!--> 中多加了 <! (綠色) ，只是為了避免 ie 會把接下去的 --> 顯示出來。

類似運用註解的方法在許多應用軟體也常見到，例如 Adobe Dreamweaver 裡的範本 (templates) 標籤、圖庫 (library) 標籤，也都是運用註解標註的方式讓特定的應用軟體來辨識，所以瀏覽器只會把它們當成註解而已，多留意看看就會發現其中的奧妙了。

思考 - css hacks 與 css selectors

selector {css 設計內容} 這一部分和平常的 css 寫法完全一樣，而多加了一些有點陌生的符號 (紅色部分) ，變成「很另類」的 selectors ，就可以使設計內容在不同瀏覽器有效。可別小看這種 selectors 的寫法，它仍舊符合 w3c 規範的語法。注意語法中有空格的地方不能隨意省去，因為意義會是不同的。

css hack ie6

* html selector {css 設計內容}

正常 html 文件的最外層元素就是 html 這個「唯一的」元素 (elements) ，而 * html 的「*」指向 html 更外層的元素，當然是不存在的；但是 ie 6 會誤認為有效，所以就可以利用此法設計只會在 ie 6 呈現的 css 。

css hack ie7

*+html selector {css 設計內容}

正常 html 文件的最外層元素就是 html 這個「唯一的」元素，而 *+html 的「*+」指向 html 同層 (adjacent sibling combinator) 的元素，當然不存在；但是 ie 7 會誤認為有效，所以就可以利用此法設計只會在 ie 7 呈現的 css 。

css hack ie8

html>/**/body selector {css 設計內容}
html:root selector {css 設計內容}

第一項在 ie8 及其它新式瀏覽器有效，而第二項只在非 ie 的新式瀏覽器有效，所以只要在第二項定義 css 覆蓋掉第一項，就等同單獨為 ie8 指定。如，

html>/**/body #main {color:blue;}
html:root #main {color:inherit;}

ie8 字的顏色會以 blue 呈現，而其它瀏覽器則保留原來樣式。

又如，

#main {background:yellow;}
html>/**/body #main {background:orange;}
html:root #main {background:yellow;}

ie8 背景色會以 orange 呈現，而其它瀏覽器則為 yellow 。

css hack firefox, opera, safari, google chrome …等新式瀏覽器

html>body selector {css 設計內容}

html>body 在語法上可以說是多餘的，因為 html 文件的最外兩層就是 html 和 body 這兩個唯一的元素，所以加不加這段，結果其實是一樣的；但是由於 ie 6 沒有支援有 「>」 符號 (child combinators) ，就可以利用此方式為 ie 6 以外的瀏覽器定義 css 設計。運用同樣的道理，大部分時候，可以將它簡化寫成 *>selector ，只是使用時要注意 selector 所指向的元素的階層關係，如果覺得搞不清楚，最好還是使用前者語法比較保險。

html>/**/body selector {css 設計內容}

html>/**/body 和 html>body 其實是同樣意義，因為符號 /**/ 只是 css 定義裡的註解語法，瀏覽器應當忽略它不會影響原有的內容，但是 ie 7 卻會因為這個位置加了註解符號而變成無效。

css hack non-ie (非 ie)

html:root selector {css 設計內容}

通常運用 ie 未支援的 css selectors 語法，就可以為 ie 以外的瀏覽器 (non-ie browsers) 設計。

:root pseudo-class 在 ie 8 仍未支援，所以語法中 html:root 就可以簡單地將 ie 排除在外了。 ie 還有其它尚未支援的 selectors 也都可以派上用場，像是運用 :not() negation pseudo-class ，可以寫成如 html:not(:first-child) selector 或是 html:not(:empty) selector ，也都可以將 ie 排除。 ie 的支援程度總會較其它新式瀏覽器慢半拍，依循這個邏輯，就可以很輕易與 ie 區隔設計了。

css hack firefox (Gecko 核心的瀏覽器), google chrome2, safari4

selector:not([att*=""]) {css 設計內容}

這個…真有點複雜，先對照例子看看。

xhtml

<div class="content">
 <p>花徑不曾緣客掃，蓬門今始為君開。</p>
</div>

css

.content:not([class*=""]) {background: lime;}

需要注意的是語法中 [att*=""] 的 att 必須對應元素已有定義的屬性 (attributes) ，如例中 div 元素的 class 屬性。如果對應的是元素尚未定義的屬性，把上例改成 .content:not([id*=""]) ，雖然語法上沒有錯誤，但是這會使其它新式瀏覽器也同樣有效，就不是僅僅 hack firefox ，而是 hack ie 以外的瀏覽器了 (ie 尚未支援 :not() negation pseudo-class) 。還有要小心 :not 前面沒有空格。

css hack safari, css hack google chrome

selector:not(:root:link) {css 設計內容}

對照前一個 xhtml 例子，css 可以是

.content:not(:root:link) {background: orange;}

:not() negation pseudo-class 括號內的引數 (argument) ，依據 w3c 的說明，應為 a simple selector (簡單指標) ，但是未明確指出 a sequence of simple selectors (簡單指標串) 是否可以，像是 #main.box, *.content, *[class^=part], 或 a:link 之類。

目前僅有 safari 及 google chrome 支援 :not() 括號內引數可以是 a sequence of simple selectors ，所以就利用這個特點來作區隔。依照這個邏輯，寫法就可以很多彈性變化了，如 selector:not(*:root), selector:not(*.xyz), 或 selctor:not(*[title=xxx]) ，都一樣有效。甚至改成 html:not(*:empty) selector{css 設計內容} 也是可以的，既豐富又有趣。另外，需要小心如果引數裡有元素名稱的 type selector (型態指標)， opera 會造成之後 css 設計無效。

css hacks 處理最小高度 (min-height) 及高度 (height) (hack ie bugs)

提到有關 css 指定「高度」的問題，始作俑者就是 ie 6 。 ie 6 並未支援 min-height 特性，這也無可厚非，不過最糟糕的是把 height 特性拿來代替 min-height 特性，這也就造成廣大仰賴 ie 的網頁設計者，遭遇後來新版 ie 及其它新式瀏覽器時，發生版面內區塊的內容超出、重疊、或擠成一堆的狀況。實際上 ie 6 的呈現方式是錯誤的，以前看不出來就算了，現在就不能繼續將錯就錯下去了，幸好，我們可以運用 css hack 將 ie 6 的定義區隔起來。

例如 xhtml

<div id="main">
 <p>勸君更盡一杯酒，西出陽關無故人。</p>
</div>

css

#main {min-height: 200px;}

這是常會遇到的狀況，網頁設計者可能因設計需要而必須指定元素 div 有一個高度 (如 200px)，但是如果「內容」(content) 增加時，可能會超過 200px ，也希望 div 的高度會隨著「內容」增高。正常狀態下，我們只需要單純地以 #main 這個 css selector 指定 min-height 就可以了，如例中 #main {min-height: 200px;} 。不過， ie 6 沒有支援 min-height 特性，所以對該項定義就不會有作用。如果要讓 ie 6 也能達到同樣效果，就必須用到 height 特性，但是直接增加 height 將會使所有瀏覽器同時有效，如：

這樣的 css 不會是想要的結果

#main {
 min-height: 200px;
 height: 200px;
}

指定了 height 也就是 div 的高度被「固定」了，那麼 min-height 就沒意義了，就算內容增加也不會改變「固定的」高度 (如 200px) ，過多的內容只會以「越出」 div 的高度範圍顯示，就可能與其它的區塊重疊，看起來就像擠成一堆。因此， height 必須另外區隔給 ie 6 才可以達到我們想要的結果。

正確的 css

#main {min-height: 200px;}
* html #main {height: 200px;} /*僅 ie 6 ~ ie 5.5 有效*/ 

ie 6 對第一項定義的 min-height 沒有作用，但是會讓第二項有效；而新式瀏覽器只會讓第一項的定義有效，但第二項不會作用。如此就是運用 css hack 的技巧，讓 ie 6 能以 height 達成「最小高度」的目的，但是又不影響其它瀏覽器。

本篇所提 css hacks 技巧，主要是設計者可以經由 css selectors 的變化，做到在不同瀏覽器可有不相同的 css 設計，提供設計者很大的發揮空間，而且與平常定義 css 特性完全相同；當然， css hacks 還有其它不同方式，設計者應視狀況使用，如何善加運用還是決定在設計者。