以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):
1. 設定網誌背景 (圖片與顏色)
透過 body 內的 background 屬性設定，例如：
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */
2. 設定網誌文字 (字型、大小與顏色)
透過 body 內的 font-family、font-size 與 color 屬性設定。例如：
body {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
3. 設定網誌位置 (置左、置中、置右)
透過 body 內的 text-align 屬性設定置左(left)、置中(center)、置右(right)。例如：
body { text-align: left;} /* 網頁置左 */
4. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定，來控制標題的顏色或圖片。例如：
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */
5. 設定標題文字 (字型、大小與顏色)
透過 #bannerTitle 中 font-family、font-size 與 color 屬性設定。例如：
#bannerTitle {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
6. 設定副標題文字 (字型、大小與顏色)
透過 #bannerNote 中 font-family、font-size 與 color 屬性設定。例如：
#bannerNote {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
7. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定，來控制標題圖片的長與寬。例如：
#banner {
width: 1000px;
height: 100px;
}
8. 設定選單區塊圖片 (顏色、圖片)
透過 .navi 內的 background 屬性設定，變更選單區塊顏色或圖片。例如：
.navi { background:#000000; } /* 將連結圖設成黑色 */
.navi { background:url(圖片網址); } /* 將圖片網址設成連結圖 */
9. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過 .naviOver 內的 background 屬性設定，變更選單區塊滑鼠經過時的顏色或圖片。例如：
.naviOver { background:#000000; } /* 將連結圖設成黑色 */
.naviOver { background:url(圖片網址); } /* 將圖片網址設成連結圖 */
10. 設定連結文字 (字型、大小與顏色)
更改背景後，連結文字可能因為顏色相近的關係看不太清楚，透過 a 中的 font-family、font-size 與 color 屬性設定變更。例如：
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /* 滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */
11. 設定側欄標題文字 (字型、大小與顏色)
透過 .menuBlockTitle 中加入 font-family、font-size 與 color 屬性設定。
例如：
.menuBlockTitle {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
12. 設定側欄中非連結文字 (字型、大小與顏色)
透過 .menuBlockBody 中 font-family、font-size 與 color 屬性設定。例如：
.menuBlockBody {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
13. 設定 logo 位置
透過 #bannerTitle 中 left、top 的屬性設定，可改變上標題 logo 的位置。例如：
#bannerTitle { left:10px; top:10px; } /* 左上各平移10px */
14. 設定選單位置
透過 #navi 中的 left、top 的屬性設定，例如：
#navi { left:10px; top:10px; } /* 左上各平移10px */
15. 設定文章的標題文字 (字型、大小與顏色)
透過 .Subject 中 font-family、font-size 與 color 屬性設定。例如：
.Subject {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
指定背景顏色
Tag: background-color
範例：
body { background-color: #000000 ;} /* 將背景設成黑色 */
指定背景圖片
Tag: background-image
範例：
body { background-color: url(圖片路徑) } /* 將圖片路徑設為背景 */
指定背景水平或垂直方向以重複的方式填滿
Tag: background-repeat設定值：皆填滿 repeat (預設)、水平填滿 repeat-x 、垂直填滿 repeat-y 與不填滿 no-repeat。範例：
body {
background-repeat: repeat-x; /* 將背景作水平方向重複 */
background-image:url(圖片路徑); /* 將圖片路徑設為背景 */
}
設定背景固定或移動
Tag: background-attachment設定值：網頁捲動時背景跟著移動 scroll (預設)、背景不隨捲軸移動 fixed。範例：
body {
background-attachment: fixed; /* 讓背景不隨捲軸移動 */
background-image:url(圖片路徑); /* 將圖片路徑設成背景 */
}
設定背景位置
Tag: background-attachment
設定值：左上方 left top (預設)、上 top 、中 center 、下 bottom 、左 left 、右 right。範例：body { background-position: top right; } /* 背景固定在右上角 */
設定文字字體
Tag: font-family範例：body { font-family:arial; } /* 字型設為arial */
設定文字大小
Tag: font-size
body { font-size:15px; } /* 文字大小設為15px */
設定文字粗細
Tag: font-weight
設定值：從100到900，也可設定為厚 bold 、較厚 bolder 、及正常 normal
範例：body { font-weight:bold; } /* 字體設為粗體 */
設定字體是否為斜體字
Tag: font-style
設定值：斜體 italic
範例：body { font-style:italic; } /* 字體設為斜體 */
設定文字顏色
Tag: font-weight
範例：body { color:#ff0000; } /* 文字設為紅色 */
設定邊框留白Tag: padding (上留白值 右留白值 下留白值 左留白值)
留白設定是在內容外，邊框內的部分，善用留白可讓文章的排版不會與邊框太過接近，較為清潔與美觀，對應區塊的四個方向可以個別設定外，也可同時作設定，範例：
div { padding: 5px 10px 5px 10px; }
/* 上邊框留白5px、右邊框留白10px、下邊框留白5px、左邊框10px */
div { padding: 5px; }
/* 四邊皆留白5px */
div { padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:10px; }
/* 上邊框留白5px、右邊框留白10px、下邊框留白5px、左邊框10px */
