【教学过程】
【引入】出示刘谦图片，引入小魔术。师生互动小魔术：由学生打开魔盒的链接，分别为彩色网页、灰色网页、恢复为彩色网页。
[引导]魔术的关键是哪呢?原因教师给学生看的页面是不同的页面。
[魔术解密]打开jiemi文件夹中的color.htm以及gray.htm，比较body部分的不同。
在灰色页面的body标记中多了style="filter:gray"
【新授】一、嵌入CSS
[格式] <标记名称 style=“样式属性:属性值；样式属性:属性值...”>
[说明]将CSS代码嵌入到标记中的形式，即为嵌入式，作用范围只限于本标签。
[任务一]打开EX1文件夹中的fyzb.htm，完成以下嵌入样式,并保存
基础练习：使用样式表使“飞越梦想”下面单元格中的文字变为10pt
扩展练习：在标题图片中嵌入样式，使图片外观发生改变。所用样式filter:alpha (style=参数值),参数范围1~3，观察图片的变化。
CSS属性参考表
| 属性名称 | 属性 | 属性值 |
| 滤镜 | filter | Gray(变灰) |
| Alpha(opacity=参数值，style=参数值) | ||
| 字体 | font-family | 所有字体，如”宋体” |
| 字号 | Font-size | 具体数值，如10pt 就是指10磅 |
| 颜色 | color | 颜色的英文名或具体数值，如red或"#FF0000" |
[引导]如果要把网页中所有单元格中的文字都变为10pt,你会怎么做？
[学生]在每个标记中逐一嵌入。
[教师]这样将产生大量的冗余代码，将这些代码提取出来，在头部定义。
二、内联CSS
[格式]在头部<head></head>定义样式内容
<style type=”text/css”>
Td{font-size:10pt}
</style>
[任务二]打开EX1中的fyzb.htm
基础练习：使用内联样式，使所有单元格字号为10pt,字体为隶书。
进阶练习：使用内联样式表使超链接外观发生变化，样式代码已保存在c1.txt文件中。
[学习前指导] 教师带领学生解读超链接的三种状态：
a:link 常态
a:hover 鼠标经过
a:visited 访问后
[引导和讨论]怎样使网站中所有页面都拥有相同整齐划一的外观？（隶书，10磅，C1超链接样式），是否在每个网页中都复制内联样式？
三、外联样式表
[格式]把样式定义成一个*.CSS文件，
在头部用以下代码 <link rel=”stylesheet” href=”*.css”> 使样式生效。
注意：*.css必须与网页文字存放在同一个目录内。
[任务三]打开EX1文件夹,
基础练习：利用外联样式表使其他五个页面与主页面拥有相同的外观（单元格文字10pt,隶书，超链接样式c1）
进阶练习：怎样使每个页面超链接外观改为“鼠标指向链接文字时背景为黄色”. （修改C1.css）
【生总结】
1、样式表有哪几种形式？各自的作用范围如何?
嵌入(标记)
内联(单个页面)
外联(多个页面)
2、利用CSS样式表可以对网页设置哪些样式?
3、使用CSS样式表对制作网站方面体现哪些优势?
关闭窗口
打印文档
