HTML5+CSS3+JavaScript Web 前端基础教程电子教案 单元 5 CSS3 基础.docxVIP

PAGE1

PAGE

单元5CSS3基础

课程名称

HTML5+CSS3+JavaScriptWeb前端基础教程

项目名称

CSS3基础语法与样式应用

任务名称

CSS3样式引入与选择器、基础属性使用

课时

4

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

知识目标

1．了解CSS3的概念与作用，掌握三种样式引入方式（内联、内部、外部）；

2．掌握CSS3基础选择器（标签、ID、类、后代）与优先级规则；

3．熟悉CSS3复杂选择器（子元素、相邻兄弟、伪类、属性）的应用；

4．掌握CSS3基础属性（尺寸、背景、超链接样式）的配置。

能力目标

1．能够使用不同选择器为网页元素设置样式；

2．能够配置元素的尺寸、背景颜色/图片、超链接状态样式；

3．能够完成仿写淘宝首页顶部导航与搜索框的样式开发。

素质目标

1．培养样式与结构分离的开发思想；

2．养成规范的CSS语法书写习惯；

3．提升网页视觉设计的审美能力；

教学内容

1.任务描述：掌握CSS3基础语法与样式应用，完成仿写淘宝首页顶部导航与搜索框样式开发；

2.任务展示与实现：

（1）教师演示CSS3引入方式、选择器用法与基础属性配置；

（2）学生动手为HTML网页添加样式（如背景、文字颜色、超链接状