css样式设置的教案

css样式的设置

【教学内容】

讲解网页设计的中的css样式的设置

【教学目的】

使学生理解并掌握css样式的设置，学会怎么样引用样式和常见的样式的设置。【教学重点】

Css样式的引用方法、类和id的定义的方法。

【教学难点】

Css样式的引用。

【教学方式】

讲授式、讨论式、案例分析式。

【教学参考】

1、《网页设计与制作》中职教育

【新课内容】

一、情景导入

首先引入我们平时在上网时，打开的浏览器看到的网页，这些网页美观，并且网页布局合理，然后简单的介绍这些网页是怎么做出来的，所用到的技术，然后引出今天要学的css样式，利用css样式来对网页进行布局和美化。

二、教学过程

1、样式的引用

老师在上面讲解样式引用有多少种方法，然后对每一种方法进行讲解：

（1）首先讲解内嵌样式的引用，老师在上面进行讲解内嵌样式的使用方法，老师在上面进行演示，学生在下面跟着老师进行操作，并且老师在上面边操作边解释，然后老师用一个实例来进行讲解即实例

这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。

（2）内部样式表讲解，老师然后把学生引到用另一种方法来进行设置样式，老师对学生说“我们也可以用另一种来进行样式的设置，下面我们来讲解内

部样式表”，老师先解释内部样式的概念，然后在上面进行演示操作，然后用实例来进行应用，老师在下面巡视指导

实例

（3）外部样式表：老师先给学生讲解外部样式的概念和用法，然后老师在台上进行演示并操作，老师在下面进行巡视指导学生操作，老师并讲解一个实例来

二、class和id的引用

（1）class的定义方法：首先老师引出刚才我们在样式的定义中，样式前为什么加一个点号，然后老师进行解释，并引出class类的定义，老师在上面进行边操作边解释使用方法和概念，并用让学在完下面的实例

用class方法来定义字体的大小，老师在下面进行指导。

（2）id的定义方法：<指定标签id="id名">,老师在上面进行讲解id的使用方法和概念，然后用一个实例来进行讲解，让学生在下面完任务，老师在下面进行指导学生操作

（3）标签样式的设置，老师讲解标签样式的设置与前两者之间有什么不同，进行对比区分，然后进行讲解标签的用法和概要，然后老师用一个实例来进行讲解，学生在下面进行操作，老师在下面进行指导。

【课后小结】

通过学习样式的引用、class和id的定义，使学生能掌握css样式中的样式的引用和使用，同时也让学生掌握样式的定义

【作业】

课后设计一个网页，主题自行定义。