在寫文章之前,得先解釋一下瀏覽器程式與標籤的運作。當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容器時,再花時間去說明就好。*/

克里斯 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • flyhi
  • 克里斯大人:這種比喻只有你想得到吧!太利害啦~~
  • 哈,知道我很會鬼扯了吧!

    克里斯 於 2007/07/29 23:49 回覆

  • busymom
  • Wow1

    Wow! What an impressive analogy!!

    Precise, integrated, and intriguing. I really enjoy your blog. Thank you!
  • 嗯...被人肯定的感覺是不錯的!^_____^
    也希望大家都能多用肯定與贊同的口吻鼓勵你周遭的家人、同事或朋友囉。像我就常常跟我家小比說"你怎麼長得這麼可愛ㄚ",這時他就會把眉毛揚得更高,感覺是在回答"Many thanks for your warming words, and this is my pleasure."

    克里斯 於 2007/07/29 23:54 回覆

  • repeat
  • 我也是第一次看到有人講inherit概念用民法來解釋的 o_O
  • 其實呢,法律邏輯與程式概念是相通的,所以歡迎所有學資訊的高手們來念法律,睡前翻翻六法全書,保證讓你夜夜好眠喔!!

    克里斯 於 2007/08/01 00:24 回覆

  • lifeagain2006
  • 原來做部落格 是那麼深奧的事情阿>< ,
    六法全書太厚啦,我讀了1個星期還沒讀完(甚至沒讀懂....),克里斯大人....您真的太厲害了(大拇指豎起)
  • 其實呢,研究自己改部落格的樣式,不是那麼有趣啦!不過卻可以讓你學到一些東西,歡迎鑽入這世界囉!!(法律世界就勸你能免則免囉!!)

    克里斯 於 2008/05/28 15:14 回覆