无限策划系列建站教程之css入门（一）：工具准备

无限策划系列建站教程不走传统的教程路子，以实用出发，以最快的最易懂的法子让你迅速上手。

工欲善其事，必先利其器！

工具准备：firefox——一款不同于ie的浏览器

下载地址：http://www.mozillaonline.com（有中文版的）

重要插件：firefox插件firebug（也有中文版）

插件安装：安装好firefox后，打开firefox，用其访问https://addons.mozilla.org/zh-CN/firefox/addon/1843，即可看到firebug及相关介绍；点击“安装到firefox”，按提示安装即可。

安装好firebug会提示重启firefox，重启后可在浏览器右下角看到一个蟑螂形状的图标。

点击它或者按 F12 都会在浏览器底部出现一个操作框：

其左边是网页的html代码，右边默认为网页的css。当然，它的功能不仅仅是用来看css，还有其它功能，但我们现在主要用这块就可以了，其它你有空再研究吧。

firebug只是一个调试工具，它所针对的只是页面的缓存。在firebug里的任何操作在刷新页面后都会完全消失。在firebug里你可以随便点击随便修改，这不会对你的网站产生任何影响。要不信你就打开g.cn，再调出firebug随便点点改改看吧。

现在举个简单的例子，以下图看：

在上面蓝色加黄色的地方为下面左边<div id="divMain"></div>这个模块里包含的东西所在的位置。id="divMain"是一个标签，它对应css里的#divMain（见右边红圈）。其中黄色部分表示在右边红圈里的margin:0.618em 0;，也就是这个div模块和其它模块的距离。至于最右边的蓝色加粗的style.css (第 39 行)表示这个css代码所在的文件和文件里的位置，至于这个文件的具体地址，右击点复制地址再黏贴出来就看到了（当然可以选在新窗口打开）。

随便改改吧，让好奇心泛滥点。双击右边还可以加一行css，试下加个color颜色，是不是觉得有点意思呢。

至于这些css具体是啥意思，这里就不说了。先随便打开任意网站，改padding、margin、color、background等等等等（firebug输入一个单词会自动给出对应的css代码全名，只要有就会出现，所以别担心不知道输入啥，再不行把26个字母都过一遍，总有货的），把这些操作逐渐熟悉吧，让好奇占第一位，才能有下一步的解答。否则，没兴趣的话也就不用继续学了 ^_^