经过前四篇教程，相信大家对CSS有了一个简单的认识，但真面对一个复杂的网页，要怎么开始我们的DIV+CSS之旅？本篇给一些思路。

　　从大到小，从全局到细节，开始一个网页的CSS编写，切勿一开始考虑细节，应该从大的部分先开始进行布局，例如我们有一个如下图的网页：

　　简易教程一口气写到了第四篇，在这一篇，主要介绍一些入门级的小技巧。

一、垂直居中：
　　设置单行文字居中，一般设置行高为对象高度，例如：

　　一些常见的CSS语法，介绍给初学者，如果你已经是高手可以跳过。首先，你应该在网上找一份 CSS2.0的中文手册，用来速查各种语法的含义和属性，如果手册上的解释你看不明白，多请教baidu。

一、字体：
1、font-family：字体定义，推荐在body中定义默认字体，多个字体按优先顺序排列，用“，”号隔开。例如：font-family:"Arial","MingLiU","PMingLiU";

2、font-size：字体大小，推荐在body中定义默认字体大小，注意单位（pt、px等）。例如：font-size:12px;

3、color：字体颜色，推荐在body中定义默认字体颜色，例如：color:#333333;

4、font-weight：字型，例如粗体字：font-weight:bold;

二、宽度、高度与边框：
1、width：宽度，值可以是象素也可以是百分比，例如：width:300px;

2、height：高度，值可以是象素也可以是百分比，例如：height:30px;

3、border：边框，扩展语法：border-top、border-left、border-right、border-bottom，例如：border:#D1D7DC 2px solid;灰色2象素实线边框；

三、定位：
1、margin：对象基于父对象的距离，扩展语法：margin-top、margin-left、margin-right、margin-bottom，例如：margin-top:10 px;对象基于父对象顶端10象素，margin:0 auto;在FireFox下有居中的作途；

2、padding：对象中子对象的距离，扩展语法：padding-top、padding-left、padding-right、padding-bottom，例如：padding-top:10 px;对象中子对象距离顶端10象素；注意：padding会影响对象宽度或高度；

四、布局：
1、float：取值 none | left | right ，默认值对象不飘浮或流向对象左边或右边，例如：float:left;

2、clear：取值none | left | right | both ，默认值允许两边都可以有浮动对象或不允许左边、右边、两边有浮动对象，例如：clear:both;clear一般配合float使用；

五、背景：
1、background-color：背景颜色，在调度时我们会使用设置背景颜色的方法来查看DIV的情况，例如：background-color: #EEEEEE;设置了一块灰色背景；

2、background-image：背景图片，例如：background-image: url(. ./. ./img/home/search.jpg);url后的括号里可以是图片的绝对路径，也可以是基于CSS文件的相对路径，不要加引号；

六、连结定义：
1、CSS中用四个伪类来定义连结的样式，分别是：a:link、a:visited、a:hover和a:active，以上语句分别定义了"连结、已访问过的连结、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

2、text-decoration：文本修饰，none : 默认值。无修饰，blink: 闪烁，underline:下划线，line-through:贯穿线，overline:上划线 ，在连结的CSS定义中我们使用最多的是下划线；

六、其他：
1、text-align：对象中文本的对齐方式，left:默认值。左对齐，right:右对齐，center:居中对齐，justify:两端对齐；

　　在简易教程（二）里，我主要介绍一些CSS的基础知识。

一、CSS样式文件中 ID 与 Class（类）的区别：

　　在HTML使用CSS时，我们会发现有两种 CSS 的定义方法，一种是 ID，一种是 Class，例如：


　　那 ID 与 Class 有什么区别呢？

　　一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"，class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的 Class。
　　
　　至于ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

　　简单说，Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

　　在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。

　　类和ID的另外一个区别就是：ID对元素的定义优先权要高于类。

　　公司TB事业部最近在开发17xx项目，我指导了其中的CSS架构部分，针对开发中的工作标准化，我决定写一系列CSS简易教程，此教程主要用于公司内部的基础培训和统一开发标准，如果能帮助到各位网友欢迎大家转载。

一、CSS工具：

　　在准备编写CSS前，推荐准备以下两个工具：

１、TopStylePro：

　　这是一个CSS的编辑器，有很好的CSS语法提示功能，可以辅助我们的CSS编辑过程，目前版本是 3.2。



2、FireFox 插件 FireBug：

　　做为FireFox一个插件，FireBug功能很强大，主要用于调试CSS，在参考别人网站的CSS样式时，使用FireBug来查看源码也是一个最好的选择。