WordPress主题开发教程XVIII:style . css和CSS介绍

学习CSS最好的方法就是使用它。不像XHTML和PHP需要接触模板的核心文件，你也不需要了解任何基本概念。用就好了，试错纠错，很快就能学会。

现在我们在style.css文件中有了一些内容，让我们先来看看这部分是做什么的。

第一行明显是题目的名字。第二行是这个主题的地址。如果你的主题只供私人使用，并且你不打算发表它，不用担心。第三行是题目的描述。第四行是版本号，这非常重要，尤其是当你公开发布你的主题的新版本时。第五行和第六行分别是主题作者的姓名和主页。

主题信息两边的/*和*/符号用于防止主题信息影响文件的其他内容。这是CSS的一个评论。当输入CSS代码来样式化你的网页时，你可能想在这里添加一些注释，这样你以后就能知道这部分是干什么用的了。显然，我们不希望您的注释影响实际代码，所以您可以使用符号/*和*/来防止注释被解释。

以下是处理后的主题信息。

第一步:打开style.css文件，打开Xampp、主题文件夹、FireFox、IE浏览器和style.css文件。在两个浏览器的地址栏中输入:http://localhost/wordpress。

从这里开始，我们需要同时在FireFox和IE上测试主题。不同的浏览器对CSS有不同的代码解释。最好能够在尽可能多的浏览器和操作系统(Safari、Opera、Linux、Netscape等)上测试你的主题。).如果你和我一样懒，就在火狐和IE上测试你的主题吧。

步骤2:添加CSS代码

在style.css文件中输入以下代码:

正文{边距:0；font -家族:Arial，Helvetica，佐治亚，sans -serif；font -size:12px；text -align:left；vertical -align:top；背景:# ffffff颜色:# 000000；}

像XHTML和PHP一样，代码是通过制表符添加缩进来组织的:

保存style.css文件并刷新两个浏览器Firefox和Internet Explorer以查看更改。

把body{}想象成一个标签，然后里面的所有东西都被当作属性和值，就像处理XHTML的时候一样。{是开始字符，}是结束字符。在{和}之间，冒号表示开始，分号表示结束。(对于XHTML、PHP和CSS，为了简单起见，我使用了标签、属性和值这些术语。其实PHP和CSS有不同的术语。例如参数、选择器和属性。)

在我们继续之前，我需要解释一下为什么我使用body{ }(CSS选择器)，因为您正在设计web页面最基本的部分(或整体部分)。< body & gt标签。你不会设计风格

然后，稍后，您将使用ID头样式化DIV标签。

进一步解释:

边距:0；处理body标签的默认边距。如果您想要边距或更大的边距，请将0更改为10px、20px或其他值。PX的意思是像素。每个像素在你的电脑屏幕上形成一个点。当你的保证金为0时，你不需要跟px。

在下图中，红色突出显示的区域是应用于body标记的默认边距。

将其样式化为边距时:0；，这里是没有页边距的同一页:

font -家族:Arial，Helvetica，佐治亚，sans -serif；选择网页或网站要使用的字体。第一种字体Arial是可替换的。如果用户的计算机上没有安装Arial，style.css文件将查找Helvetica，然后是佐治亚，然后是Sans-serif。你可以在字体文件夹(我的电脑>:系统盘>:Windows下面)找到你的字体列表。

font -size:12px；很明显，那个字体大小。您可以放大或缩小它来查看变化。

text -align:left；将文本靠左对齐。改成text -align:right；才能看出区别。

vertical -align:top；让一切从头开始。如果你的身体标签在中间或者底部，所有的东西都会被推下去。

背景:# ffffff意思是白色背景。#ffffff是白色的十六进制代码。#000000是黑色十六进制代码。

颜色:# 000000；这意味着文本颜色是黑色的。

如果你想更进一步或者自己学习CSS，最好的地方是w3schools.com。

这几篇文章你可能也喜欢：

• 如何清除WordPress缓存？（WordPress消耗内存）
• 如果将图像上传到 WordPress 网站时出现 HTTP 错误，我该怎么办？
• 如何解决WordPress媒体库图片加载错误（WordPress媒体库文件路径）
• 如果您的WordPress站点无法更新怎么办（如何设置WordPress站点地址）
• 如何防止独立WordPress外贸网站被搜索引擎索引

本文由主机参考刊发，转载请注明：WordPress主题开发教程XVIII:style . css和CSS介绍 https://zhujicankao.com/86052.html