web前端开发知识点2：伪类选择器电子教案.doc

山东理工职业学院单元教学过程设计首页

课程所属院（部）：软件工程学院 2016 2017学年 第二学期

课程名称

《Web前端开发》

任课教师

单元标题

CSS3中的新增选择器

上课地点

8208微机室

学时

2

授课班级

授课时间

第 周

第 周

第 周

第 周

第 周

第 周

星期

星期

星期

星期

星期

星期

第 节

第 节

第 节

第 节

第 节

第 节 月 日 月 日

月 日

月 日

月 日

月 日

教学目标

能力目标

知识目标

1. 掌握使用CSS3中的新增选择器设计页面；

1. CSS3中的新增选择器：伪类选择器、属性选择器、伪元素选择器的类型及使用方法

教学任务

1. 掌握CSS3中的新增选择器：伪类选择器、属性选择器、伪元素选择器的类型及使用方法

2. 掌握使用CSS3中的新增选择器设计页面

教学重、难点

重点：伪类选择器、属性选择器、伪元素选择器的类型及使用方法

难点：用CSS3中的新增选择器设计页面

教学材料或用具

教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室

课后任务

网页制作软件对比

山东理工职业学院单元教学过程设计

步骤及时间

教学内容

教师活动

学生活动

5分钟

5分钟

20分钟

30分钟

25分钟

5分钟

【组织教学】

1、检查学生出勤，作好学生考勤记录。

2、课堂提问，了解学生掌握所学知识情况。

3、强调课堂纪律，加强互动，活跃课堂气氛。

【课题导入】

前面我们学习了CSS3的基本选择器和复合选择器，现在我们接触一下CSS新增的选择器。

【讲授新课】

13.5 CSS3新增的选择器

13.5.1 属性选择器 通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。

为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。

选择器

说明