Wrodprss zh-cn:CSS

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

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

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

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{...}