Avril Note

以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):

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. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定，來控制標題的顏色或圖片。例如：
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */

4. 設定標題文字 (字型、大小與顏色)
透過 #banner .title 中 font-family、font-size 與 color 屬性設定。例如：
#banner .title {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

5. 設定副標題文字 (字型、大小與顏色)
透過 #banner .info 中 font-family、font-size 與 color 屬性設定。例如：
#banner .info {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

6. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定，來控制標題圖片的長與寬。例如：
#banner {
    width: 1000px;
    height: 100px;
}

7. 設定工具列的背景色 / 圖片)
透過 #tool 內的 background 屬性設定，變更選單區塊顏色或圖片。例如：
#tool { background:#000000; } /* 將工具列背景設成黑色 */
#tool { background:url(圖片網址); } /* 將工具列背景設成圖片 */

8. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過#tool li a:hover 內的 background 屬性設定，變更選單區塊滑鼠經過時的顏色或圖片。例如：
#tool li a:hover  { background:#000000; } /* 滑鼠經過時背景變成黑色 */
#tool li a:hover  { background:url(圖片網址); } /* 滑鼠經過時背景變成圖片 */

9. 設定連結文字 (字型、大小與顏色)
更改背景後，連結文字可能因為顏色相近的關係看不太清楚，透過 a 中的 font-family、font-size 與 color  屬性設定變更。例如：
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /*  滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */

10. 設定側欄標題文字 (字型、大小與顏色)
透過 .boxheader 中加入 font-family、font-size 與 color 屬性設定。
例如：
.boxheader {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

11. 設定側欄中非連結文字 (字型、大小與顏色)
透過 #menu .boxBody 中 font-family、font-size 與 color 屬性設定。例如：
#menu .boxBody {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

12. 設定標題文字位置
透過 #banner .title 中 left、top 的屬性設定，可改變標題文字的位置。例如：
#banner .title { position:relative; top:10px;} /* 標題文字由原本的位置開始向下移動10px */

13. 設定選單位置
透過 #tool 中的 left、top 的屬性設定，例如：
#tool { font-size: 15px; } /* 字體大小變成 15px */

14. 設定文章的標題文字 (字型、大小與顏色)
透過 .doc .title 中 font-family、font-size 與 color 屬性設定。例如：
.doc .title {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}