大家好,简单的入门教程又来了。建议你在看这篇文章之前先看看《修改wordpress主题的建议(入门级)#1》。
好了,继续上一篇文章,我们现在来看看style.css里的内容,仍然是以我的主题InSence举例,在style.css搜索PostHead后我们得到以下内容:
.PostHead { position: relative; clear: left; margin-left: 40px; }
.PostHead h1 { font-size: 18px; line-height: 1.7em; letter-spacing: -1px; font-weight: normal; padding: 0px; margin: 0px; display: block; color: #cc6600;}
.PostHead h1 a { color: #0066cc; text-decoration: none;}
.PostHead h1 a:visited { color: #0066cc; text-decoration: none;}
.PostHead h1 a:hover { color: #ff9900; text-decoration: none;}
我们可以清晰看出这个class中定义了子选择器h1与h1 a。
h1是指标题(一级标题),而h1 a 则是指标题中的锚样式。
a:visited是指锚被点击之后的样式,a:hover是指当鼠标移到锚上面时的样式,
当然,还有 a:link与 a:active这2个,a:active是指鼠标点击锚并且未放开时的样式。但是这2个属性很少被用到。
ps:无论你使用这4个中任何2个以上,都要注意它们的先后顺序是a:link->a:visited->a:hover->a:active,这样才能保证链接样式的正确表示。简单的记忆方法则是LVoe-HAte。
明确了这些之后,我们就可以更有目的性的修改标题了。
首先我们从.PostHead h1 这个入手,我们一般会需要修改font-size与line-height,color。这是因为英文主题应用了英语的字体,西方字体的大小习惯也与中文有区别。
font-size的含义很好理解,line-height则是指“行高”,例子中的1.7em是指行高是标题字体大小的1.7倍高。而你也可以使用像素单位px来指定值,一般我们建议行高是字体大小的1.2-1.7倍。
接下来我们修改锚(链接)的部分,即.PostHead h1 a与.PostHead h1 a:visited ,.PostHead h1 a:hover(你的主题里或许不止这3个)。
“.PostHead h1 a{} “可以修改链接的正常样式,就是没有任何动作时的样式。
“.PostHead h1 a:hover{}”可以修改鼠标focus时的样式,一般人都会选择改变颜色(color)与下划线(text-decoration)来显示这个一个链接。
“.PostHead h1 a:visited{}”可以修改访问后的样式,比较流行的做法是用一种跟链接正常模式很接近的颜色来显示访问后的样子。(你记得以前的网页吗,点击过后留下很多紫色的文字,很难看)。
默认情况下链接 a的text-decoration属性是有下划线的。如果你想去掉下划线,你可以增加text-decoration:none;。
除了标题之外,还有正文文字,边栏的标题文字,边栏的文字,只要是存在文字的方法。你都可以按照我说的方法进行修改。如果你看到一个CSS属性或者html代码不懂了,你不仿上google或百度一下。在这里我也推荐一个这方面的网站给你,梦之都。
ok,关于文字的部分就说到这里了,希望这些文字有人会需要,也可以从中学到一星半点知识。下一篇我会说说关于修改sidebar边栏的入门教程。
本文为原创,只发表与本人博客www.edirun.com。转载请与本人联系。
2 Responses
sofish
16|Nov|2007 1看起来挺高深的…可以看一下wpdesigner.com的一本how to code a wordpress theme…
漫步
16|Nov|2007 2哈,这教程不错,配合 css 手册可以理解得更深刻一些。。
Leave a reply