WP中利用CSS修饰段落

Jun 09

Wordpress, 软硬天师评论 css 央街浪子

wordpress中除了使用blockquote来引用相关文字段落外，对文中其他段落几乎没有什么修饰。有时我们需要让文中的某个段落引起别人的特别主意，只能用strong等文字修饰手段。其实，通过少量修改模板的style sheet文件，就可以达到段落修饰的效果。（此想法来源于浏览[name]yskin, http://www.yskin.net[/name]的博客时,看到一篇文章末尾的文本块修饰，并参照了相关的css代码）

开始之前多罗嗦一句，少量的修饰可以起到画龙点睛和强调重点的作用，但如果满篇都是如此，不免主次不分，而且令人生厌。（本篇为了演示用了大量的修饰文本块，不在此列哈）

好啦让我们开始吧, 打开模板编辑style sheet，找到p { } (段落css定义)，可以看见缺省的p定义，只定义了边距等属性，下面是我模板的缺省定义：

p {
padding: 0px 0px 15px;
margin: 0px;
}

为段落css定义p增加4个class，其中:

backgroup属性定义了段落背景色并加上修饰图标
border属性定义了段落边框颜色(颜色略深与背景色)
border-top属性定义了上边框的线宽，给人一种title bar的感觉
margin属性定义了段落外部边距，因为我希望做一种紧挨着的问答形式的文本段落，所以question的底部边距是0，answer的上部边距也是0
padding属性定义了内部边距，你不希望文字在边框内部是顶天立地撑满的样子吧

p.info {
background: #CFEBF7 url(’images/information.gif’) 8px 6px no-repeat;
border: 1px solid #2580B2;
border-top: 4px solid #2580B2;
margin: 10px auto;
padding: 7px 10px 5px 32px;
}

p.alert {
background: #FFF6BF url(’images/exclamation.gif’) 8px 8px no-repeat;
border: 1px solid #FFD324;
border-top: 4px solid #FFD324;
text-align: left;
margin: 10px auto;
padding: 7px 10px 5px 32px;
}

p.answer {
background: #CFEBF7 url(’images/answer.gif’) 8px 6px no-repeat;
border: 1px solid #2580B2;
border-top: 4px solid #2580B2;
margin-top: 0px;
margin-bottom: 10px;
padding: 7px 10px 5px 32px;
}

p.question {
background: #FFF6BF url(’images/question.gif’) 8px 8px no-repeat;
border: 1px solid #FFD324;
border-top: 4px solid #FFD324;
text-align: left;
margin-bottom: 0px;
margin-top: 10px;
padding: 7px 10px 5px 32px;
}

好啦，就这么简单的完成了，最后记住将图标上传到theme相关的images目录，以保证图标能够正确显示。使用新定义的样式的方法也很简单，在wordpress后台post-writer中编辑文章，切换到code状态，找到需要修饰的段落
在段落前加上<p class=”classname”> 在段落后加上</p> 这里的classname就是前面定义的info,alert,question,answer以显示出不同的修饰。如果嫌添加段落标记p麻烦的话，可以把class定义在blockquote层面，如blockquote.info,blockquote.alert等等。

SPAN 和 DIV 的区别是什么？(class=question)

DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。(class=answer)

SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。(blockquote)

SPAN用法，用于分类发布评论，并使之显示在一行内陈列标签，或者

SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。(class=info)

DIV被用来在HTML文件中建立逻辑部分。但与SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。(class=alert)

1条评论 to “WP中利用CSS修饰段落”

lxltop

发帖时间: 2007-06-10
22:22

这个不错，但是要换一个模版的话又得加CSS了，有空试试。

随便说说SBTalk