WP主题教程#12:格式化日志及其他(Post Formatting and Miscellaneous)

今天不需要index.php文件,打开Xampp控制台主题文件夹Firefox浏览器、IE浏览器和style.css文件。

第一步

style.css文件中的body{}上面输入下面的代码来去掉大部分的外边距(margins)和内边距(paddings):

body,h1,h2,h3,h4,h5,h6,blockquote,p{
        margin:0;
        padding:0;
}
  • 注意到上面代码中的margin:0;而不是margin:0 0 0 0;了吧,如果你的四个值都相同,就可以只写一个上去就行了,同样对padding也适用。
  • 保存文件,然后刷新Firefox和IE。别担心,你将会在需要的地方加上外边距(margins)和内边距(paddings)而不是浏览器默认要加的地方。

顺便说一下,一会我会让你把代码放在这里或者那里,但是你要知道那些都是可选的,你可以把你的代码放在style.css文件里的任何地方,我告诉你的只是我组织代码的方式。

第二步

H1标题添加样式,在body{}下面输入下面的代码:

h1{
       font-family:Georgia,Sans-ferif;
       font-size:24px;
       padding:0 0 10px 0;
}
  • font-family:Georgia,Sans-serif;将H1标题的字体由Arial改为Georgia,如果没有Georgia字体,网页就会找Sans-serif字体来替代。
  • font-size:24px;意思很明显,但是值得注意的是,你已经在body{}设置了字体大小为12px,但是H1H2标签不会遵守这个规则,因为标题标签只遵守它们自己的规则,如果想控制它们的显示方式,你需要单独给它们添加样式。
  • padding:0 0 10px 0;的意思是距底部有10像素的内边距,这是为了在你博客的标题和描述之间增加一些间距。

保存文件然后刷新页面,下面是显示效果:

第三步

将下面的代码输入到#container{}的下面:

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

(你给每个class等于post的DIV加了10像素的距顶部的外边距和10像素的距底部的外边距)

.post h2{
      font-family:Georgia,Sans-serif;
      font-size:18px;
}

(.post h2并不是一个通用规则,它只对class等于post的DIV中的H2子标题起作用,Sidebar里的H2子标题并不会受到影响。)

.entry{
       line-height:18px;
}

(增加entry DIV里的行高。)

第四步

a:hover{}下面输入下面的代码:

p{
      padding:10px 0 0 0;
}

(给每个段落加上10像素的距顶部的内边距。)

第五步

.entry{}下面输入下面代码:

p.postmetadata{
       border-top:1px solid #ccc;
       margin:10px 0 0 0;
}

还记得那个class等于postmetadata的段落标签吗?样式化一个特殊的段落标签和样式化DIV是很相近的,你可以给它们俩添加border、margin、padding和background等属性。

对于postmetadata段落标签,你给它加了一个灰色的边框和一个距顶部10像素的外边距。

border-top是只有顶部边框,border-left是只有左边框,等等。不加-top-right-bottom-left,仅有border表示有所有的边框。例如border:1px solid #ccc;表示四个边都有1像素的灰色边框。

第六步

p.postmetadata{}下面输入下面的代码:

.navigation{
       padding:10px 0 0 0;
       font-size:14px;
       font-weight:bold;
       line-height:18px;
}

对于包裹在下一页前一页链接两边的navigation DIV,你刚刚做了如下的事情:

  • 加了一个10像素的距顶部的内边距
  • 将它的字体大小改为14px
  • 将它的字体粗细改为加粗
  • 将它的行高改为18px

今天的教程就这么多了。

返回WordPress主题系列教程的开始