编辑“WordPress与CSS”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress网站开发须知|上一页]] | 
{{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
WordPress非常依赖于[[CSS]]的表现样式。对WordPress 1.5版本的主题介绍完毕后，用户的页面布局选项激增。如今在WordPress中改变网站外观比以往任何时候都容易，用字段可以更大程度地帮助用户[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91.html 创建自己的主题]以及页面布局。

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

本文简要描述了CSS在WordPress中的用法，并列出一些可能用到的引用。CSS自身信息参见[http://codex.wordpress.org/Know_Your_Sources#CSS Know Your Sources#CSS]。

==WordPress与CSS==
WordPress主题混合使用[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模板文件]、模板[[标签]]以及CSS共同生成WordPress网站外观版式。
===模板文件===
模板文件是可共同集合创建网站的构造块。在WordPress主题结构中，页眉、侧边条、内容以及页脚都包含在个人信息中。这些版块联合起来打造网页版式。这样用户就可以自定义构造块。例如，在WordPress默认主题下，首页为多文章浏览模式，页面侧边栏上还显示了文章分类、[http://www.wordpress.la/codex-%E5%88%9B%E5%BB%BAWordPress%E5%AD%98%E6%A1%A3%E7%B4%A2%E5%BC%95.html 存档]、以及[http://www.wordpress.la/codex-%E5%88%9B%E5%BB%BA%E6%90%9C%E7%B4%A2%E9%A1%B5%E9%9D%A2.html 搜索]栏。点击任何一篇文章都可以进入该文章的全文浏览模式，侧边栏也相应消失。用户可以自行设置在首页上所显示的[http://codex.wordpress.org/The_Loop_in_Action 文章片段]，还可以在某一特定分类内的所有页面中显示不同的页眉或侧边栏。除此还有很多其他功能。更多关于模板的介绍请参阅[http://www.wordpress.la/codex-%E5%88%9D%E8%AF%86WordPress%E6%A8%A1%E6%9D%BF.html 初识WordPress模板]。

===模板标签===
模板标签是这样一群代码，它们可以为存储在WordPress数据库内的信息提供指令和要求。一些模板标签非常容易配置，用户可以通过这些模板标签自定义日期、时间、列表以及其他显示在网页上的元素。要了解更多关于模板标签的信息，请参阅<STRONG>[http://www.wordpress.la/codex-%E5%88%9D%E8%AF%86%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE.html 初识WordPress模板标签]</STRONG>。

===CSS样式表单===
CSS样式表单聚合了所有元素。在WordPress网站的的每个模板文件中，模板标签和文本都被[http://codex.wordpress.org/Site_Architecture_1.5 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如何在网页中运行，请参考阅读下列文章：
*[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模板]——WordPress   主题和模板相关文章的详细列表（初学者可以从使用主题开始看起，列表中也包括很多技术性较强的文章）   
*[http://www.wordpress.la/codex-WordPress%E4%BD%BF%E7%94%A8.html#advanced WordPress进阶使用]——WordPress网站设计相关资源列表     
*[http://www.wordpress.la/codex-WordPress使用.html WordPress课程]——全面的WordPress教程 
==WordPress版块设计帮助==
使用WordPress主题或版式出现问题时，可以访问主题作者的网站，看看主题是否有更新，或者能否找到问题的答案。以下还有一些其他可用资源：
*[http://www.wordpress.la/codex-WordPress%E4%BD%BF%E7%94%A8.html#advanced WordPress进阶使用]
*[http://www.wordpress.la/codex-CSS%E7%96%91%E9%9A%BE%E8%A7%A3%E7%AD%94.html CSS之疑难解答]
*[http://www.wordpress.la/codex-%E6%9F%A5%E6%89%BECSS%E6%A0%B7%E5%BC%8F.html 查找CSS样式]
*[http://www.wordpress.la/codex-CSS%E4%B9%8B%E4%BF%AE%E5%A4%8D%E6%B5%8F%E8%A7%88%E5%99%A8%E6%BC%8F%E6%B4%9E.html CSS之修复浏览器漏洞]
*[http://www.wordpress.la/codex-WordPress%E7%BD%91%E7%AB%99%E9%AA%8C%E8%AF%81.html WordPress网站验证]
*[http://www.wordpress.la/codex-WordPress%E5%B8%83%E5%B1%80%E5%92%8C%E8%AE%BE%E8%AE%A1FAQ.html 布局和设计FAQ]
*[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模板]
*[http://www.wordpress.org/support/ WordPress Support Forums]
*[http://www.tamba2.org.uk/wordpress/graphicalcss/ WordPress CSS Guides by   Podz]
*[http://www.wordpress.la/codex-CSS%E9%80%9F%E8%AE%B0.html CSS速记]
*[http://www.wordpress.la/codex-%E4%BB%8EHTML%20%E5%88%B0XHTML.html 从HTML到XHTML]

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|W]]
[[category:WordPress网站开发|W]]