WP主题制作-第12课：帖子格式设置和其他操作-创之梦博客

您今天不需要index.php。打开 Xampp Control， 主题文件夹， Firefox， Internet Explorer和 style.css。

在开始之前，请忘记我显示给您的昨天的屏幕截图。截屏时我打开了小部件插件，这解释了为什么我的侧边栏看上去与您的侧边栏有所不同。另外，在style.css文件中，将所有Sans-serif更改为 Sans-serif。我又犯了一个错误，我倾向于在Sans-serif中添加一个额外的“ F”。

第1步

通过在 style.css的body {}上方键入以下代码来消除大部分边距和填充：

正文，h1，h2，h3，h4，h5，h6，blockquote，p {
margin：0;
填充：0;
}

注意它的 边距：0; 而不是 余量：0 0 0 0; 。当所有值都相同时，请使用一个数字。填充也一样。
保存文件。刷新Firefox和Internet Explorer。不用担心，现在您将在页边距和填充中添加您实际希望它们出现的位置，而不是默认情况下浏览器所需的位置。

顺便说一句，我是要告诉您将此内容放在该内容的下方或上方，但要知道它是可选的。您可以在任何地方键入/放置代码。我做事的方式就是组织方式。

第2步

设置H1标题的样式，在正文下键入以下内容 {}：

h1 {
font-family：Georgia，Sans-serif;
font-size：24px;
填充：0 0 10px 0;
}

字体家族：佐治亚州，Sans-seriff； 将H1头衔从Arial更改为Georgia。如果没有格鲁吉亚，则该网页将查找Sans-serif。
font-size：24px; 是不言自明的。但是，请注意，当您在 body {}中将字体大小设置为 12px时， H1 和 H2 标签不遵循该规则。这是因为标题标签遵循其自己的规则。要控制它们，您需要专门为它们设置样式。
填充：0 0 10px 0; 表示10像素底部填充。用于在博客标题和描述之间添加空格。

保存，刷新，结果如下：

第三步

在#container {}下键入以下代码：（在每个代码块之后保存并刷新，以查看所做的更改。）

.post {
padding：10px 0 10px 0;
}

（您为每个DIV添加了10像素的顶部和底部填充，并带有一个名为post的类。）

.post h2 {
font-family：Georgia，Sans-serif;
font-size：18px;
}

（.post h2不是一般规则。它专门针对post DIV中的H2子标题。补充工具栏中的H2子标题不受影响。）

.entry {
行高：18px;
}

（增加了条目DIV中每行之间的间距。）

第四步

在a：hover {}下输入以下代码：

p {
padding：10px 0 0 0;
}

（每个段落标签的10像素顶部填充。）

第5步

在 .entry {}下输入：

p.postmetadata {
border-top：1px solid #ccc;
边距：10px 0 0 0;
}

还记得您给名为postmetadata的类提供的pargraph标记吗？特定段落标签的样式和DIV的样式几乎相同。您可以将边框，边距，填充和背景都应用到这两者。

对于 postmetadata 段落标记，您为其添加了灰色边框和10像素的上边距。

border-top 表示仅顶部边界。 border-left 表示仅左边界。单独的等 border，不带 -top， -right， -bottom或 -left 表示所有边界。例如， border：1px solid #ccc; 表示所有四个边都有1px的灰色边框。