CSS-WordPress啦

CSS

WordPress非常依赖于CSS的表现样式。对WordPress 1.5版本的主题介绍完毕后，用户的页面布局选项激增。如今在WordPress中改变网站外观比以往任何时候都容易，用字段可以更大程度地帮助用户创建自己的主题以及页面布局。

CSS即层叠样式表单。CSS允许用户将样式表现信息（如颜色与布局）与HTML结果分别存放。这样就可以精确控制网站布局，网页加载和更新也更为方便。

本文简要描述了CSS在WordPress中的用法，并列出一些可能用到的引用。CSS自身信息参见 Know Your Sources#CSS。

WordPress与CSS

WordPress主题混合使用模板文件、模板标签以及CSS共同生成WordPress网站外观版式。

模板文件

模板文件是可共同集合创建网站的构造块。在WordPress主题结构中，页眉、侧边条、内容以及页脚都包含在个人信息中。这些版块联合起来打造网页版式。这样用户就可以自定义构造块。例如，在WordPress默认主题下，首页为多文章浏览模式，页面侧边栏上还显示了文章分类、存档、以及搜索栏。点击任何一篇文章都可以进入该文章的全文浏览模式，侧边栏也相应消失。用户可以自行设置在首页上所显示的文章片段，还可以在某一特定分类内的所有页面中显示不同的页眉或侧边栏。除此还有很多其他功能。更多关于模板的介绍请参阅初识WordPress模板。

模板标签

模板标签是这样一群代码，它们可以为存储在WordPress数据库内的信息提供指令和要求。一些模板标签非常容易配置，用户可以通过这些模板标签自定义日期、时间、列表以及其他显示在网页上的元素。要了解更多关于模板标签的信息，请参阅初识WordPress模板标签。

CSS样式表单

CSS样式表单聚合了所有元素。在WordPress网站的的每个模板文件中，模板标签和文本都被XHTML标签和CSS引用所围绕。每个主题的样式表单中都含有该页面结构的命令。如果没有这些指令，网页看上去会非常枯燥。用户可通过指令移动构造块结构，使页眉长度有所扩展，并在其中填充图片或照片，也可以简化并缩短页眉。可以在左右添加空格键，这样网页就像“漂浮”在访问者的屏幕中间一样，同样也可以将网页设置填充整个屏幕。页面上的侧边栏可以在左也可以在右，甚至可以放在页面的正下方。总之，页面版块操作权完全在用户手中。但每个版式的指令都会存放在相应主题文件夹的style.css文件中。

WordPress生成的类

WordPress 2.5引进了一些用以对齐图片和区块元素（DIV, P, TABLE等）的类：aligncenter, alignleft and alignright。此外在没有对其的图片中也添加了alignnone类，以便在必要情况下区别对待。

同样的类用于对齐具有标题的图片（自WordPress 2.6起）。标题必需的三个附加CSS类，以及对齐类、标题类有：

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

每个主题的style.css文件中都应包含以上类似样式，以便正确显示图片和标题。

此外还有一些默认生成的WordPress类标签也可以用作设计样式：

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

其他资料

为了更好地理解CSS如何在网页中运行，请参考阅读下列文章：

模板——WordPress 主题和模板相关文章的详细列表（初学者可以从使用主题开始看起，列表中也包括很多技术性较强的文章）
WordPress进阶使用——WordPress网站设计相关资源列表
WordPress课程——全面的WordPress教程

WordPress版块设计帮助

使用WordPress主题或版式出现问题时，可以访问主题作者的网站，看看主题是否有更新，或者能否找到问题的答案。以下还有一些其他可用资源：

分类：中文手册

首页 > 中文手册 > CSS

CSS