【轉載自我愛水煮魚】

這篇不需要 index.php。

打開Xampp Control，theme 文件夾，Firefox，Internet Explorer 和 style.css 文件。

第1步：

在 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 規則。他是特別樣式化在 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;
}

還記得你賦給它 class 名字為 postmetadata 的段落標簽呢？樣式化一個特定的段落標簽和樣式化 DIV 是非常相同的。你可以同時給兩者應用邊框，框外空白，填充和背景。

對于 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像素。

這篇到此為止。

下一篇：WP Theme 教程 #13：樣式化側邊欄

請查看教程目錄：WordPress 主題教程系列

翻譯自：WP Theme Lesson #12: Post Formatting and Miscellaneous

創建 WordPress 主題系列教程均為本站翻譯，如要轉載，請注明：轉載自我愛水煮魚和本文地址。