克 里 斯｜ 框 ．限

在寫文章之前，得先解釋一下瀏覽器程式與標籤的運作。當IE或FireFox等瀏覽器讀取網頁原始碼而讀到標籤時，它就會去找尋跟這標籤有關的屬性值，如果瀏覽器所讀到的標籤是帶有選擇器(可能是ID或Class)的，那麼它就會到CSS樣式表中尋找那個選擇器的內容。因此，ID選擇器就是IE等瀏覽器的線索。以<Div id= "Container ">為例，Container這個關鍵字就是一個ID選擇器，瀏覽器程式會去CSS中尋找Container這個關鍵字所定義的屬性值，讀取之後就顯現在網頁。

從前篇文章的圖示可以知道，在Grey模板中，<Div id= "Container" >這個容器標籤是個起始，由於這個父輩標籤包含了所有其他的容器標籤，因此其他子標籤也就得繼承他的所有屬性(可能是家產，也可能是負債)。談到繼承，我想就用我國目前財產繼承制度作個解釋範例，大家就當我閒扯吧。根據台灣的民法，如果子女不打算繼承父母親的遺產(這情形多發生在父母留下龐大的債務)，就得在繼承開始後六個月內向法院聲請『拋棄繼承』，如果不依照法律向法院提出這樣的宣告的話，作子女的就得扛起父母的負債。

轉到CSS樣式語法，也同樣是這個道理，子標籤如果要有自己的樣式屬性，就得站出來革命，表達「我要有自己的個性」，得在CSS中提出自己個別樣式的宣告，不然子標籤就必須繼承父標籤中的樣式。無論如何，先不管未來自己的小孩想不想繼承老爸留下的遺產，但當老爸的一定要爭氣，至少不能留下爛攤子給兒孫收拾。<Div id= "Container ">這個容器標籤也相同，我們得先定義好它的所有屬性，這樣日後在處理其他標籤時，就會輕鬆很多，如果不打算個別宣告，就可以讓其他子標籤直接繼承它的屬性就好。
在HTML中，關於容器標籤的樣式語法非常多，由於我們學CSS的主要目的在於修飾版面，我想沒有必要去介紹一些幾乎用不到的屬性。我個人認為最佳的介紹方式，就是直接把容器標籤本身區塊的屬性、以及其他可載放元素(例如文字圖片)的屬性一次列出，這樣不但一目瞭然，也容易作為其他標籤的參考。在/*....*/裡面的內容是註解，將不會被認為是樣式語法的一部分，我們也可以利用這個註解語法，把一些屬性值讓它失效（Disable）。為了不讓文章太長，這篇先談兩個步驟，皆與容器區塊本身的屬性有關，下一篇再來談容器可包裹元件的屬性。

#Container
{
/*(Step 1)先設定長寬與定位*/
width:900px;
/*設定容器的寬度為900px，可自行依照版面大小調整，最好能跟大於你要放的圖片寬度*/
height:auto;
/*設定容器的高度為auto，因為是Container，高度可以不用設定固定值，讓它隨著版面內容而自動變化就可*/
position:static;
/*設定容器的位置為靜態位置，有absolute(絕對位置)、relative(相對位置)、static(靜態位置/預設值)三種值可以選擇，Container因為是第一層容器，基本上不需要設定位置，讓它依照網頁原先的排列方式就可以，如果要設定絕對位置或相對位置的話，就必須加上top跟left屬性值。*/
float:none;
/*設定容器的接續位置，有none(預設)、right以及left三種值可以選擇，如果設為left，那麼Container版面就會漂浮到左邊去囉!!，這裡選預設的話，容器會置中囉!!*/

/*(Step 2)設定邊界、外框與背景*/
margin:2px 2px 2px 2px;
/*這是這個容器的外邊界值，順序是上右下左*/
padding:1px 1px 1px 1px;
/*這是這個容器的內邊界值，順序是上右下左*/
border:1px solid #C0C0C0;
/*設定這容器的外框線寬度(border-width)為1px，外框線樣式(border-style)為solid(實線)，顏色色碼(color)為#C0C0C0。外框線樣式的選項總共有solid(實線)、double(雙線)、groove(溝線)、ridge(脊線)、inset(嵌入線)、outlet(浮出線)和none(無)這7種，顏色色碼是採用16進制表示法，#RRGGBB(R紅、G綠、B藍，三原色配色法)*/
background:#FFFFFF url() no-repeat fixed center;
/*設定這個容器的背景顏色為白色(#FFFFFF);不使用背景圖，所以url這裡不填入圖片連結位址;背景圖片設為不重複排列(no-repeat);背景圖片的捲動方式設為fixed(固定);背景圖片開始顯示的位置為中間(center)。要變換背景顏色只需更改色碼;要使用背景圖的話，就填入圖片的連結，你可以上傳圖片到相簿後，去找那張圖片的連結位置就可;背景圖片的排列方式有repeat-x(往X軸延伸)、repeat-y(往Y軸延伸)以及no-repaet(不重複排列)這三種設定值可以選擇;背景圖片的捲動方式有scroll(捲動)以及fixed(固定不捲動)這兩種設定值可以選擇;背景圖片開始顯示的位置因為比較複雜，我在Container這裡沒有使用背景圖片，所以打算等到談到Top容器時，再花時間去說明就好。*/