DIY Wordpress Themes —— Style
样式是一个主题模板最核心的内容，虽然不难，但想成就一款大成的主题模板则并非易事。以下我只介绍如何建立一个最最基本的模板样式，如果你想打造一款炫目的主题模板，需要满足两点——炫目的设计和扎实的 CSS/DIV 技能，如果你不能同时满足以上两点，请跟着我一步步的从最简单的模板开始。
在写样式之前，我们脑子里肯定得有个谱，明确主题的色系、结构等，细节方面可以稍侯再考虑。如果你有能力的话可以先 PS 一套方案出来。
这里我打算建一个健康的，充满绿色的超级简单的无图片 2栏 Wordpress 主题模板。
本地 Wordpress 环境搭建好之后打开主题文件夹目录（以我安装的 XAMPP 为例）：
D:\xampp\htdocs\wp-content\themes
新建一个文件夹，命名为“Grass Root”或其它你喜欢的名称，将之前建好的 index.php 文件放进去，并在“Grass Root”目录下使用 Dreamweaver 新建一个 CSS 文件，并将其命名为 style ，将下面代码拷入刚建好的 style.css 文件中
Theme Name: Grass Root
Theme URI: http://zeuscn.net/
Description: 这是一个2栏绿色健康的超级无敌简单的 Wordpress 主题模板
Version: beta
Author: zEUS.
Author URI: http://zeuscn.net/
*/
以上申明部分很容易理解，就不多说了，根据自己需要进行修改。
现在我们根据之前的定义的模板结构来编写样式：
首先是部分全局的定义：
background:#E7F8D0;
font-family:Verdana,trebuchet ms,helvetica;
font-size:14px;
color:#222;
line-height:1.7em;
word-wrap:break-word;
margin:0;
}
a {
color:#346807;
text-decoration:none;
}
a:hover {
color:#FF3300;
text-decoration:none;
}
p {
margin: 0px 0px 15px;
}
body 就是整个网页默认设置，里面定义了背景色，字体颜色、大小、字体类型等；a 其实就是连接；a:hover 是鼠标移动到链接上的效果；p 是段落。其中各种定义的意思我就不多解释了，看不懂的朋友请参考这本天书，对照着学习。
下面是页眉 header 部分，在这部分里，一般会定义博客的名称、博客描述和导航栏：
height:150px;
width:980px;
background: #67b602;
margin:0 auto;
}
/* 博客名称 */
h1 {
color:#FFF;
text-align:center;
font-weight:800;
margin:0 auto;
height:80px;
line-height:80px;
}
h1 a, h1 a:visited {
color: #FFF;
text-decoration: none;
}
h1 a:hover {
color:#FF3300;
text-decoration: none;
}
/* 描述 */
#description {
text-align:center;
color:#FFF;
height:40px;
line-height:10px;
}
/* 导航栏 */
#nav {
background:#E7F8D0;
float:right;
height:30px;
margin:0;
}
#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
display:block;
}
#nav ul li {
float:left;
font-size:14px;
height:30px;
line-height:30px;
text-align:center;
width:90px;
}
#nav ul li a {
}
#nav ul li a:hover {
background:#67B602;
display:block;
color:#fff;
}
h1 对应博客名称；description 对应描述；nav 对应导航栏，以及这里面的各个导航选项。
我把 content 内容栏，sidebar 侧栏和 footer 页脚都放到 wrapper 这个容器中，以方便整体居中
width:980px;
margin:0 auto; /* 容器居中的写法 */
}
/* 内容栏 */
#content {
width:670px;
float:left;
}
.post {
padding:10px;
clear:both;
}
.post .title {
float:left;
margin-left:10px;
width:100%;
}
.postdata {
font-size:90%;
color:#999999;
float:right;
}
.postdata a, .postdata a:visited {
text-decoration:none;
}
.postdata a:hover {
text-decoration:none;
}
.postdata .category {
padding-left:18px;
float:left;
}
.entry {
padding:5px 0px 5px;
}
/* 侧边栏 */
#sidebar {
float:right;
width:300px;
color:#006600;
margin:0px;
}
#sidebar ul {
margin:10px 0 20px;
list-style:none;
}
/* 页脚 */
#footer {
width:980px;
background:#67b602;
text-align:center;
font-size:12px;
font-weight:bold;
height:30px;
line-height:30px;
float:left;
}
#footer a {
color:#fff;
}
#footer a:hover {
color:#FF3300;
}
将上述代码依次复制到 style.css 文件中并保存，这样，模板的首页就基本完成了，你可以在本地 Wordpress 的后台外观选项里选择这款主题，然后就能在前台看到首页的效果了（截图预览） 
註：Grass Root —— 我一现实中的兄弟去西藏维稳，他说那里是绝对的 Grass Root！
另外，Grass Root 主题的色系和字体参考了 aw’s blog
zEUS.
- 原文链接:
- 转载原创文章请注明:
Name : zEUS.
WP里单一的页面模板，如何绑定一个独立的CSS呢？
非常不错的说 请教个问题 怎么我使用的时候没有效果呢？记得以前没出什么问题的 这次没出来float的效果 可能是什么原因呢
Grass Root ！非常Grass Root ，喜欢你这，这些好教程
最近对这个来了兴趣， 想自己尝试下，
非常棒。。 期待一个完整的系列。
@kok：
@GanGeGe：确实，我想做点成就出来….
@PEST：
@我们在一起：有不清楚的地方请留言
@willerce：在 intro 里，我就有介绍教程了
很不错。
但是如果对一个CSS一点也不懂的人。就有点难了。收集些CSS教程给他们吧。
非常简单明了。学习了。。
我什么也不抢，
看来你是一心都在研究WP模版上了。
抢个沙发。慢慢看。