WP主题制作-第9课：Style.css和CSS简介-创之梦博客

学习CSS的最好方法是直接学习。与XHTML和PHP不同，您不需要接触模板的核心文件。您也不需要了解任何基本概念。只是潜入。尝试和错误是正确的方法。

在开始之前，您应该已经在style.css 文件中有了一些信息。现在让我们找出该信息块的含义。

第一行是主题的名称，这是不言自明的。
其次是您的主题可用的位置。如果您是为自己创建主题，而不是供公众使用，请不要担心。
第三行是主题的描述。
第四是版本号，这很重要，尤其是当您发布主题的更新版本以供公众使用时。
第五和第六是您的姓名和主页。

主题信息周围的/ *和* /符号用于防止主题信息影响页面的其余部分。它是CSS注释。在键入CSS代码来设置网页样式时，您可能希望在此处和此处添加注释以跟踪情况。但是，您不希望注释影响代码，因此您使用/ *和* /符号使注释不可见。

这是已处理的主题信息：

第一步：

打开Xampp Control，主题文件夹，Firefox浏览器，Internet Explorer浏览器和style.css。
将两个浏览器都指向http：// localhost / wordpress

在这里，您确实需要 Firefox 和Internet Explorer来测试您的主题。不同的系统对CSS代码的解释不同。最好在尽可能多的浏览器和尽可能多的操作系统（Safari，Opera，Linux，Netscape等）中测试主题。如果您像我一样懒惰，请仅在Firefox和Internet Explorer中测试您的主题。

（注意：在本课中，您无需在记事本中打开 index.php。如果您尚未使用记事本打开 style.css，请右键单击文件，选择属性，单击更改，然后选择记事本。）

第二步：

在style.css文件中键入以下代码：

身体{
边距：0；
字体系列：Arial，Helvetica，乔治亚州，无衬线；
font-size：12px;
文字对齐：左；
垂直对齐：顶部；
背景：#ffffff;
颜色：＃000000;
}

就像使用XHTML或PHP一样，为组织添加制表符间距：

保存您的style.css文件，刷新两个火狐和 Internet Explorer的 浏览器看到的变化。（从现在开始，您将使用两个浏览器。）

就像使用XHTML一样，将 body {}视为标签，并将介于两者之间的所有内容都视为属性和值。 { 已打开。 } 很近。在 { 和 }中， 冒号表示开始 ， 分号表示停止。（在引用XHTML，PHP和CSS时，为了简化起见，我使用了标签，属性和值这两个术语。实际上，PHP和CSS的代码具有不同的术语。例如：参数，选择器和属性。）

在继续之前，有一个原因要使用 body {} （CSS选择器），这是因为您正在设计网页的最基本（或整体）部分<body> 标记的样式。您无需设置<header>标记的样式，因为没有样式。网页上显示的所有内容都位于 <body> 和 </ body> 标记内。

但是，稍后，您将使用名为header的ID设置DIV框的样式。

进一步说明：

边距：0; 摆脱了body标签的默认边距间距。如果您需要边距或更大的边距，请将0更改为10px，20px等。PX表示像素。每个像素在计算机屏幕上都是一个点。当您的边距为0时，无需再加上px。

在下图中，红色突出显示的空格是应用于body标签的默认边距间距。

样式设置后 边距：0；，这是没有页边距的同一页面：

字体系列：Arial，Helvetica，乔治亚州，无衬线； 选择用于网页或网站的字体。第一个字体（ 在这种情况下为Arial）之后的字体是备用字体。如果您的用户的计算机上未安装Arial字体，则 style.css 文件将查找 Helvetica， 佐治亚州和 Sans-serif。您可以在“ 我的电脑”>“硬盘”>“ Windows”下的“ 字体”文件夹中找到字体列表。

font-size：12px; 是不言自明的。将其更改为更大或更小的数字以查看更改。

文字对齐：左； 将您的文字向左对齐。更改为text-align：right; 看看区别。

垂直对齐：顶部； 确保一切都从顶部开始。如果您在中间或底部对齐body标签，则所有内容都会被向下推。

背景：#ffffff; 表示白色背景。#ffffff是白色的十六进制代码。＃000000是黑色的十六进制代码。

颜色：＃000000; 表示您的文字颜色将为黑色。

如果您想继续前进或自己学习CSS，最好的起点是 w3schools.com

未经允许不得转载：创之梦博客 » WP主题制作-第9课：Style.css和CSS简介

相关推荐