主机评测网,专注vps、独立服务器等主机评测
最专业的主机评测网站

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

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

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

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

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

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

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

WordPress主题开发教程XVIII:style . 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一样,代码是通过制表符添加缩进来组织的:

WordPress主题开发教程XVIII:style . css和CSS介绍保存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标记的默认边距。

WordPress主题开发教程XVIII:style . css和CSS介绍将其样式化为边距时:0;,这里是没有页边距的同一页:

WordPress主题开发教程XVIII:style . css和CSS介绍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主题开发教程XVIII:style . css和CSS介绍 https://vps.caogenba.com.com/86052.html

赞(0) 打赏
未经允许不得转载:主机测评 » WordPress主题开发教程XVIII:style . css和CSS介绍

评论 抢沙发

登录

找回密码

注册