thematic主题框架之子主题style.css详解

如果你还不了解thematic，如果你希望能快速敏捷的进行wordpress主题开发，我们强烈建议你看一下《wordpress主题框架之Thematic介绍 》这篇文章，这篇文章能让你对thematic有个初步的认识。在上一篇文章中我们介绍了《thematic主题框架安装》，这篇文章开始介绍Thematic主题框架的子主题的style.css样式表的介绍。

之所以称之为子主题（Child Theme），是因为子主题不能独立的存在，必须以来Thematic框架而进行开发，这些内容我们在上一篇文章中有过介绍。

现在我们进入到wp-content\themes\thematicsamplechildtheme目录下，在这里有个style.css，这个文件控制了wordpress的样式，所以这个文件也是至关重要的。打开这个文件显示出以下CSS样式：

 

/*为了更容易的理解以下内容的作用,部分文字的背景在本文编辑时加入了颜色
Theme Name:后面的字符就是在wordpress后台看到的主题名称,你可以把这段字符修改为任何你喜欢的东西,例如Theme Name:My Theme,经过这样的修改,在后台显示的主题名称就变成了My Theme
Theme Name: A Thematic Child Theme
Theme URI: 后面的字符应该是一个网址,也就是发布这个主题的网址.这个选项不是必填的
Theme URI:
Description:后面的字符是关于这个主题的描述,也不是必填的.
Description: Use this theme to start your Thematic Child Theme development.
Author: 主题的作者
Author: Ian Stewart
Author URI:主题作者的主页,不过感觉有种脱裤子放屁的感觉和Theme URI有重复的感觉
Author URI: http://themeshaper.com/
Template:这个是关键,这后面的字符决定了我们要调用哪个框架里的内容,这个框架的位置和我们正在开发的主题一定要处于同一级目录,这些东西我们在上一篇文章中讲过,这里的内容不要进行修改,保持现在这样就很完美了
Template: thematic
Version:这个选项只对作者进行更新记录有些用处,如果你想分享你开发的主题,这里还是需要精心的设计的
Version: 1.0
Tags:看样子是个标签,没什么实际的意义
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/
/*以下的内容是引用Thematic的CSS样式表,看看下面的文件名就感觉Thematic提供的CSS很全面也很强大*/
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

 大概看了一下这个styele.css文件我们就能体会到框架的好处及框架开发者的良苦用心。

我们在进行子主题开发时，只需要在这个样式表中设计我们的样式即可，如果在引入的Thematic中已经存在的选择符，我们在这个文件中重新定义一下这个选择符的样式即可。

例如我们想改变文章标题的大小，那么我们可以通过在wp-content\themes\thematicsamplechildtheme/style.css这个文件最下面加入以下代码就可以改变文章标题的样式

/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

.entry-title {
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:bold;
    line-height:26px;
    padding:0 0 7px 0;
}

我们在这个文件的结尾处增加了

.entry-title {
    font-family:Arial,sans-serif;
    font-size:26px;
    font-weight:bold;
    line-height:26px;
    padding:0 0 7px 0;
}

就轻松的控制了文章标题的样式，让我们看看前后的变化

修改前默认的文章标题样式：

 

经过增加样式，修改后的效果：

 

 

如果我们想做一个文章列表，或许可以通过CSS来实现，不过这只是一种思维方式，实际上用函数来实现需要的功能更为可靠

 

 

 

.entry-content,.entry-meta,.entry-utility{
    display:none;
}

我们在style.css中增加了这样的一段代码，刷新wordpress前台可以看出以下变化

未经修改的样式

 

修改后的样式

 

当然，这只是很简单的修改，利用样式表，我们可以做很多工作，有关CSS的知识我们不作为主要内容来介绍，获取这方面的知识。