Blog 底布（背景）設定：
| /* Background 部落格底布＜背景＞*/ body{background:#f6f6f6} |
或是
| /* Background color for whole page 定義部落格底色＜color=色彩。whole page=全部頁面＞*/ body{background-color: #f6f6f6} /* Background image for whole page 定義部落格背景圖。＜image=圖像＞*/ body{background-image: url(圖檔位址); background-repeat: repeat} ↑↑都是在定義部落格底布，可將其合在一起，以免因加添元件時不小心重複了用語。很多人都常犯類似的錯。 |
語法說明：
| /* Background */ ←這是沒用過進階樣式會顯示的標頭 /* Background color for whole page */ ←含↓都是用過進階樣式後會顯示的標頭 /* Background image for whole page */ ←含↑都是用過進階樣式後會顯示的標頭 |
body{……} ←這是底布區語法標籤，可加入↓下面的各個元件來控制＜body=本體、主要部分＞
| background-color:#F6F6F6; | 定義部落格底色（未設定時會依您選用的樣式的內定色） F6F6F6 ←是指顏色代碼。 |
| 如何取得顏色碼呢？最簡單的方式是在您要發表文章時，可選擇文字顏色的地方；當您將滑鼠移至該色塊時，於螢幕最下方的狀態列左側即能顯示該色碼了。 | |
| background-image:url(圖檔位址); | 定義部落格背景使用圖檔。圖檔未顯現的部分會以底色顯示。 |
| 圖檔位址是指置放於網路空間的位址，而非指您 Pc 內的位址或置於部落格相簿裡的圖位址。使用的圖檔最好是用可重複貼圖的，因為每台螢幕使用的顯示模式不同，而部落格並不是做給自己看的。 | |
| background-repeat:repeat; | 重複貼圖方式。除非底圖夠大，否則會有留白。repeat=重複，可佈滿框內。 用 no-repeat 則單圖顯示。用 repeat-x 則於X軸（水平）佈滿。用 repeat-y 則於Y軸（垂直）佈滿。 |
| background-attachment:fixed; | 固定部落格底布（捲動時只捲動其他內容）＜attachment=貼圖方法，fixed=固定、不動的＞ |
| backgroud-position: ？% ？%; | 此語已無效。是在定義圖邊距左側 ？％、距上方 ？％，可調整 ％ 來移動單一底圖位置。＜position=位置＞ |
| 奇魔聖誕節底布 | http://tw.yimg.com/i/tw/blog/css/cat5_3/cat5_3.jpg |
每組定義皆需以；號來做分隔
例如：
body{background-image:url(圖址); backgroud-position: 50% 50%; background-repeat:no-repeat; background-attachment:fixed;}
即指底圖置中、不重複貼、且頁面固定
單色顯示不加圖時可只用下式↓
body{background:#FFFFFF;} 或 body{background-color:#FFFFFF;}
語法範例：
| /* Background 部落格背景 */ body{background-color:#FFFFFF; background-image:url(http://hk.geocities.com/h88wy/HH001.gif); background-repeat:repeat; background-attachment:fixed; } 或 /* Background 部落格背景 */ body{background:#FFFFFF} |
Blog 框線（邊線）設定：
框線語法亦可直接加在上一（部落格底布）式內。本語法未設立時，即為無框線。
| /* 部落格框邊設定 */ body {border:3px outset #FFFF00;} |
或是用下式↓分別設定框飾（也可如範例）
| /* 部落格框邊設定 */ body {border-top:3px outset; border-bottom:3px outset; border-left:3px outset; border-right:3px outset; border-color:#FFFF00; opacity:100;} |
語法說明：
| body{……} | 同樣是底布區語法標籤，可加入↓下面的各個元件來控制 |
| border:3px 或 border-top:3px border-bottom:3px border-left:3px border-right:3px | 指邊框線厚 3px，值越大厚度越大，設成 0px 即是無邊框＜border=飾邊＞ 獨立、各別定義框線： border-top（上框邊） border-bottom（下框邊） border-left（左框邊） border-right（右框邊） |
| 框邊樣式 | double=雙實線、solid=實心線、dotted=菱形點線、dashed=虛線、 outset=凸框、inset=凹框、groove=立體內凹框、ridge=立體浮凸框 |
| border-color:#FFFF00; 第一式之 #FFFF00 | 定義框線色 因於 border:3px outset #FFFF00; 已指定是用於 border 所以不用再指定了 |
| opacity:100 | opacity 是在定義不透明度：100=不透明、0=透明。在這裡定義透明度是錯誤的，圖片或顏色的深淺，由圖片更改或色塊挑選即可，這裡設了透明度將作用於整個 body{…}，也就是連背景都跟著動，但是這裡卻是底層。正確設透明度是在圖層下尚有圖層，且有需要部分顯現下圖層，或者要隱藏目前圖層（例如：隱藏框線）時才設立。 |
【border:3px outset #FFFF00;】或【border-top:3px outset;】為同一組的定義，所以各元件僅以（空格）做分隔；而 border-top、border-bottom、border-left、border-right 則是分別在定義各邊框，所以要用（；）號做分隔。
語法範例：（本語法未設立即為無框線。或用：body{border:0px;} 亦可）
| /* 部落格框邊設定 */ body { border-top:5px #FFFF00 solid ; /*5px 寬，黃色實線*/ border-bottom:5px #0000FF solid ; /*5px 寬，藍色實線*/ border-left:5px #000000 solid ; /*5px 寬，黑色實線*/ border-right:5px #FF0000 solid ; /*5px 寬，紅色實線*/ } |
部落格佈局寬：
目前市場上螢幕寬大部分都是調整為 1024，扣除應用程式的邊框（以 IE 來說）7*2 = 14 pt，再扣捲軸寛 18 pt 後，內容區只剩約 990 pt，所以您要調整的佈局寬最大也就是在這個範圍內。另外， Yahoo 部落格左右欄框如以最寬的無框線方式呈現其寬度是 150*2 = 300 pt，左右欄框與內容區間隙是 11*2 = 22 pt，主文區邊與內文間隙約是 7*2 = 14 pt；所以一般內文圖檔或影片框在三欄式如超過約 650 pt 就會逼走左欄框往下了，這也就是說，圖檔及影片框最好是設 600*450 為最佳呈現方式。
| /* col layout 定義佈局寬度<山坳 佈局、安排>/ .twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;} |
語法說明：
| .twocolga .ycnt3col, .twocoldr .ycnt3col {……} | 定義除頂欄（第一橫框）外佈局總寬度，第二橫框及主文區會擴張到最寬。 這式主要用於二欄式，三欄式已經很寬了應不用再定義。 |
| zoom:1; | 圖層：１ |
| width:950px; | 定義佈局寬。二欄式內定寬是 750 px，1024 的螢幕最寬可調到 990 px 您如要展示底布漂亮圖檔，要調多少就得斟酌好 |
| text-align:left; | 本文-排成一排：左 |
| margin:0 auto; | 邊、邊空白：0 自動 |
語法範例：
| /* col layout 定義佈局寬度 */ .twocolga .ycnt3col, .twocoldr .ycnt3col {zoom:1; width:950px; text-align:left; margin:0 auto;} |
捲軸設定：
| /* Scroll Bar 捲軸設定 */ html{ScrollBar-TRACK-color: #B4D8B4; ScrollBar-FACE-color: #FFFFFF; ScrollBar-ARROW-color: #FF0000; ScrollBar-HIGHLIGHT-color: #008000; ScrollBar-SHADOW-color: #008000; ScrollBar-3DLIGHT-color: #008000; ScrollBar-DARKSHADOW-color: #008000; ScrollBar-BASE-color: #0000FF; } |
語法說明：可以到 http://cdh.idv.tw/cdh/no04.htm 先試做個捲軸，再把語法貼過來，只不過色彩差太多了。
| html{……} | |
| ScrollBar-TRACK-color:色碼; | 軌道色 |
| ScrollBar-FACE-color:色碼; | 軸面色 |
| ScrollBar-ARROW-color:色碼; | 箭頭色 |
| ScrollBar-HIGHLIGHT-color:色碼; | 軸面及三角左邊框色 |
| ScrollBar-SHADOW-color:色碼; | 軸面及三角右邊框色 |
| ScrollBar-3DLIGHT-color:色碼; | 左立體邊 |
| ScrollBar-DARKSHADOW-color:色碼; | 右立體邊 |
| ScrollBar-BASE-color:色碼; | 整體色（看不出作用） |
語法範例：
| /* Scroll Bar 捲軸設定 */ html{ScrollBar-TRACK-color:#FFFFFF; ScrollBar-FACE-color:#E6EBD5; ScrollBar-ARROW-color:#FF0000; |
滑鼠設定：
| /* Cursor 滑鼠游標＜螢幕上的游標＞*/ body{cursor:url(滑鼠位址)} a:hover {cursor:url(滑鼠位址)} |
語法說明：
body{cursor:url(滑鼠位址)} 是定義在一般顯示之滑鼠游標。
a:hover {cursor:url(滑鼠位址)} 是定義在滑鼠移到連結點所改變顯示之滑鼠游標。這部分見連結樣式教學有比較詳細的說明。
提供幾個滑鼠下載點，您可以從那裡複製到，但是最好是下載到自己的網路空間，以免原主人刪除或設限而失連。
游標網址：http://a.myidk.com/mouse/ 移到編號能預覽
游標網址：http://www.wretch.cc/blog/ashine0118&article_id=6571377 移到前面名稱能預覽
游標網址：http://sheng.phy.nknu.edu.tw/wjs-13ani.htm 點紅心能預覽（只適用於 IE 瀏覽器）
游標網址：http://home.kimo.com.tw/a815182/ani/1_index.htm 已失連。他所提供的語法非用於奇摩部落格，要改為本式。
游標網址：http://home.kimo.com.tw/a815182/ani/2_index.htm 同上之第２頁，已失連
語法範例：
| /* Cursor 滑鼠游標 */ body{cursor:url(http://hk.geocities.com/love99_h/Ani/M005.ani)} a:hover {cursor:url(http://hk.geocities.com/love99_h/Ani/D02.ani)} |
http://tw.myblog.yahoo.com/My-Happy/article?mid=6&prev=7&l=a&fid=7
留言列表
良心農友社 (4)
{{ article.title }}
