第8章 CSS+DIV高级应用教学指南

一、教学目标

通过本章的学习，学生应达到如下基本要求：

1. 熟悉CSS样式设置中常用的单位；

2. 掌握控制文字、文本、背景、色彩、列表等样式的属性及设置方法；

3. 理解CSS盒子模型；

4. 掌握边框、边界、填充及内容等属性及设置方法；

5. 学会使用CSS+DIV进行页面布局。

二、本章提要

本章主要介绍了CSS的样式属性，包括文字样式、文本样式、颜色、背景、列表等，其中有些属性是复合属性。从不同方面描述网页特定信息的外观样。既可以使用单个子属性定义某一方面的样式，也可以使用复合属性定义整体的样式，在使用时应注意属性与属性之间的顺序及制约关系。

本章也介绍了CSS Box模型，它是CSS的精华，同时也是学习的难点。如果把页面元素以“盒子”的方式呈现，那么便有了元素边界(margin，也称为外边界)、元素边框(border)、填充(padding，也称为内边界) 、元素内容(content)这些重要概念。盒子具有4条边，所以这些属性都各有4个单边子属性，在使用时可以直接对某一条边应用单边子属性设置其样式，也可以按照一定顺序依次设置各边的样式，设置方式比较灵活。

通过实例详细介绍如何借助CSS+DIV技术进行页面布局。首先应将页面进行合理分区，设计出各个div块，理清div的嵌套和层叠关系；接着根据样式需要，选择适当CSS定义方式及适合的选择器；然后应用盒子模型，写出相应CSS规则；最后应在浏览器中运行查看效果，注意不同浏览器对有些CSS代码的兼容性。

三、本章重难点

本章重点是掌握CSS属性命名规范、CSS的字体、文本、颜色、背景、列表等样式属性的设置方法。熟悉每种属性的取值情况。

掌握CSS的常用单位，分为绝对单位和相对单位，一般建议使用em或px。

本章难点是如何理解CSS Box模型，并能熟练地加以应用。掌握margin、border、padding三个复合属性多种属性值的设置方法。掌握复合属性取四个值时分布规律，按顺时针方向分别表示上(top)、右（right）、下（bottom）、左（left）部分的取值。其它取值情况表示方法为三个值（上、右左、下）、二个值（上下、右左）、一个值（上、右、下、左均相同）。

*四、教学过程（可选）

    包括内容、授课过程、课堂练习、教学总结、作业、预习。

五、教学参考内容

    1．理论教材第8章课后练习与实验中的练习8与实验8。 

    2．实验教材实验五中项目1、项目2。

3．教材配套PPT。

4．网络教学平台上测验。