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

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

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

 

 
  1. /*为了更容易的理解以下内容的作用,部分文字的背景在本文编辑时加入了颜色
  2. Theme Name:后面的字符就是在wordpress后台看到的主题名称,你可以把这段字符修改为任何你喜欢的东西,例如Theme Name:My Theme,经过这样的修改,在后台显示的主题名称就变成了My Theme     
  3. Theme Name: A Thematic Child Theme  
  4. Theme URI: 后面的字符应该是一个网址,也就是发布这个主题的网址.这个选项不是必填的
  5. Theme URI:    
  6. Description:后面的字符是关于这个主题的描述,也不是必填的.
  7. Description: Use this theme to start your Thematic Child Theme development. 
  8. Author: 主题的作者 
  9. Author: Ian Stewart
  10. Author URI:主题作者的主页,不过感觉有种***子放屁的感觉和Theme URI有重复的感觉
  11. Author URI: http://themeshaper.com/
  12. Template:这个是关键,这后面的字符决定了我们要调用哪个框架里的内容,这个框架的位置和我们正在开发的主题一定要处于同一级目录,这些东西我们在上一篇文章中讲过,这里的内容不要进行修改,保持现在这样就很完美了  
  13. Template: thematic
  14. Version:这个选项只对作者进行更新记录有些用处,如果你想分享你开发的主题,这里还是需要精心的设计的  
  15. Version: 1.0
  16. Tags:看样子是个标签,没什么实际的意义  
  17. Tags: Thematic  
  18. .  
  19. Thematic is © Ian Stewart http://themeshaper.com/  
  20. .  
  21. */ 
  22. /*以下的内容是引用Thematic的CSS样式表,看看下面的文件名就感觉Thematic提供的CSS很全面也很强大*/
  23. /* Reset browser defaults */ 
  24. @import url('../thematic/library/styles/reset.css');  
  25.  
  26. /* Apply basic typography styles */ 
  27. @import url('../thematic/library/styles/typography.css');  
  28.  
  29. /* Apply a basic layout */ 
  30. @import url('../thematic/library/layouts/2c-r-fixed.css');  
  31.  
  32. /* Apply basic p_w_picpath styles */ 
  33. @import url('../thematic/library/styles/p_w_picpaths.css');  
  34.  
  35. /* Apply default theme styles and colors */ 
  36. /* 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 */ 
  37. @import url('../thematic/library/styles/default.css');  
  38.  
  39. /* Prepare theme for plugins */ 
  40. @import url('../thematic/library/styles/plugins.css');  
 
 大概看了一下这个styele.css文件我们就能体会到框架的好处及框架开发者的良苦用心。
 
我们在进行子主题开发时，只需要在这个样式表中设计我们的样式即可，如果在引入的Thematic中已经存在的选择符，我们在这个文件中重新定义一下这个选择符的样式即可。
 
例如我们想改变文章标题的大小，那么我们可以通过在wp-content\themes\thematicsamplechildtheme/style.css这个文件最下面加入以下代码就可以改变文章标题的样式
 
 
  1. /*     
  2. Theme Name: A Thematic Child Theme  
  3. Theme URI:   
  4. Description: Use this theme to start your Thematic Child Theme development.  
  5. Author: Ian Stewart  
  6. Author URI: http://themeshaper.com/  
  7. Template: thematic  
  8. Version: 1.0  
  9. Tags: Thematic  
  10. .  
  11. Thematic is © Ian Stewart http://themeshaper.com/  
  12. .  
  13. */ 
  14.  
  15. /* Reset browser defaults */ 
  16. @import url('../thematic/library/styles/reset.css');  
  17.  
  18. /* Apply basic typography styles */ 
  19. @import url('../thematic/library/styles/typography.css');  
  20.  
  21. /* Apply a basic layout */ 
  22. @import url('../thematic/library/layouts/2c-r-fixed.css');  
  23.  
  24. /* Apply basic p_w_picpath styles */ 
  25. @import url('../thematic/library/styles/p_w_picpaths.css');  
  26.  
  27. /* Apply default theme styles and colors */ 
  28. /* 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 */ 
  29. @import url('../thematic/library/styles/default.css');  
  30.  
  31. /* Prepare theme for plugins */ 
  32. @import url('../thematic/library/styles/plugins.css');  
  33.  
  34. .entry-title {  
  35.     font-family:Arial,sans-serif;  
  36.     font-size:10px;  
  37.     font-weight:bold;  
  38.     line-height:26px;  
  39.     padding:0 0 7px 0;  
  40. } 
 
我们在这个文件的结尾处增加了
 
 
  1. .entry-title {  
  2.     font-family:Arial,sans-serif;  
  3.     font-size:26px;  
  4.     font-weight:bold;  
  5.     line-height:26px;  
  6.     padding:0 0 7px 0;  
  7. } 
 
就轻松的控制了文章标题的样式，让我们看看前后的变化
 
修改前默认的文章标题样式：
 
 
 
 
经过增加样式，修改后的效果：
 
 
 
 
 
如果我们想做一个文章列表，或许可以通过CSS来实现，不过这只是一种思维方式，实际上用函数来实现需要的功能更为可靠
 
 
 
 
 
 
 
 
  1. .entry-content,.entry-meta,.entry-utility{  
  2.     display:none;  
  3. }  
 
我们在style.css中增加了这样的一段代码，刷新wordpress前台可以看出以下变化
 
未经修改的样式
 
 
 
 
修改后的样式
 
 
 
 
当然，这只是很简单的修改，利用样式表，我们可以做很多工作，有关CSS的知识我们不作为主要内容来介绍，获取这方面的知识。