WordPress基础教程

WordPress主题开发教程十八:Style.css 和 CSS 介绍

发布时间:2022-04-20 10:28:25

本文作者:

学习 CSS 最好的方法就是去使用它,不像 XHTML 和 PHP 需要接触模板的核心文件,同样不要需要理解任何基本概念,只要去用它,通过试用和修正错误是可以让你快速学会。

我们现在已经在 style.css 文件有些内容,让我们先来看看这部分内容是干什么的?

WordPress主题开发教程十八:Style.css 和 CSS 介绍
  • 第一行显而易见就是主题的名字。
  • 第二行是这个主题的地址,如果你的主题只是私用的而不准备发布的话,那就不用管它了。
  • 第三行是主题的描述。
  • 第四行是版本号,这是非常重要的,特别是当你公开发布你主题新版本的时候。
  • 第五和第六行分别是主题作者的名字和主页。

在主题信息两边的 /* 和 */ 符号是为了让主题的信息不影响该文件的其他内容,这是 CSS 的注释。当输入 CSS 代码去样式化你的网页的时候,你可能想在这里增加些注释使得能够在以后更清楚知道这部分是干什么的。显然我们并不想你的注释影响实际的代码,所以可以使用 /* 和 */ 这一对符号使得注释不被解释。

下面是处理后的主题信息

WordPress主题开发教程十八:Style.css 和 CSS 介绍

第1步:打开 style.css 文件

  • 打开 Xampp,主题文件夹,FireFox,IE 浏览器和 style.css 文件。
  • 在两个浏览器的地址栏都输入:http://localhost/wordpress

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

第2步:添加 CSS 代码

在 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 一样,通过制表符增加缩进来组织代码:

WordPress主题开发教程十八:Style.css 和 CSS 介绍

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

把 body{ } 看作一个标签,然后它里面所有的东西看作属性和值,和处理 XHTML 时一样。{ 是开始符,} 是结束符。在 { 和 } 之间,冒号意思是开始分号意思是结束。(我在涉及到 XHTML,PHP,CSS的时候都使用标签,属性和值这些术语是为了保持简单,实际上 PHP 和 CSS 有不同术语。如参数(parameters),选择器(selector)和属性(property)。)

在我们继续之前,我需要解释下为什么使用 body{ } (CSS 选择器),是因为你是在样式化网页的绝大基本部分(或者说是总体部分),<body> 标签。你不会样式 <head> 因为这个标签没有东西需要样式化。你网页上展示的绝大部分的东西是在<body> 和 </body> 标签之间。

然后,在后面你会样式化 ID 为 header 的 DIV 标签。

进一步的解释

margin: 0; 处理 body 标签的默认的页边空白,如果你要页边空白或者更大的页面空白,把 0 改成 10px,20px 或者其他。PX 意思是像素。每个像素使你电脑屏幕的一个点。当你的页边空白是 0 的话,就不需要后面跟上 px。

在下面的图片中,红色高亮的区域就是应用于 body 标签的默认的页边空白。

WordPress主题开发教程十八:Style.css 和 CSS 介绍

当给其样式化为 margin: 0;,下面是没有页边空白的相同页面:

WordPress主题开发教程十八:Style.css 和 CSS 介绍

font-family: Arial, Helvetica, Georgia, Sans-serif; 为你的网页或者网站选择使用哪种字体。这些字体中的第一个,Arial 是可替换的,如果你的用户没有在他们的电脑上安装 Arial 这种字体,style.css 文件就会寻找 Helvetica,然后是 Georgia,再接着是 Sans-serif。你可以在字体文件夹(我的电脑 > 系统盘 > Windows下面)找到你的字体列表。

font-size: 12px; 显而易见是字体大小。可以把它改大或改小以查看变化。

text-align: left; 让你的文本向左对齐。把它改成 text-align: right; 去查看不同之处。

vertical-align: top; 使得所有的东西从上面开始。如果是中部或底部排行你的 body 标签,所有东西将会向下推。

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

color: #000000; 意思是文本颜色是黑色。

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

本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有互联网营销朋友的一封信

写给所有互联网营销朋友的一封信

2020年,我希望和更多的朋友,更多的营销从业者一起探讨企业的互联网营销。我想要所有的人都可以以最低的成本进去互联网,并且以最快的效率去做互联网营销。如果你也有兴趣和激情做互联网营销,请让我们并肩同行。

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
坚持以“为企业而生的wordpress主题”为宗旨,并提供价格合理的wordpress建站套餐