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;,这是没有页边距的同一页面:

边距-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简介

赞 (0)
分享到:更多 ()

欢迎各位吐槽评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址