如何创建 WordPress 主题 CSS 样式表

原文：How To Reset & Rebuild WordPress Theme CSS & Define Your Layouts

原文作者：Ian Stewart

译文：如何创建 WordPress 主题 CSS 样式表

译文作者：Young

CSS 可以很复杂，也可以很简单。我开始学习 CSS 的时候，获得很多帮助，所以我也很乐意把经验告诉别人：从代码漂亮的例子中学习。

这里我们将为您布局一个 WordPress 主题 CSS 开发的数据库：

一个使得主题适合所有浏览器的样式表，并且创建一个合理的标准；
另外一个通过巧妙方式更改我们的排版布局的样式表；
一个只适合 WordPress 属性的样式表（保持前面两个样式表的独立性以便以后用于非 WordPress 平台上）；
6 个您能想到的适合所有普通博客和网站布局的流动样式表——并且每个样式表都可调整页面的宽度。

我们这里用到的所有代码都是开源的，符合 GPL 协议，并且都可以在 Your Theme Project 页面看到。您可以随便阅读、复制和粘帖其中任何的文件。

重要的事情先做，先在您的主题根目录下新建一个 “styles”文件夹，那 6 个样式表都会放在这个新文件夹里面，准备好制作那些 CSS 文件了吗？

Reset CSS

这个 Reset CSS 只是在 Eric Meyer 著名的 Reset CSS 基础上稍微做了点修改，它的作用在于使您的主题适合各种浏览器。

它很漂亮，照顾到了每个浏览者的兴趣，让您不必担心读者通过什么浏览器访问您的博客。

它的使用很简单，在 style.css 最顶部的注释下面添加以下代码：

/* Reset default browser styles */
@import url(‘styles/reset.css’);

重新加载你的网页，看看 reset.css 在各种浏览器下的表现（如果您可以的话），效果很奇妙，是吧？

Rebuild CSS

这个 Rebuild CSS 是我根据早期的 BluePrint CSS 样式表发明的，并且在 Thematic 主题里面加以完善了。这个 Rebuild CSS 的作用在于使页面的垂直边距有规律，方便调整。

我这个 Rebuild CSS 的特色是把两种不同的网页样式结合起来，即字体大小用 px，并采用相对行高，而其他的垂直边距（例如段落和列表）则使用 em。

这是什么意思呢？这方便您以后修改字体的大小——不需要做任何计算——其他的排版因素（例如段落和清单）就会自动调整垂直边距。

rebuild.css 的使用也很简单，在 reset.css 导入后添加以下代码：

/* Rebuild default browser styles */
@import url(‘styles/rebuild.css’);

基本的 WordPress 格式

WordPress 里面有我们每次都需要用到的格式，我所做的就是通过一个叫做 wp.css 的文件调用它们。

现在我们需要设定所有图片的排列方式——包括标题和画廊，同时设定引用的格式。您所需要做的只是为 blockquote 标签添加一个左对齐或者右对齐的 Class 属性。

您能猜测我们将如何使用 wp.css 吗？

/* Basic WordPress Styles */
@import url(‘styles/wp.css’);

您需要的所有布局

对您的新主题，我已经采取了坚如磐石的布局，这个布局建立在 Sandbox 主题的基础上并且适合您的新 HTML 结构。一共有 6 种布局，其中每一种布局都是流动的（即宽度可以伸缩到符合您的浏览器窗口大小），并且可以简单地固定布局的宽度。

这些布局的使用都很简单。在导入基本的布局注释语下面直接导入其中一个布局就好了，下面就是导入正文在中间的三栏布局的代码：

/* Import a basic layout */
@import url(‘styles/3c-b.css’);

最简单的固定布局宽度的方法是在 wrapper div 标签里面添加 width 和 margin 属性：

#wrapper {
margin: 0 auto;
width: 960px;
}

额外收获：格式化菜单

作为一种奖励，如果您从未创建一个无序的列表（由 wp_page_menu 自动生成的）并且想让这个列表好看一点，可以参考下面我创建 WordPress 主题时所用的代码：

#access {
margin: 0 0 1.5em 0;
overflow: auto;
}
.skip-link {
display: none;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul ul {
display: none;
}
.menu li {
display: inline;
}
.menu a {
display: block;
float: left;
}

（以上代码插入于 style.css 文件中。——译者注）

很简单，但是毕竟我把您领入门了，祝您好运！