WP Theme 教程 #12：日志样式化和其他杂项

June 29th, 2007 Denis

这篇不需要 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 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。

作者：Denis
原文链接：WP Theme 教程 #12：日志样式化和其他杂项

标签：主题 教程 日志

分享到 Twitter 收藏到 Delicious 分享到 Google Reader 分享到 FriendFeed