日誌樣式化和其他雜項是從零開始建立 WordPress 主題系列教程的第十二篇,這篇主要講解如何樣式日誌,這篇不需要 index.php,
開啟 Xampp Control,theme 資料夾,Firefox,Internet Explorer 和 style.css 檔案。
第 1 步:Reset CSS
在 style.css 檔案中的 body{} 上面輸入以下程式碼來處理大部分頁邊空白和填充:
body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}
- 這裡我們使用的是 margin: 0; 而不是 margin: 0 0 0 0; 。因為所有的值都是一樣的話,只用一個數字就夠了,對於填充的設定也是一樣的。
- 儲存,重新整理 Firefox 和 IE 。接下來我們可以增加空白和填充到需要的地方。
第 2 步:樣式化 H1 標題
在 body{} 之後輸入以下程式碼:
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
- font-family: Georgia, Sans-seriff; 把 H1 標題的字型從 Arial 改成 Georgia 。如果沒有 Georgia,網頁就會尋找 Sans-serif;
- font-size: 24px; 我們在 body{} 中把字型設定為 12px,H1 和 H2 標籤是不會遵守的。這就是因為標題標籤遵循他們自己的規則。為了控制他們,我們需要特別的去樣式化它們。
- padding: 0 0 10px 0; 意思是 10 畫素的底部填充。這是為了在部落格的標題和描述之間增加空間。
儲存,重新整理,結果如下:

第 3 步:樣式化日誌
在 #container{}下面輸入以下程式碼:(可以在輸入每塊程式碼之後,儲存並重新整理去檢視其中的變化。)
.post{
padding: 10px 0 10px 0;
}
(給每個 class 名字為 post 的 DIV 增加 10 畫素的頂部和底部空白。)
.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}
(.post h2 不是一般的 CSS 規則。他是特別樣式化在 class 名為 post 的 DIV 中的 H2 子標題。在側邊欄中的 H2 子標題就不受影響。)
.entry{
line-height: 18px;
}
(設定 entry DIV 中行距。)
第 4 步:設定日誌段落填充
在 a:hover{} 下輸入以下程式碼:
p{
padding: 10px 0 0 0;
}
(給每個段落標籤增加 10 畫素的頂部填充。)
第 5 步:樣式化日誌雜項
在 .entry{} 下面輸入:
p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}
對於 postmetadata 這個段落便籤,給它增加一個灰色的邊框和 10 畫素頂部空白。
border-top 意思是僅僅頂部邊框 border-left 意思是僅僅左邊邊框,等等。 如果只是單獨的 border,沒有 -top,-right,-bottom 或者 -left 則意味著所有的邊框。如 border: 1px solid #ccc; 意思為所有的四邊都有 1 畫素的灰色的邊框。
第 6 步:樣式化導航欄
在 p.postmetadata{} 下輸入:
.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
對於 Next page 和 Previous page 連結外面的的 navigation DIV 標籤,我們
- 增加了一個 10 畫素的頂部填充。
- 把字型大小改成 14 畫素。
- 把字型改成粗體。
- 把行高增加到 18 畫素。