E-mail Comment Del.icio.us Digg Reddit Technorati Furl

Style.css 和 CSS 介绍

三 10, 2010 | wordpress 主题 | Tags: , ,

         在我们开始之前，你应该已经有些内容在你的 style.css 文件了。让我们现在找出这部分信息是干什么的？

  • 第一行显而易见就是主题的名字。
  • 第二行是这个主题的地址，如果你的主题只是私用的而不准备发布的话，那就不用考虑它。
  • 第三行是主题的描述。
  • 第四行是版本号，这是非常重要的，特别是当你公开发布你主题新版本的时候。
  • 第五和第六行分别是你的名字和主页。

         在主题信息两边的 /* 和 */ 符号是为了阻止主题的信息影响该文件的其他内容。这是 CSS 的注释。当输入 CSS 代码去样式化您的网页的时候，您可能想在这里增加些注释使得能够往后追踪代码。但是您并不想您的注释影响您的代码，所以你使用 /* 和 */ 这一对符号使得你的注释无形。
第一步
• 打开 Xampp，主题文件夹，FireFox，IE 浏览器和 style.css 文件。
• 在两个浏览器的地址栏都输入：http://localhost/wordpress
从这里开始，您需要同时在 FireFox 和 IE 上测试你的主题，不同的浏览器对 CSS 的代码解释是不同的。如果能够在尽可能多的浏览器器上和尽可能多的操作系统上测试你的主题是最好的（Safari，Opera，Linux，Netscape等等）。如果您和我一样懒，那就只在 FireFox 和 IE 上测试您的主题吧。
（注释：编辑这些 php 文件时最好用 php 编辑器（比如 Notepad++PHP 编辑软件），这也是为了防止在编辑后产生乱码无法使用。）

第二步
在 style.css 文件中输入以下代码：
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}
像 XHTML 和 PHP 一样，通过制表符增加缩进来组织代码。

看过这篇文章的读者还看过:

留下您的脚印