基础篇
[知识一] “DIV+CSS” 的叫法是不准确的
[知识二] “DIV+CSS” 将你引入两大误区
[知识三] 什么是W3C标准？
[基础一] CSS如何控制页面
[基础二] CSS选择器
[基础三] CSS选择器命名及常用命名
[基础四] 盒子模型
[基础五] 块状元素和内联元素
实战篇
[第一课] 实战小热身
[第二课] 浮动
[第三课] 清除浮动
[第四课] 导航条(上) | 导航条(下)
[大练习] 前四节课大练习
[第五课] 浮动布局之结构设计 | 浮动布局之表现设计
[第六课] 定位
[第七课] 定位应用
[第八课] CSS Hack
技巧篇
[单张图片按钮实例]
[首行文字两文字缩进]
一般我们做按钮基本上都需要两张图片，一张正常状态的图片，一张按下去效果图片，做这种按钮思路就是，设置链接a的背景为第一张图片，a:hover的背景为第二张图片
代码如下：
HTML代码：
<a href="#" id="theLink"></a>
CSS代码：
#theLink{
display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和height才起作用*/
width:120px;
height:41px;
margin:0 auto;
background:url(../images/normal.gif) no-repeat;
}
#theLink:hover{background:url(../images/press.gif) no-repeat;}
源代码： 两张图片按钮的源代码.rar (6.18 KB, 下载次数: 1055)
=========================================================
这节课，主要给大家介绍第二种思路，其实也很简单，首先我们将上面的两个图片合并成一张图片，如下：
其次，将上面的图片设置成按钮的背景，最后，将a:hover的背景向上移动41个像素就OK了
HTML代码：
<a href="#" id="theLink"></a>
CSS代码：
#theLink{
display:block;
width:120px;
height:41px;
margin:0 auto;
background:url(../images/buttonBG.gif) no-repeat;
}
#theLink:hover{background:url(../images/buttonBG.gif) no-repeat 0 -41px;}
这种图片整合技术，就是CSS Sprites，也就是CSS精灵！
学到这里，大家是不是可以把[第七课] 定位应用的例子用CSS Sprites实现呢？
源代码： 单张图片按钮的源代码.rar (5.4 KB, 下载次数: 1296)
记得过去刚开始学习制作页面的时候，要想让一段文字首行缩进两个文字，如下图:
总是在前面加上8个“ ”，因为过去大家对CSS不熟悉，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，代码显着比较乱，现在我们实现这种效果就简单多了，直接在CSS代码中加入
text-indent:2em;
就很容易实现文本段落的缩进~
text-indent:2em;
解释一下：text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位；
em又是什么单位？
em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字的高度，就等于缩进两个文字的宽度，最后的效果就是缩进了两个文字。
【说明一点】
对于"text-indent:2em;"属性，只能加在块状元素上面，内联元素是不起作用的。
源代码： 文本缩进.rar (68.34 KB, 下载次数: 545)