標籤 ： 前一篇入門寫到Xuite Blog裡面的基本大架構中的天、地、左中右欄等區塊位置的部份，所以我就以Top down(從祖先開始講族譜，一代一代講下去，然後講到各個位於container裡面的天、地與左中右欄)，本篇講完基本的天、地、左中右欄等後，我會再繼續講位於各個區塊內(其他旁係分支後代的CSS)各項細部的資訊區塊CSS。
我拿目前Xuite最新的一個版型來討論↓
我抓圖片然後依據前一篇文章的各個區塊顏色框給它套上去↓
其實我的順序就是彩虹的色：紅澄黃綠藍靛紫，再加個黑的順序！
好，那我們接下來就看相關的CSS，這樣以討論Case的方式來教學可能比較好瞭解，這部份的CSS如下↓
/*主體*/
html{
}
body{
}
/*定位框*/
#container {
}
/*檔頭*/
#banner{
}
/*左欄*/
#linksLeft{
}
/*右欄*/
#linksRight{
}
/*中間欄*/
#mid{
}
/*檔尾*/
#footer{
}
在上面我僅列出各個區塊(選擇器的CSS定義)，CSS樣式的屬性與設定值都還沒有定義，主要就是要先講怎麼抓出選擇器？因為我們看到有
html{} body{}
也有#container {} #banner {} #linksLeft{}, .....
它們選擇器名稱前面為什麼有的有#井字號，有的沒有？這是什麼？為什麼是不一樣的？
沒有#井字號的表示是前一篇文章講的型類 (Type) 選擇器，也就是HTML語法中的標準用字！
有加#井字號的表示是前一篇文章講的ID選擇器，就是HTML語法中使用者自己定義Object的ID！
像#container {} 對應的HTML語法會是↓
<div id="container">
</div>
還有還有，前一篇講的Class選擇器，就是HTML語法中使用者自己定義CSS類別(Class)的名稱！它的CSS語法會是在選擇器名稱前面加句點.，像下面的例子↓
/*欄位名稱*/
.sidetitle{
}
對應於HTML語法會是像↓
<div class="sidetitle">
</div>
這部份後續會出現在各個區塊更細部時，常見到的Class類別定義。可能下一篇才會介紹。
所以上面那些選擇器名稱就是看(參考)Xuite部落格網頁的頁面原始碼，(參考前一篇已經先列出的div族譜)
<html>
<body>
<div id="container">
<div id="banner">
</div>
<div id="linksLeft">
</div>
<div id="linksRight">
</div>
<div id="mid">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
然後抓出各個區塊的選擇器名稱出來的！所以如果頁面原始碼沒有定義ID,或是Class，通常就很難透過CSS去改動它！所以分析頁面原始碼是可以瞭解那些可以改，那些不能改。(當然CSS功力不同，也是有差，有些時候運用CSS小技巧還是可能有機會將不可能變可能的！這後續會有機會介紹幾個小技巧的範例！！)
好了，我們知道各個區塊選擇器名稱後，我們再來討論要給予它們什麼樣的CSS樣式定義！所以我們逐一討論一下各個選擇器的CSS樣式定義↓
首先我們討論html
/*主體*/
html{
}
很不巧，我抓這個版型的範例中它都沒有定義任何CSS樣式！
沒關係，我自己補充說明好了，一般而言，在html這一段的CSS樣式定義比較常見都是去定義捲軸的顏色，捲軸的CSS樣式屬性與設定值，可以直接去這個網站http://www.iconico.com/CSSScrollbar/ 玩比較快，它可以線上設計顏色，然後它的頁面下方就會產生對應的CSS語法給你！！
<style>
body {
scrollbar-base-color: #567;
scrollbar-arrow-color: #fff;
scrollbar-darkshadow-color: #ccc;
scrollbar-face-color: #505050;
}
</style>
因為我們是貼到html{}那一段的，所以它給的部份是貼進body{}樣式裡面，所以我將不需要的部份用刪除，當然其實也是可以就將捲軸CSS樣式語法貼到body{}裡面，還是讓html{}維持是空的部份！
至於body{}，它應該算是最主要的區塊，最大的部份，基本上是跟html{}一樣大！
body{
margin:0px 0px 0px 0px;
text-align: center;
background-color:#201814;
}
這個範例個人認為margin:0px 0px 0px 0px;是多餘的，而且是無效的！
一般在選擇器裡面要留白的方式(CSS語法)有兩種：margin v.s. padding
參考：http://lkamal.blogspot.com/2006/12/margin-vs-padding-css-properties.html的說明↓
CSS provides two properties named margin and padding for keeping space between HTML Box type elements. But why do we have two properties for the same reason? Are they similar?
No. They have a main difference.
Padding - defines space between border and element content
Margin - defines space between border and other outer elements
也就是說：margin是指這個選擇器區塊它跟父選擇器區塊間的留白
padding是指border框架內容的留白部份！
看一個範例比較清楚它們倆的不同↓
<div style="margin:25px; background:#cccccc; border:#000000 2px dashed;">
Text inside element
</div>
<div style="padding:25px; background:#cccccc; border:#000000 2px dashed;">
Text inside element
</div>
這樣的margin與padding可以在後面用於banner、linksLeft, linksRight, mid, footer等等地方。在body用margin是不對的，因為它應該沒有比他更外的框(雖然說html{}算是它的父選擇器，但是它們基本上都已經包括有捲軸的部份的區塊，所以不可能要捲軸還在其右側有留白吧！)，不過在body{}裡面若是改用padding就有意義！這樣就可以讓其內容物在上下左右留白部份取得定義。
語法參考
margin: 上px 右px 下px 左px; /*上右下左的留白距離 */
padding:上px 右px 下px 左px; /*上右下左的留白距離*/
第二個樣式設定為↓
text-align: center;
也就是表示文字對齊為：置中對齊！
其他語法參考：
text-align: left; /*置左對齊！*/
text-align: right; /*置右對齊！*/
text-align: justify; /*兩邊對齊！*/
第三個樣式設定為！
background-color:#201814;
這部份範例是定義body的背景顏色，色碼為#201814，色碼可以參考↓
http://blog.xuite.net/jeanson61/xuite/13141477，這一篇有介紹工具去抓色碼！
這裡我建議改用CSS樣式語法↓
background: #00FF00 url(stars.gif) no-repeat fixed top center;
這樣的語法一次解決！也就是background:後面放background-color background-image background-repeat background-attachment background-position等設定值(參數)。可以參考http://www.w3schools.com/CSS/css_background.asp介紹。
一次搞定背景色加背景圖片，並且定義背景圖片的位置與重覆與否！
建議在body{}裡面還可以放字體大小、字型、顏色等定義，這樣會可以繼承到它的子選擇器裡面！所以可以加上↓
font-size: 22px;
font-family: Comic Sans MS,arial,helvetica,sans-serif;
font-weight: bold;
color: #ffffff;
要改字體可以參考http://www.w3schools.com/CSS/css_font.asp。
接著繼續往下一代container介紹：
/*定位框*/
#container {
background-color:#b2d300;
position:relative;
text-align: left;
width:970px;
margin: auto;
border-bottom-style: none;
padding: 0px;
}
這邊也是有定義它的背景色(backgrou-color)，建議還是可以考慮用background: #00FF00 url(stars.gif) no-repeat fixed top center;這樣的語法一次解決！要背景色與背景圖片都可以！[備註：是背景色與背景圖片都同時存在喔！]
我弄個範例好了↓
/*定位框*/
#container {
background: #FF0000 url(http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/117172/117172_6.gif) no-repeat top left;
position:relative;
text-align: left;
width:970px;
margin: 0 100 0 100;
border-bottom-style: none;
padding: 0px;
}
在這裡面Container的背景色與圖片都有出來↓
position:relative;
這個CSS樣式是定義container選擇器的版面位置，這裡的設定值是relative，還有absolute, static等其他值可以選擇，參考：http://www.w3schools.com/CSS/css_positioning.asp。這個不是三言兩語講的完！
以後有空再細談。
還有一個width:970px;是定義這個選擇器selector的寬度大小！當然有寬度可以定，也可以有高度可以定，例如height: 700px;
有了寬度與高度定義，如果資料超過這個寬與高的時候怎麼辦？所以就可以加上overflow: auto;之類的語法，參考http://www.w3schools.com/Css/pr_pos_overflow.asp。
就會出現水平或是垂直捲軸，或是不顯示(hidden)等等。
糟糕，寫不完到container的下一代：banner, linksLeft, mid, linksRight, footer！
待續
