這篇主要講解如何樣式日志，這篇不需要 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;。因為所有的值都是一樣的話，只用一個數(shù)字就夠了，對于填充的設(shè)置也是一樣的。
- 保存，刷新 Firefox 和 IE。接下來我們可以增加空白和填充到需要的地方。
第2步：樣式化 H1 標(biāo)題
在 body{} 之后輸入以下代碼：
h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}
- font-family: Georgia, Sans-seriff; 把 H1 標(biāo)題的字體從 Arial 改成 Georgia。如果沒有 Georgia，網(wǎng)頁就會尋找 Sans-serif；
- font-size: 24px; 我們在 body{} 中把字體設(shè)置為 12px，H1 和 H2 標(biāo)簽是不會遵守的。這就是因為標(biāo)簽遵循他們自己的規(guī)則。為了控制他們，我們需要特別的去樣式化它們。
- padding: 0 0 10px 0; 意思是 10 像素的底部填充。這是為了在博客的標(biāo)題和描述之間增加空間。
保存，刷新，結(jié)果如下：
第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 規(guī)則。他是特別樣式化在 class 名為 post 的 DIV 中的 H2 子標(biāo)題。在側(cè)邊欄中的 H2 子標(biāo)題就不受影響。）
.entry{
line-height: 18px;
}
（設(shè)置 entry DIV 中行距。）
第4步：設(shè)置日志段落填充
在 a:hover{} 下面輸入以下代碼：
p{
padding: 10px 0 0 0;
}
（給每個段落標(biāo)簽增加 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步：樣式化導(dǎo)航欄
在 p.postmetadata{} 下輸入：
.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}
對于 Next page 和 Previous page 鏈接外面的的 navigation DIV 標(biāo)簽，我們
- 增加了一個10像素的頂部填充。
- 把字體大小改成14像素。
- 把字體改成粗體。
- 把行高增加到18米。
未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » WordPress主題開發(fā)教程二十一：日志樣式化和其他雜項
