zh-cn:CSS « WordPress Codex

Languages: English • 日本語 ไทย • 中文(简体) • (Add your language)

CSS样式表给WordPress提供了外观显示，随着WordPress v1.5 主题的推出，你的布局方式已经变得以灵活多样！WordPressWordPress变得比以往更容易改变你的网站的外观，并开辟了更多的空间去帮助创建你自己的主题以及页面布局。

层叠样式表的CSS标准。它允许你储存你的样式表信息（如颜色和布局），这些信息从HTML结构中分离。这样，可以让你更精确地控制网站的布局，并且可以让你的页面更快、更容易地更新。

本文简要介绍了CSS在WordPress的使用，并列出了帮助的资料参考。有关的CSS本身的信息，请看了解你的资源#CSS。

1 WordPress和CSS
2 WordPress生成的类
3 另外，你也可以查看
4 WordPress布局帮助

WordPress和CSS

模板文件、模板标签以及CSS样式表组合起来，共同构成了WordPress网站的外观。

模板文件: 模板文件就像楼房的砖块，他们相互协作构成了你的网站。在WordPress主题结构里，头部、侧栏、内容以及底部都包含在单个文件里面。他们结合起来去创建你的网站。允许你自定义你这个“建筑”的“砖块”。例如，在典型模板里，multi-post在首页、标签归档，以及站内搜索，侧栏都是存在的。点击任何一个文章页，将出现单个文章页面，这时候侧栏不见了。你可以在你网站上去随意组合这些文件，并且分别定义他们，在特殊分类下你可以去做一个不同的头部或者侧栏，或者更多。有关模板的更多介绍，请查看模板进阶。
模板标签: 模板标签是代码的一小部分，他们提供操作和请求信息，这些信息储存在WordPress数据库里。其中一些是高度可配置的，允许你在网站上自定义日期、时间、列表以及其他元素。你可以在模板进阶里面了解有关模板标签的更多信息。
CSS样式表: 这就是它们互相联系的文件。在你网站的每个模板文件里，XHTML标记和CSS参考贯穿了模板标签和内容。样式表是每个主题的页面的标准。没有样式表，你的页面将看起来像一个长长的简单的白板。有了样式表，你可以让你的“砖块”围绕着叠起来，让你的头部变长并且填充图形和照片，或者简单并变窄。你的网页可以漂浮在中间、或者居左、居右，或者布满整个屏幕。你的侧栏可以居左，也可以居右。或者在页面的下方居中位置。想把网页变成什么样子这取决于你。style.css在每个主题文件夹里均存在。

WordPress生成的类

图片对齐以及块元素(DIV, P, TABLE 等)的类，在WordPress 2.5: aligncenter, alignleft 和 alignright。里有介绍。此外，类 alignnone 被添加到未排列的图像，以便它们可以被安排不同的样式。

同样的类被应用到有标题的图片（如WordPress 2.6）对齐图片，3个附加的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 {...}
.children {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.current_page_ancestor {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

另外，你也可以查看

为了帮助您了解CSS是如何关联到网站的更多信息，您不妨去看看以下内容：

模板 -WordPress主题和模板的综合知识列表（使用主题是一个良好的开端，这里有很多比较新的文章列表）
博客的设计和布局 - WordPress网站设计的综合知识列表
WordPress教程 - WordPress各方面的经验

WordPress布局帮助

如果你在WordPress的主题或者布局方面有任何问题，首先请到主题作者的网站去看看是否已经更新了或者其他有关于你疑问的答案，以下有一些资源：

Codex

zh-cn:CSS

Contents

WordPress和CSS

WordPress生成的类

另外，你也可以查看

WordPress布局帮助

Codex Resources