wordpress 主题一步步制作教程!第21课 日志样式化和其他杂项(图解)

这篇不需要 index.php。

打开Xampp Controltheme 文件夹FirefoxInternet Explorerstyle.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{} 中把字体设置为 12pxH1H2 标签是不会遵守的。这就是因为题目标签遵循他们自己的规则。为了控制他们,你需要特别的去样式化它们。
  • padding: 0 0 10px 0; 意思是 10 像素的底部填充。这是为了在你博客的标题和描述之间增加空间。

保存,刷新,结果如下:

h1-styled.gif

第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 pagePrevious page 链接外面的的 navigation DIV 标签,你

  • 增加了一个10像素的顶部填充。
  • 把字体大小改成14像素。
  • 把字体改成粗体。
  • 把行高增加到18像素。

这篇到此为止。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/29/wp-theme-lesson-12-post-formatting-and-miscellaneous/

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

相关推荐

wordpress 主题一步步制作教程!第八课 日志元数据(图解)

这一篇我们开始解决日志的元数据(Postmetadata):日期(date),分类(categories),作者(author),评论数(number of comments),以及其他隶属于日志的杂项信息。

我们现在在教程 5C,你可能已经注意到我将会把教程归纳成更大块(更少的步骤)。在开始之前,请打开 Xampp,主题文件夹,浏览器以及 index.php 文件。

wordpress 主题一步步制作教程!第13课 存档和链接列表(图解)

这篇课程将比较轻松。你将学到如何调用存档链接列表和 blogroll 链接列表,下一篇将是日历和搜索框。

在开始之前,我想解释下为什么我把我的课程分成比较小的节。你所学的一切都需要几个月时间来消化!所以当我第一次向你展示的时候,你能够理解所有的东西是非常重要的,这样你就不用会去重新学习。

wordpress 主题一步步制作教程!第18课 Style.css和CSS介绍(图解)

学习 CSS 最好的方法就是去用它,不像 XHTML 和 PHP,你不需要接触模板的核心文件,你同样不要需要理解任何基本概念,只要去用它。试用和错误是你前进的方法。

在我们开始之前,你应该已经有些内容在你的 style.css 文件了。让我们现在找出这部分信息是干什么的?

微信扫一扫,分享到朋友圈

wordpress 主题一步步制作教程!第21课 日志样式化和其他杂项(图解)