wordpress主题模板修改教程

1、WordPress主题(模板)修改教程(一):准备工作 CreDSY发布：2013-11-08 11:31分类： HYPERLINK :/ bixui /index.php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：1,146次评论： HYPERLINK :/ bixui /index.php/archives/2827 l respond o WordPress主题(模板)修改教程(一):准备工作上的评论 暂无wordpress主题(模板)修改之前呢，我们需要做下准备工作，那就是需要安装一些软件，用来编辑和测试。首先需要配备一些浏览器，

2、比如：火狐，谷歌，苹果（这个在国内用的比较少，国外居多，所以根据自己来选择安装），不过前两个是必须安装的，还有一个是IE浏览器，IE的话因为每个电脑只有一版本，我建议大家安装一个叫 HYPERLINK :/ bixui /index.php/archives/2004 t _blank IETester( HYPERLINK :/ bixui /index.php/archives/2004 t _blank 下载地址)的软件，用来测试不同IE版本下的页面是否兼容（页面是否错乱）的情况，这里需要多说一点，就是在对页面进行修改后它在每个浏览器上面显示多多少少会有所不同，最糟糕的就是在一个浏览器上

3、面看起来很正常，而使用其他浏览器看时却乱成一片。所以需要在多个浏览器上进行测试。还有安装火狐浏览器后还需要安装它的一个扩展插件叫firebug这个很重要，它可以直接在页面上查看代码以及修改测试，非常方便，在后面的文章中教大家怎么使用。其次需要用到的编辑软件，Dreamweaver（ HYPERLINK :/ bixui /index.php/archives/1026 t _blank 下载地址）、EditPlus、NotePad+（ HYPERLINK :/ bixui /index.php/archives/2146 t _blank 下载地址） 等等，根据自己的编辑习惯来选择，不过我希望

4、大家都装上，每个软件各有各的优点，在使用的时候新手的话建议先用Dreamweaver，它的功能多而且在写代码时会有提示，对你有很大的帮助。将上面安装好后，我们需要安装wordpress的运行环境（也就是说怎样让它运行起来），因为wordpress是用php语言编写的，所以他需要搭建php环境才可以运行wordpress，本站在 HYPERLINK :/ bixui /index.php/archives/2453 o 使用 PHPnow 搭建 PHP 环境 t _blank php环境搭建步骤流程这篇文章已经写出怎样安装php以及Mysql数据库等。大家可以去了解下也可以看着安装下（注：那篇文

5、章说到是独立安装php环境的方法）。环境搭建好后，就需要下载wordpress 文件了。我们只要去官网下载就可以了。下面就是一些需要用到的下载地址：火狐浏览器下载地址： HYPERLINK :/firefox / t _blank 火狐扩展插件Firebug安装地址： HYPERLINK s:/zh-CN/firefox/addon/firebug/?src=search t _blank =search当你安装好火狐浏览器后打开火狐浏览器将上面的地址打开，然后你就会看到有个按钮点击添加就可以了。WordPress主题(模板)修改教程(二):本地搭建wordpress 比克发布：2013-11

6、-09 19:55分类： HYPERLINK :/ bixui /index.php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：1,322次评论： HYPERLINK :/ bixui /index.php/archives/2835 l respond o WordPress主题(模板)修改教程(二):本地搭建wordpress上的评论 暂无在昨天的时候，磊子写了WordPress主题(模板)修改教程的准备工作和php环境搭建的wamp5的安装和使用教程如果是刚刚接触wordpress没有看的希望去看下，了解下。那么环境搭建好之后现在就

7、开始在本地安装wordpress了。这个教程还是比较简单的，大家一看就明白。首先安装好wamp之后，会有一个www的文件目录，假如你是在C盘安装的，那么在C盘的根目录中会有一个wamp的文件夹，进去之后你就会看到有个www目录了，然后把下载好的wordpress文件放到这个目录下面，你可以随便给这个wordpress文件命个名字，像磊子的话由于项目文件比较多，所以是以日期来命名的。比如今年的话，我先创建了名叫2011的文件夹，然后是每个月份的文件夹，之后在该11下放置wordpress的。说明一点就是文件夹命名要都是字母或者数字不要出现中文文字。避免读出文件时出现中文文字乱码而不发读取，这样做

8、的目的主要是为了以后便于管理和归纳。很清楚的知道自己这个月做了什么，如果大家的项目文件也比较多的话也可以采用这种方式。然后放置好后，还需要创建数据库，运行方式呢，昨天已经有讲，直接在电脑左下角wamp绿色的图标上左键选择phpmyAdmin或者直接在地址栏中输入 :/localhost/phpmyadmin 也可以运行。打开之后首先看到如下页面(点击放大)：然后点击数据库(横向菜单的第一个)菜单，如下图：这时候你会看到新建数据库几个字，下面是已经创建的数据库。如果第一次安装上去的话，默认已经有两个数据库了,这两个数据库不要管他，里面是些Mysql的配置信息的东西，我们在上面创建好数据库名称。整

9、理选择utf8-general-ci编码形式，选上的话主要是避免以后出现乱码情况，如果是独立安装php环境的话之前在安装Mysq的时候已经配置好后这个地方就不需要选了，最后点击创建，这样数据库就创建好了。接下来就是运行wordpress，在地址栏里面输入 :/localhost/XXX(这里是你的wordpress文件夹名称)，运行后你会看到一个按钮点击进去之后便是一个欢迎页面，然后在点击现在就开始的按钮。便会看到如下配置信息：WordPress主题(模板)修改教程(三):主题文件结构和作用 比克发布：2013-11-10 19:59分类： HYPERLINK :/ bixui /index.

10、php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：1,260次评论： HYPERLINK :/ bixui /index.php/archives/2842 l comments o WordPress主题(模板)修改教程(三):主题文件结构和作用上的评论 1今天为大家讲解wordpress主题基本的文件以及它的每个文件的作用。如果刚接触wordpress建议先去看下之前的教程哈，昨天说到了本地安装wordpress，安装成功后默认启动了一个主题叫twentyeleven这个主题是对新版的wordpress功能的一个展示。今天磊子就对这个

11、主题在做下具体的讲解。这样大家也可以了解新版wordpress的一些功能。安装好wordpress后，了解下它的文件结构，如下图：大家可以清楚的看下里面有三个文件夹和一些文件。因为我们是修改主题所以我们只需要找到主题文件放哪儿就可以了。具体是在wp-content- themes 里面，wp-admin可以看做是wordpress后台的核心文件，wp-includes可以看做是wordpress主要的核心和方法文件。我们现在的wp-content里面，plugin就是插件放置的地方，language是语言包，之后还会有uploads你的一些附加图片什么的。还有一个upgrade是你升级插件或w

12、ordpress系统时会自动生成的，我们主要看下themes里面的东西，默认有两个主题文件。其中一个便是twentyeleven里面机构如下：可以看到里面有很多的文件，假如你是制作主题的话，磊子在wordpress简单结构介绍这片文章介绍过，是不需要这么多文件的。假如你制作单页面得话那文件就更少了，我们只需要一些基本的header.php，index.php，footer.php，style.css这四个文件你就可以做一个网站出来！但是为了便于管理和进行修改，我们可以把index.php进行分解开来。我们还需要添加图片需要创建images文件夹，需要加载js创建js文件夹。这个主题呢有36个文

13、件，5个文件夹。我们先从文件夹说起，第一个color文件夹里面有个dark.css这个主要用于主题的皮肤所需要的颜色样式，第二个images主要就是放图片文件了，还有header头部的一些图片，inc这个文件夹可以当做是主题的扩展，一些额外的功能和设置。我们在wordpress后台的外观那儿可以看到有个主题选项。这里面显示的，主要是就inc里面文件所以运行的效果。js文件夹这个就是放置一些js文件，language就是主题的语言包。然后在下面的36个文件中，我们除了主题一般需要的文件外，比如index.php(主体)，header.php(头部)，footer.php(底部)，sidebar.

14、php(侧边栏)，404.php(未找到页面内容)，category.php(分类内容文件)，author.php(作者内容文件)，page.php(页面内容文件)，search.php(搜索内容显示文件)和searchform.php(搜索框文件)，single.php(单页内容文件)，style.css(样式文件)functions.php(主题需要用到的方法文件)，还有tag.php(标签内容文件)。/get_template_part是wordpress一个函数方法，字面意思就是获得引入主题里面一些模板/文件的内容，而这个模板文件的主要部分组成名称叫content，如果大家已经打开这个

15、主题文件就会很/清楚的看到里面有一些content-xxx.php的文件，比如你定义了一个文件的名称叫content-1.php/那么这个方法就可以这么写get_template_part(content,1);至于这么做的原因如果以这个主题/来说的话，就是tag.php的代码内容是和模板文件的内容是一样，完全可以共用一个模板文件。/那get_post_format()是什么呢？大家看下面的截图就可以明白。这个叫形式的东东在添加或者编辑日志的时候在右侧边栏就会看到。这样大家应该知道主题文件里的conten-xxx.php主要就是对这个形式内容分别创建的文件。它们每个的显示效果也会不一样。这个在

16、wordpress之前的版本是没有的。剩下的image.php和showcase.php还有一些css文件的东西。大家都可以理解为主题专门定制的一些内容的文件。image.php的话图片附件也就是wordpress后台媒体那儿添加图片时查看显示的效果，showcase.php是一个模板文件主要用在wordpress后台页面那边添加或者编辑页面时选择的模板效果。最后还有sidebar-footer.php和sidebar.php这些都可以当做是主题里面的模板。这样我们大概就对这个默认主题做了一些了解，我想大家也有所了解吧。但是我们要做模板修改的话这个主题是不怎么适合做修改的，特别是对新手。原因就

17、是里面有配置文件inc这个文件，有配置文件就有调用这个文件的代码在header.php或者其他地方我们还得去找，这样是很麻烦的。所以选择适合的主题框架进行修改，是非常重要的。今天磊子主要就是说下结合默认主题大概对文件结构以及一些作用还有wordpress一些功能的做了下讲解，在明天磊子具体说下我们主题里面的一些常用到的函数。第一个呢就是填写之前创建好的数据库名称，然后是你的用户名还有密码。默认安装好wamp后用户名是root密码是没有的，所以密码不填。然后提交,在点进行安装按钮。就会出现让你填写站点标题，后台登录的用户名和密码，还有就是邮箱地址。最后点击安装wordpress。这样wordpr

18、ess就安装成功了，你可以登录进去后台看看了(后台地址的话就是 :/localhost/XXX/wp-admin)，刚安装好后会有两个默认的主题。有一个叫twentyeleven得主题，这个主题已经把新版的wordpress的大部分自带的功能都包含了。大家可以先看下他的文件结构。现在呢，磊子在教大家第二种安装wordpress的方法，直接修改配置修改安装。在把wordpress文件放到www目录后，点击进去找到wp-config-sample.php 这个文件。然后把它的名字改成wp-config.php再打开。主要是修改里面的18和21和24行填好之后保存，然后在地址栏直接运行wordpre

19、ss。你会看到他直接跳到了填写网站标题和账户已经密码的地方，这样安装的话也是比较方便的，看大家自己选择了。WordPress主题(模板)修改教程(四):常用的wordpress主题函数和作用 比克发布：2013-11-11 10:32分类： HYPERLINK :/ bixui /index.php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：1,076次评论： HYPERLINK :/ bixui /index.php/archives/2847 l respond o WordPress主题(模板)修改教程(四):常用的wordpres

20、s主题函数和作用上的评论 暂无今天继续为大家讲解，上一篇磊子结合默认主题讲解了下主题(模板)文件结构和作用今儿也会结合默认主题说下wordpress主题中需要用到的函数和它的作用。用法的话磊子会在后面章节具体用到时在具体讲下，今天只讲主题常用函数是什么。先让大家有个了解，废话不多说进入正题。首先我们在做网站时脑子里要有个大概，想你这个网站的整体结构。是上，中，下型呢，还是左，中，右呢，自己得有个思路。不过一般都是从上往下，也就是头部中间和底部，那我们先从头部开始讲起。wordpress的header.php文件中 之间需要用到的一些函数。（建议大家不管在看什么教程的时候，先提前把需要的文件都准

21、备好，边看边操作影响更深刻，呵呵）1.这个函数用于声明网页所使用的语言，如果你的主题是用于中文站点，而且文字方向是从左往右读那么在查看源码的时候会看到dir=”ltr” lang=”zh-CN”这么一小段。主要放在里面。2.这个函数用于声明网站的编码，这个编码可以在WordPress后台 设置 阅读，最后一个选项”页面和 feed 编码”那里设置，一般都是 UTF-8。3.该标签显示或返回页面的标题。可定义一个分隔符也就是里面的|。4.用于输出博客网站的名称，可以在WordPress后台 设置 常规站点标题那儿修改。5.站点的描述，可以在WordPress后台 设置 副标题那儿修改。6.用于输

22、出博客的”站点地址（URL）”，可以在WordPress后台 设置 常规那里找到。7.用于输出博 客的”style.css文件的地址”，如果你不知道这个地址是什么，可以打开你的网站首页，然后用浏览器的”查看源代码”功能来查看网页的源代码，查找 style.css，应该可以找到 :/example/wp-content/themes/XXX/style.css使用了这个函数就省去了写这么长的地址。8.用于输出博客的”style.css文件所在的目录”，如 :/example/wp-content/themes/XXX。9.用于输出你的feed的网址，一般形式如： :/example/feed。1

23、0.用于输出你的pingback的网址。(pingback大概意思就是说别人引用了你的文章也加上了你网站的链接，你就会受到pingback的信息。)11.这个函数是非常重要的，大家可以理解成我们装的插件和主题的接口，一些插件的作用是通过这个函数显示在主题上面的。还有一个是wp_footer()这个也是，不过它是放在footer.php里面的。结束后我们继续往下看，到了这里面的东西就很多了。我们网站的内容都是放在html标签之间的(这个不清楚的，大家可以先去网上搜下，磊子会在以后讲到html标签)。首先网站肯定需要你自己logo可以是文字也可以是图片。如果要用图片呢，我们就需要这个函数显示主题文

24、件地址比如你的主题叫XXX，那么你的主题文件地址就是 :/你的网站地址/wp-content/themes/XXX，然后图片是放在images文件里面的，这样完整的代码是img src=/images/logo.jpg alt= title= /这里用到了html的图片标签img以及里面一些属性这样做的好处是假如你本地测试后要传到空间上不需要自己再去修改图片地址。我们继续往下看，我们可以在logo的右边加上搜索框，就像磊子博客上一样，那么用到的函数是这个是调用wp内置的搜索框，当然我们也可以自定义。接下来是菜单导航。在wordpress之前的版本中我们常用到的菜单导航函数是但由于新版的wp后台

25、有了菜单选项，这个方法很少用了，而是新的函数 primary ); ?要使用这个函数还需要在functions.php里面激活这个功能，写法是以上这些部分一般都是放在header.php里面的，原因就是它们都是公用的，你每个页面都会用到这些，所以呢在网站头部中如果是每个页面都会用到的可以放在header.php里面。放进去之后那其他文件需要在文件里面最顶端加上 如果是调用footer.php在文件的最低端就上,侧边栏调用就是，昨天讲到文件结构时有个sidebar.php的文件，那调用代码就要写成。这样就把文件引入进来了。其次网站主要内容部分，我们看博客首页的时候都是以列表的形式显示出来的，那么

26、需要用到循环。把整个文章里面的标题和内容全部显示出来，代码是 /显示文章标题 /显示文章作者 /显示文章发布时间，格式为2011-11-23 21:10:11/显示分类名称用逗号,隔开 /显示标签名称用逗号,隔开 /显示文章摘要/显示文章内容/这些都需要放在循环里才可以显示出来，还有下面这些需要在循环里面添加的。 /获得每篇文章的链接，一般放在a标签里面 /获取文章作者的链接同样也是a标签里面/评论的链接以及一些设置，无评论时显示暂无评论，有一条时显示1条评论，多条时就是%条评论/以上是网站的主要内容部分用到的常用函数。主要部分显示完之后如果需要有侧边栏.方法是： _( 首页, leizi )

27、, id = post-sidebar, description = _( 这是一个侧边栏小工具, leizi ), before_widget = , after_widget = , before_title = , after_title = , );add_action( widgets_init, lei_widgets_init );/通过这个方法，就可以在后台的小工具那儿使用叫首页的侧边栏了。这样一个网站大概内容基本都显示出来了。还需要在详细页面single.php里面加上评论框，代码是，single.php里面内容显示的方法和主要列表内容显示的方法是一样的。把那些代码贴过去用就

28、行。还有分类文件category.php，作者内容文件author.php，存档文件archive.php等，都可以用上面的循环来显示出来。我们用到上面的代码就可以做一个主题出来了。在加上下面的一些判断。is_404(),/是否是404页面 is_admin(),/是否是管理员 is_archive(),/是否是存档页面is_attachment(),/是否是附件页面 is_author(),/是否是作者页面is_category(),/是否是分类页面is_date(), is_day(), is_feed(),/是否是时间，天以及订阅页面is_tag(), /是否是标签页面。/等等一些判断有

29、了这些判断我们可以更灵活的编写代码。还有一些函数磊子就不在写了，在后面的具体操作中在讲，这些呢都是需要知道的，希望大家多看下，多试着写一下用用。明天讲解html方面的比较更基础的知识。大家先消化下吧，WordPress主题(模板)修改教程(五):需要了解的html标签和属性 比克发布：2013-11-12 13:19分类： HYPERLINK :/ bixui /index.php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：740次评论： HYPERLINK :/ bixui /index.php/archives/2873 l resp

30、ond o WordPress主题(模板)修改教程(五):需要了解的html标签和属性上的评论 暂无昨天讲了常用的wordpress主题函数和作用，今天磊子就来说下更基础的东西，html标签和属性，我这里讲一些比较用的多的，其余的就需要大家去查阅了和搜索网站了。我这边也有精通div+css的教材，因为容量比较大所以就没有上传，如果有需要的可以来联系我。我们在制作的和修改主题的时候，大部分都是使用html和css来对主题进行样式和排版上的修改。可以说制作一个简单的主题并不需要知道太多的wordpress函数和php代码，而html的话你就得非常了解和熟悉，你才能更好的去下手修改。首先是基本的结构

31、标签组成(大家可以对照着自己的html文件看一下)1. 是一个块级元素，浏览器通常会在 div 元素前后放置一个换行符。它常用的属性有id, class, title, style。写法例如:,表示是html文件,标签里面可以加网站标题，描述，样式还有js脚本等。,包含文件的标题,标题出现在浏览器标题栏中是 的结束标签,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.,是的结束标签,是的结束标签然后在标签之间就是我们主要用到的标签了。这是一个例子/class值可以定义多个中间用空格隔开就可以，id只能有一个，style是直接给div里面的内容进行/样式定义的，比如上面直接加了一个

32、文件显示红色的css代码。title是对div内容的提示。/我们用鼠标放在这是一个例子上面时就会有这个提示告诉用户这是做什么的。/通过定义class或者id的值我们就可以在css文件里面来给这个div内容加样式上去，写法是/ .test或者#test1 第一个是class的写法第二个是id值的写法，这样我们以后如果要给/这个div加样式就可以去找下它的id值或者class值，然后在之间添加css代码。其他的html/标签也是一样的，都可以用来定义，比如等等2.这个标签大家应该很熟悉主要是做链接用的，href里面填写链接的地址，我们也叫他锚文本。3.图片标签，src里面填写图片的地址，alt图片

33、说明，一般做seo的alt也需要添加内容上去。4.,这些都是标题标签，标题大小由数字逐渐变小。5.表单标签，用来提交一些信息，比如我们评论就需要用这个标签。属性以此是：需要把内容提交的地址，提交的方法，表单的名称，id值。6.可以用在里面然后把内容提交给action地址,属性type定义它的类型，可以是文本框，复选框，密码框，按钮，单选按钮等7.段落标签，浏览器默认给它一个换行符。主要用在文章中。8.标签因为它不换行所以常用来内容组合。然后分别给定义样式。9.框架标签，常常用来嵌入视频地址来显示在网站上面。src里面输入视频地址。常用属性包含有可以定义宽度width，高度height，是否显示

34、滚动scrolling=”,yes显示no不显示。10.加粗标签可以给文件进行加粗，也可以用11.居中标签，对文字或者图片等进行居中。12.换行标签，可以对文章进行强制换行。13.可以将文字斜体显示14.可以文件缩小对应的将文件变大15.文本域标签可以定义多行，如评论输入框,cols规定它的宽度，rows规定显示的行数。16. 标签为 input 元素定义标注(标记).17. 标签用于直接 html 文件中定义样式.18. 标签定义 html 表格,简单的 html 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成,tr 元素定义表格的行，th 元素定义表头，td 元素定

35、义表格的单元。以上这些呢，就是我们比较常用的标签了，这些标签用的多了慢慢的就记住了。html标签属性中还有一个事件属性，这个属性主要是用来执行和触发JavaScript事件。比如磊子首页的图片滚动，我们在某些网站注册时会弹出一个框来提示你注册哪些内容。这些都是事件触发后发生的。例如: onclick 鼠标点击后触发，onmousedown 鼠标按下时触发,onmousemove,鼠标移动时触发等等。有了这些属性我们就可以来执行javascript脚本。如果大家想了解的可以网上搜下html事件属性，磊子只是简单的介绍了下。我们有了这些标签后，就可以做页面已经改一些简单的页面，但是直接用标签显示出

36、来的东西是非常不美观的。我们还需要css来给这些标签定义样式，就像我们穿衣服一样。标签就相当于自己，而css定义的样式相当于我们穿的衣服。怎么打扮就看你自己的了。磊子会在明天给大家说下css常用到的样式属性。WordPress主题(模板)修改教程(六):需要了解的css样式 比克发布：2013-11-13 13:41分类： HYPERLINK :/ bixui /index.php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：789次评论： HYPERLINK :/ bixui /index.php/archives/2877 l resp

37、ond o WordPress主题(模板)修改教程(六):需要了解的css样式上的评论 暂无今天接着昨天的需要了解的html标签和属性为大家继续讲解基础性的知识，常用到的css样式和属性。可以说很多。让我一一道来。首先说下写法。给大家看个例子就明白了。/定义一个div标签 里面给个id值，或者class值这是一个测试/然后在css文件中定义样式.test color:#FF000; background:#000000; /或者#mytest color:#FF000; background:#000000; /可以看到样式是写在里面的，class用点，id值用#号1.word-spacing

38、: 单词之间的距离2.letter-spacing: 字母之间的距离3.text-decoration: 定义文字的装饰: none(没有)/underline(下划线)/overline(上划线)4.vertical-align: 元素在垂直方向的位置: baseline(基线)/top(顶部)/text-top(文本顶部)/middle(中间)/bottom(底部)/text-bottom(文本顶部)5.text-transform:使文本转换为其它方式: capitalize(字母全部大写)/uppercase(首字母大写)/lowercase(字母全部小写)/none(无)6.text

39、-align:文字的对齐: left(左)/right(右)/center(居中)7.text-indent: 文本的首行缩进8.line-height:10px 文本的行高1.font-family:使用什么字体2.font-style:字体的样式:normal/italic(斜体)/3.font-variant:字体大小写:normal/small-caps4.font-weight:字体的粗细:normal/bold5.font-size:字体的大小三.颜色和背景属性(backgroud)1.color:定义字体颜色2.background-color: 定义背景色3.backgroun

40、d-image:定义背景图片4.background-repeat:背景图案重复方式:repeat-x/repeat-y/no-repeat5.background-attachment:设置滚动:scroll(滚动)/fixed(固定的)6.background-position:背景图案的初始位置:top/left/right/bottom四.块属性(block)边距属性:1.margin-top:设置顶部边距2.margin-right:设置右边距3.margin-bottom:设置底边距4.margin-left:设置左边距填充距属性:5.padding-top:设置顶端填充距6.pa

41、dding-right:设置顶端填充距7.padding-bottom:设置顶端填充距8.padding-left:设置顶端填充距五.定义超链接:a:link color:green;text-decoration:nore 未访问过的状态a:visited color:ren;text-decoration:underline;16px 访问过的状态a:hover color:blue;text-decoration:underline;16px 鼠标激活的状态六.边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)bo

42、rder-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)display:定义是否显示 none(不显示),block(块状显示)white-space:属性设置如何处理元素内的空白list-style-type:在列表前加项目符号,disc(圆

43、点),circle(圈),square(方形),decimal(阿拉伯数字),lower-roman:(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写英文字母),upper-alpha:大写英文字母),nonelist-style-tyle:在列表前加图标或者符号list-style-position:决定列表位置list-style:一次性定义列表样式八.定位(positioning)即层属性类型:设定对象的定位方式。有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static（无特殊定位）。相对应的CSS属性是”position

44、”,如:position:relative。1.Visibility:设定对象定位层的最初显示状态,有三种状态:Inherit(继承父层的显示属性)Visible(对象可视),Hidden隐藏对象。相对应的CSS属性是”visibility”。2.Z-Index:设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。3.Overflow:设置如果层的内容超出了层的大小时如何处理。有四种处理方式:visible,增加层的大小,从而将层的所有内容显示出来,hidden,保持层的大小不变，将超出层的内容剪裁掉；Scroll，总

45、是显示滚动；Auto，只有在内容超出层的边界时才显示滚动条。width:定义宽度属性height:定义高度属性float:浮动,left(左浮动),right(右浮动)clear:清除浮动以上便是一些比较常用到的css属性了，这些就需要大家多多去写去做，这样才印象深刻点，建议大家使用Dreamweaver ，主要是使用软件里面的提示功能。有些东西我们不必要都记住，但是知道怎么使用就可以，也可以在网上找些css手册来看。这些基础性的东西磊子就说到这里了，其他的就需要自己来学习了，我这里的并不是很全。WordPress主题(模板)修改教程(七):如何使用火狐的firebug插件 比克发布：2013

46、-11-14 10:36分类： HYPERLINK :/ bixui /index.php/archives/category/wangzhan o 查看网站建设中的全部文章 网站建设阅读：1,619次评论： HYPERLINK :/ bixui /index.php/archives/2880 l respond o WordPress主题(模板)修改教程(七):如何使用火狐的firebug插件上的评论 暂无今天继续为大家讲解wordpress主题修改，前几篇主要说了下基础方面的东西，虽然简单但是还需要下点功夫来掌握哟。今儿主要说下主题修改的必要工具，火狐浏览器的firebug插件使用安装方

47、法磊子在第一篇教程准备工作中有写到，不大清楚的可以点击看下。我们在修改主题时一般都是找到自己的喜欢的一款的主题后，将里面自己觉得不需要的，或者哪里需要添加点儿功能和样式的然后进行修改。还有就是自己开发主题，但是不想一个一个文件创建这样一步一步做，于是找些适合开发的主题框架进行修改和制作，不过通过磊子在网上的接触大多数都是前者。自己建个博客写点东西，并没有想把学习这些东西，即便如此你也需要一个方便的工具来使用，这样做起来效率上是非常高的。而后者选择合适的主题框架进行开发，我们需要的框架首先主题很简洁，文件结构简单(像默认主题显得有点儿多，有些东西其实我们是用不到的)，还有就是没有过多的主题设置等

48、等一些内容进行开发制作主题，这样更需要一个好的辅助工具来帮助你，火狐浏览器的firebug插件就是一款非常好用的工具。刚好磊子在:龟仙岛站中看到了在Firebug中调试CSS,这篇文章！分享给大家！检查一个CSS元素非常简单，类似于在上一章中介绍的检查一个HTML元素。要检查一个CSS元素，我们只需要将Firefox以检查模式（inspect mode）打开。注意：可以使用以下两个方法来打开Firebug的检查模式：Ctrl+Shift+c 快捷键直接打开检查模式 按F12，然后点击如下图标，这个图标在Firebug窗口左上角，紧挨着臭虫图标。下面这个截图演示了对一个HTML元素的CSS检查（

49、观察屏幕上的Zen Garden的矩形框）：下面是找到并检查一个HTML元素的CSS格式的步骤：打开一个站点（本例是 :/w csszengarden ）并且按Ctrl+Shift+C（默认快捷键），以检查模式 打开Firebug。 移动鼠标指针到Web页面我们希望检查的HTML元素上。如下一个截图所示（本例中是印有“Zen Garden”字样的图片）。随着鼠标移动，我们可以看到在鼠标下面显示有一个蓝色的矩形框。无论矩形框内包含的是什么内容，Firebug都将立即显示 该内容的HTML代码在左边的面板中，而该内容的CSS代码将显示在右边的面板中。 当我们找到了有问题的HTML元素，点击它。此时

50、Web页面上的矩形框消失了，在Firebug将显示出该元素的HTML代码和CSS规则。Firebug也将显示链接（在右边的面板中），并指示出CSS文件中所应用的CSS属性所在行数。当我们点击链接，Firebug将转到CSS标 签页， 并显示出该CSS文件所链接的行的内容。这个特性能够帮助web开发者和设计者轻松的找到准确的CSS文件以及需要作出调整的内容所在行。为确认我们是否已经选择了正确的元素，在CSS规则查看的面板中，移动鼠标指针在到背景的URL值上面，如下图所示。这时将在Firebug中显示 出图片 预览。只要我们把鼠标移动到这个值上面，Firebug将显示方便的预览提示，并在这个图片预

51、览中显示图片的宽度与高度。与之类似，我们也可以在Firebug中预览颜色。例如，我们来检查元素：The Road to Enlightment，如下图所示：现在，我们移动鼠标指针到CSS属性color的值上（在本例中该值为#7D775C），如下面的屏幕截图：使用Firebug,可以编辑CSS规则，即时微调CSS属性，并且实时地查看在页面上刚刚发生的改变。我们不必每次在对CSS文件做出改变时，都重载页面。这个Firebug的特点不仅节约了我们的开发时间和成本，并且帮助我们修正CSS中的错误和问题。Firebug会显示所有对被选中元素有影响的CSS规则，以及那些继承自祖先元素的CSS规则。如果某些

52、CSS属性或样式被覆写了，这些规则和属性仍然会显示，不过是以被删除的方式显示（例如，color:red）。小贴士：当编辑CSS属性时，可以按ESC键来取消编辑。现在让我们来讨论如何微调前面的例子：”The Roda to Enlightment”，在前面我们已经看到其屏幕截图。现在回想一下元素的颜色属性，或者我们指出如下的CSS样式：h3 color:#7D775C;font-family:georgia,sans-serif;font-size:1.4em;font-size-adjust:none;font-style:italic;font-variant:normal;font-wei

53、ght:normal;letter-spacing:1px;line-height:normal;为了从Firebug中编辑此CSS规则，只需如下几步：打开Firebug并且检查需要编辑CSS规则的有疑问的HTML元素。 在HTML标签的“样式”面板下，点击CSS属性值（在我们的例子中，点击CSS属性color的值#7D775C。当我们点击后，一个小的文本编辑框将会出现，如下截图所示：现在，在#7D775C这里输入red。效果可以立即在页面上看到；所选中元素的颜色已经改变为红色，这里并没有重载页面。注意：当CSS属性处于可编辑的模式时，你可以用这个方法在属性之间跳转来浏览它们的值：按TAB键向

54、前跳转，按Shift+TAB键向后跳转。有另外一个容易的方法来编辑CSS样式表。在CSS标签页上点击“编辑”按钮，此时Firebug将把CSS面板变成一个编辑器。当我们完成编辑后，再次 点击“编辑”按钮。通过点击这个按钮，将保存我们所做的改变，并且再次将这个面板由编辑器变成正常的CSS面板模式。Firebug允许我们在CSS内来禁用影响某个元素的样式。当我们禁用某个属性，并且这个属性值在样式表中已经被覆写为另外的值，那么此前被覆盖 的值将 重新激活，我们可以这样删除属性值来测试网页。为了关掉一个属性，我们可以在“样式”面板中点击此属性左边，这里将出现一个红色的“禁用”图标(如下图)， 此属性将

55、变灰或者消失。同时，对这个新的属性值产生实际影响的层级表元素，其删除线将被移除。我们可以让这个被禁用的属性值重新启用，只要我们再次点击 “禁用”小图标。但是，如果这个属性值是因为被覆写而“消失”了，我们将不得不再次查看该元素来显示出消失的属性，然后启用它。下面两个截图演示了启用和禁用CSS属性：当我们禁用h3的CSS的color属性时，发生下列改变：元素“The Road to Englightment”的颜色将发生改变。 我们禁用的属性将变灰。 影响这个元素的color属性值上的删除线将被移除。在上图中，启用CSS属性的效果已经高亮显示出来。文本颜色被再次改变为红色，body规则的CSS颜色

56、属性被覆写了。Firebug的HTML标签页仅仅让我们检查单一元素的CSS样式，而主CSS标签页让我们可以浏览该页面导入的整个样式表。为了检查当前页面导入的全部样式表，我们需要使用CSS标签页。下面的截图显示了如何从下拉菜单中选择样式表：在CSS标签页，我们可以看到在顶端左边的“编辑”按钮的旁边有一个下拉菜单。点击这个下拉菜单，它将会显示导入此页面的样式表清单。现在，我们可以轻松的在这个标签页内选择要检查的样式表。一旦我们从列表中选择了样式表，该样式表将在CSS标签页中打开供查看。当我们在Firebug中右击CSS属性，如下图所示，一个与CSS相关的快捷菜单将会出现，在这个菜单上有几个选项。这

57、是一个动态的上下文菜单，显示的选项有：编辑、删除、禁用等与我们所点击的CSS属性相关的选项。现在让我们来了解此菜单的各种选项：新建规则：当我们点击“新建规则”选项时，在Firebug窗口中将出现一个小的编辑器。在这个编辑器中你可以定义一个新的CSS选择器，也就是说，你可以在这里定义一个CSS类或ID。按TAB键来执行这个改变。新建属性值：当我们点击“新建属性值“选项时，Firebug将在此CSS规则内打开一个小的编辑框，在 这里我 们可以就点击的CSS属性定义一个新的属性值。在此区域内，我们可以输入任意的CSS属性（例如外边距、内边距、背景、颜色等等）我们可以通过按TAB 键，并输入我们想要的

58、值的方式，将属性值赋予一个属性。小贴士：你也可以通过在任意CSS规则前面双击的方式，来定义新的属性。下面的截图显示了“新建属性值“的菜单选项：编辑“属性”通过编辑此选项，Firebug让我们可以编辑显示在菜单中的某个属性。注意：我们也可以简单的点击此属性来编辑它。一旦我们点击了此属性，Firebug就让它变成可编辑的状态。如果我们想要取消编辑，只需点击ESC键。删除“属性”此选项将从CSS中移除该属性。如果我们希望被移除的属性又放回来，只需刷新页面。禁用“属性”这个菜单选项将禁用该CSS属性。禁用属性并不会把该属性从文档中移除，我们总是能够通过点击“禁用图标”来再次启用它。盒模型使我们可以设置

59、所选元素的高度、宽度、内边距、边框和外边距。当你在查看一个元素时，左边面板中显示HTML代码，右边面板显示CSS。在选 择 HTML标签页时，在右边面板的上面将显示“布局”（Layout）标签。为了查看此页面上任意元素的高度，当这个窗口打开并且移动鼠标到我们想检查的行 中或块级元素，你可以点击查看图标，或者使用Ctrl+Shift+C快捷键。为了在CSS标签页中进行搜索，我们所要做的就是使用Firebug的搜索框并在该框中写入搜索字符串。在CSS标签页，搜索框的行为发生了改变，并且搜索的空间变成当前的CSS文件。在搜索的时候，为了区分大小写，我们可以从弹出菜单中选择“强制区分大小写”选项，这个

60、菜单在搜索框取得焦点时弹出。我们还可以从这个菜单中选择“多个文件”选项，选择此选项增加了搜索范围，Firebug将在所有的CSS文件对输入的字符串进行搜索。“上一个”和“下一个”按钮可以在浏览输出结果时使用。（译者注：在新的1.6版本中，还增加了一个选项“使用正则表达式”）在本章中，我们讨论了怎样轻松和迅速的使用Firebug来即时微调CSS样式。我们可以即时在页面上看到所做的改变。我们学会了如何检查DOM树中引起错误的元素以及如何调整其CSS规则。如果一个元素具有color或者background(image)的CSS属性，我们可以通过Firebug的弹出提示工具来预览其颜色或图片。如果我们