授课教师：牟勇

课时：100分钟

l  本章技能目标

n 会创建统一外观的字体文本

n 会创建无下划线的超连接样式

n 会创建个性化的表格

n 会创建个性化的表单

l  本章重点

nCSS语法规则

nCSS常用属性

l  本章难点

n会创建个性化的表格

n会创建个性化的表单

l  本章工作任务

u  美化“宝贝分类”页面

u  制作并美化“注册”页面

l   整章授课思路

n本章共有共有三个知识点：CSS语法规则，CSS用法，CSS常用属性

n因为4.0的学员在S1就已经学习过CSS，所以CSS语法规则部分可以采用回顾的方式来进行。

nCSS用法依然可以采用回顾的方式进行。

nCSS属性重点讲述边框属性。

n教员应多与学员互动，让学员参与课堂教学过程，及时进行鼓励和表扬，增强学员自信心。

回顾:   [5分钟]

表单中提交数据的方法有那两种及其区别？

创建一个登录界面需要哪些表单元素？

target属性取值可以为哪些及其含义？

预习检查:   [5分钟]

简述样式表的基本结构？

常用的样式属性有哪些？

课程知识点讲解：   

CSS样式表规则：[10分钟]

为什么需要CSS样式表

答案：HTML可以对网页进行描述，但是离做出漂亮的网页还差很远，另外，通常网页内容和网页的外观是由不同的人来完成的，如果都使用HTML会造成冲突。而如果外观使用CSS来完成就可以解决这个问题，另外，由于网页的内容和外观进行了分离，也就让我们可以实现同样的内容用不同的外观来显示，大大提高了网页的变化，降低了网页维护成本。

样式表的基本语法

提问：我们在S1的时候就已经学习过了CSS，现在谁来说说，样式表的基本语法？

答案：

选择器名{

    属性:值;

}

提问：样式规则可以分为哪几类？

答案：HTML选择器，class选择器，id选择器。

出示静夜思案例：

首先让学员猜测使用了什么标签使字体变成了红色？之后让学员看到HTML代码，里面并没有什么特殊的标签，只是p，那字体为什么会是红色的呢？指出是使用了HTML选择器，使p的样式发生了改变，并说明，所有的p都将受到样式表规则的影响。

问题：如果希望某几个p元素的样式不同于别的p，怎么办？

答案：类选择器。

问题：如果希望某个p元素的样式独一无二，怎么办？

答案：ID选择器

CSS三类应用方式：[20分钟]

引入：我们知道了样式表的写法，直接下来，我们怎么应用它们呢？

分类：

行内样式，内嵌样式，外部样式表

行内样式：

问题：如果希望某段文字和其他段落文字显示风格不一样(并且这个样式不会再其他地方反复使用了)，如何解决？

答案：行内样式

写法：使用style属性

教员应说明：行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用

内嵌样式：

问题：如果我们希望一个网页内的样式保持一种风格，如何解决？

答案：内嵌样式。

写法：使用<style>标签

教员应说明：所有的段落都采用 P 样式，保证样式统一

外部样式表：

问题：如果我们希望一个网站内的所有网页都保持一种风格，我们又应该怎么解决？

答案：外部样式表。

写法：首先需要一个外部样式表文件(通常使用.css后缀)，外部样式表文件的写法与内嵌样式的写法没有大的区别，不需要写<style>标签。其次，我们需要在网页中导入外部样式表。

根据关联的方式可以分为两种：链接(<link>)和导入(@import)

链接的写法：

教员应强调三个属性的作用和写法。

导入的写法

教员应强调：@import的结尾后需要加分号(这是学生很容易犯的错误)。

另外，教员应推荐学员使用@import，因为对于一些CSS支持不好的浏览器(主要指旧版本的浏览器)来说，它们会不支持@import，这样仅只是使外部样式表失效，而不至于把版面搞得很糟糕，甚至造成重要内容无法显示的情况。

CSS常用属性[50分钟]

引入：我们现在已经了解了样式表的语法，还有使用样式表的三种方式。通过前面的讲述，我们可以看出，写样式表，其实就是写它的各种属性。那样式表的常用属性有哪些？它们又有什么用处？我们一起来看一下。

文本属性

教员应强调：P用作整体样式的定义，而class样式用作特别需要强调的样式定义。并且强调class样式的名称应该以这个样式的作用来命名，而不应该以这个样式是什么样子来命名(以功能来命名，而不是根据颜色，位置等来命名)。

小结1：

编写如下图所示效果对应的HTML代码

教员提供表格无样式的HTML，学员上机完成样式表。

背景属性：

教员讲解上面的关键代码，并说明repeat各个取值的含义。

方框属性：