WordPress 主题制作系列教程#8：Style.css 与CSS 简介
WordPress 主题制作系列教程#8：Style.css 与CSS 简介
原文地址：http://www.wpdesigner.com/2007/03/09/wp-theme-lesson-9-stylecss-and-css-intro/
翻译:票友山
要学习CSS ，你就得沉浸其中。和XHTML 和PHP并不相同，你不用改动你模板中的核心代码，你也不用去了解任何的基础概念，你要做的就是浸淫其中，尝试然后排错。
在我们开始之前，其实style.css 文件中已经有一些东西了。让我先来看看已经有的代码的意义。
- 第一行是主题的名称，是主题的自我介绍。
- 第二行是主题的地址，如果你给仅仅是创建一个主题自用，不用去管它。
- 第三行是对主题的描述。
- 第四行是版本号，这一行很重要，尤其是当你的主题是提供给大众使用，而又要更新的时候。
- 第五行和第六行分别是你的名字和主页。
/* 和*/ 标志之间围住的内容是你主题的信息，这样围住可以防止它们影响到其他部分。这两个标志是在CSS 起注释的作用。当你在写CSS 代码的时候，你可能想要加一些注释，以便可以注意到每段代码。但是如果你不想你的注释影响到代码你就应该加上/* 和*/ 标志，让你的注释变成不可见的。
这里是处理过的主题信息：
步骤 1:
- 打开Xampp 控制，主题文件夹，Firefox 浏览器，一个Internet Exploer 浏览器，再用记事本打开style.css 。
- 将两个浏览器都转向http://localhost/wordpress
在这，我们的确是需要两个浏览器，Firefox 和Internet Explorer来测试我们的主题。不同的系统对CSS 代码的解释是不同的。最好你能在尽可能多的操作系统下用尽可能多的浏览器来测试（Safari，Opera， Linux， Netscape， 等等）。 如何你和我一样懒，那就只用Firefox 和Internet Explorer 来测试吧。
（注意：这一课你无须用记事本打开index.php 。如果你不会用记事本打开 style.css ，请右击你的文件，选择属性，点击改变，并选择记事本。）
步骤 2：
在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中一样，使用Tab 键缩进：
保存style.css 文件，刷新Firefox 和Internet Explorer 来看看改变。（从现在开始，你要同时在两浏览器下工作。）
把body{ } 看作一个标签，把它们之间的所有代码看做属性和属性的值，就像你处理XHTML 时一样。{ 代表开启， } 代表结束，在{ 和}之间，冒号表示开始 而分号表示结束。（我使用了标签，属性，和属性这些措辞，是为了和XHTML ，PHP 比较，易于理解。事实上，PHP 和CSS 的措辞是不一样的，比如说：参数，选择符还有属性。）
在我们继续之前，解释一下我们为什么使用body{ } （CSS 选择符），那是因为你正在处理一个页面最基础的部分（或者说全局），也就是<body> 标签。没有去为<header> 标签设置风格那是因为那个部分没有什么号设置的。在页面上显示的部分都在<body> 和</body> 之间。
然后，以后，你还是将为名为header 的DIV 设置风格。
进一步的说明：
margin: 0; 消除body 标签中默认的空白间隙，如果你想换一个更大的间隙，你可以将0 改为10px ，20px ，或者其他值，PX 代表像素，每个像素就是你屏幕上的一个点，当你把间隙设置为0 的时候，无需加上ps 这个单位。
在下图中，使用红色标记的区域是body 标签默认留出的间隙。
蛇之王margin: 0; 之后，下图显示的内容是没有间隙的：
font-family: Arial, Helvetica, Georgia, Sans-serif; 选择当页面呈现的时候使用何种字体。字体从第一个，也就是Arial ，开始交替呈现。如果你的系统上没有安装Arial字体，style.css 文件就开始搜索Helvetica ，之后是Georgia ，再之后是Sans-serif 。你可以在你的Fonts 文件夹中找到字体列表，打开方式为点击我的电脑 > 系统盘 > Windows 。
font-size: 12px; 无须说明了。改一个大一点或者小一点的值，然后看看变化。
text-align: left; 让你的文本左对齐，你可以改为text-align: right; 来看看变化。
vertical-align: top; 确保所有东西都是从顶端开始往下排，如果你从中部或者底部排布body 标签，所有的东西将往下推。
background: #ffffff; 代表白色背景。 #ffffff 白色的16进制代码，而 #000000 代表黑色。
color: #000000; 代表文本字体为黑色。
如果你想更进一步，或者自学CSS ，最好的地方是：w3schools.com
版权说明
无特殊说明均为原创文章，转载请注明。
本文链接地址: http://sunxun.info/2009/07/wp-theme-9-style-css-intro/
最近评论