在Xuite Blog CSS樣式裡面的第二部份是Body { ..... }，定義整體畫面主體的顯示樣式，直覺地看字眼，Body：就是身體，就是主體啦。

在接下來要進入到各個更細部的定義之前，我覺得要先講一下Body跟其他區塊的關係！

首先我畫一張圖，來表示一下一個我們看到的Xuite Blog網頁區塊圖，從最上面來看，我把畫面打橫來看(網頁的上面在左邊、下面在右邊)，我以三欄式來做說明，基本上我們應該可以看到最上方的區塊banner，最下面的區塊footer，以及中間區塊[包括有linksLeft、mid、linksRight(由左而右)]，等等的基本區塊。

這些區塊從上圖中，我們可以看到它們是在Container區塊之上，Container又在body之上！

所以body幾乎可以算是最底層的CSS定義！當然那個HTML的區塊又更下一層。

好了！對於每個區塊我們大致上知道了它們的顯示的位置後(上下位置)，這樣我們就知道，為什麼有些時候我們改掉部份的設定，確沒有看到改變，有時是因為被遮蔽在下面，所以沒有發覺它的改變。

上面的那張圖的左側我有貼一些圖片，其實它就是Xuite CSS裡面白色聖誕樣式的範例底圖，我稍為說一下↓
body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif);
    background-attachment:fixed;
    background-repeat:repeat;
}
在body裡面的背景圖片，有設定http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif為底圖，這個圖片就是↓
，然後搭配background-attachment:fixed;以及background-repeat:repeat;的CSS語法定義，讓這個Body區塊層的背景圖樣是固定不動！(拉動捲軸時，它不會跟著動)，而且它是重覆貼圖片，充滿整個Body層。

我擷取畫面說明一下↓

因為Body底圖在蠻下面的圖層，所以我們用捲軸拉到畫面最下方才看到部份的雪花背景，閱讀部份文章或是日誌首頁還甚至會看不到，主要是因為CSS樣式裡面的Container區塊有定義其背景色為白色↓
/*定位框*/
#container {
        position:relative;
        text-align: left;      /*width:85%;*/      behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px auto;
  background:#FFFFFF;
        }

因此，有文章的顯示部份會填入背景色，因此我們很難看到最下層的body的背景圖。

然後我們看到banner區塊的背景圖片有定義↓

，其CSS語法為↓
/*檔頭*/
#banner{
    margin: 0px 5px 0px 5px;
 padding: 0px;
 height: 200px;
 background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_1.jpg);
 background-repeat:no-repeat;     
}
所以banner背景圖片就會遮住body的背景圖片(因為它的圖層比較上面)。

這樣子說明一次，大家就有些許瞭解了嘛！？

所以我們回過頭來看body這段CSS語法中，Xuite定義了什麼？↓
body{  
    margin:0px 0px 0px 0px;
    text-align: center;
 background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif);
 background-attachment:fixed;
 background-repeat:repeat;

}
我們一行一行來說明一下↓
margin:0px 0px 0px 0px;

說明：margin語法是定義這個圖層區塊在下一層圖層裡面的顯示邊緣為多少？其標準的各個參數依序是：top, right, bottom, left。也就是↓
margin: margin-top margin-right margin-bottom margin-left;

它是定義這個圖層顯示與下一層(Parent)間的邊緣距離↓

text-align: center;

顧名思義，就是在Body這個區塊裡面的字是置中對齊(center)。
標準的text-alagn可以設定的參數有：
left;    /* Aligns the text to the left */
right;   /* Aligns the text to the right */
center;  /* Centers the text */
justify; /* 我也不知道倒底是啥意思 */

background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif);
前面我們已然講過background-image圖片的部份，其語法就是background-img:url(圖片網址);可以是.jpg, .gif的格式檔(其他格式沒試過ㄝ)。

background-repeat:repeat;

這個是指背景圖片反覆貼，跟貼磁磚一樣，從左至右，從上到下貼滿。
標準的重覆貼的參數有：
repeat;    /* 背景 repeated vertically and horizontally */
repeat-x;  /* 背景 repeated horizontally 從左至右一列 */
repeat-y;  /* 背景 repeated vertically 從上到下一行*/
no-repeat; /* 背景不重覆，只顯示一張*/

另外補充一些相關的語法↓
background-attachment:fixed; /*背景固定不動 */

如果要隨著捲動，可以改為↓
background-attachment:scroll;

background-color: #00ff00; /* 背景色 填入色碼 */

background-color: transparent; /* 背景透明 */

background-position:   /* 背景圖片位置，參數有↓ */
top left;       /* 左上 */
top center;     /* 中上 */
top right;      /* 右上 */
center left;    /* 中左 */
center center;  /* 中中 */
center right;   /* 中右 */
bottom left;    /* 左下 */
bottom center;  /* 中下 */
bottom right;   /* 右下 */
x-% y-%;        /* 水平 x軸 的百分比位置, y軸 的百分比位置 */
x-pos y-pos;    /* 水平 x軸 的絕對位置, y軸 的絕對位置 */

其他跟底圖有關的，可以參考我以前寫的相關文章↓

>自定CSS將Blog底圖換掉、
  ※自定CSS將Blog底圖換掉之補充說明(將Blog的底圖換成自己想要的)我