Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第5讲次 任务6 标记选择器和类选择器.docx

教案

序号：5

授课日期

课时数

4

章节名称

任务6标记选择器和类选择器

教学内容

重点

CSS样式规则、标记选择器、类选择器。

难点

CSS样式优先级。

教学目的与要求

1.掌握CSS的基础选择器，学会CSS的定义方法。

2.掌握CSS的引用方式。

3.理解CSS的优先级，学会编写复合选择器。

教学方法

与手段

教师采用任务驱动法，使用教学PPT辅助授课。

教师操作演示，学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题，通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

（任务6标记选择器和类选择器

6.1知识准备

6.1.1CSS简介、6.1.2CSS样式规则、6.1.3CSS样式的引入）

实操任务目标发布

制作“美化文章”页面

图5-SEQ图\*ARABIC\r11“美化文章”网页

强化训练——制作图文混排网页

图5-SEQ图\*ARABIC

图5-SEQ图\*ARABIC2“图文混排”网页

准备知识介绍

CSS简介

HTML5负责网页结构，CSS3负责网页样式

CSS的优势：CSS控制网页的外观可以实现结构与表现的分离，由CSS样式设计的网页，具有条理规范、布局统一、容易维护等优点。

CSS的4个版本：CSS1、CSS2、CSS2.1、CSS3

CSS样式规则

一个CSS样式表由若干样式规则组成，每个样式规则都可以看作是一条CSS的基本语句，每个规则都包含一个选择器（例如body、p等）和写在花括号里的声明，这些声明通常是由几组用分号分隔的属性和值组成。

格式：选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

例如：设置p标签内文字大小为18px，颜色为蓝色

——p{font-size:18px;color:blue;}

CSS样式的引入

行内式

通过HTML5标签的style属性来设置元素的样式

语法格式：

标签名style=”属性1:属性值1;属性2:属性值2;属性3:属性值3;”内容/标签名

子任务：行内式样式的使用

图5-SEQ图\*ARABIC3行内式样式的使用

内嵌式

将CSS样式集中写在HTML文件的head/head中，并定义在style/style标签之间。

语法格式：

head

styletype=”text/css”

选择器{

属性1:属性值1;

属性2:属性值2;

属性3:属性值3;

}

/style

/head

子任务：内嵌式样式的使用

图5-SEQ图\*ARABIC4内嵌式样式的使用

链接式

将所有的CSS样式代码单独放在样式文件（扩展名为.CSS）中，通过link标签将样式文件链接到HTML文档中。link标签可以放置在head/head标签之内的任意位置。

语法格式：

head

linkhref=style.cssrel=stylesheettype=text/css

/head

子任务：链接式样式的使用

图5-SEQ图\*ARABIC5链接式样式的使用

第二学时

（任务6标记选择器和类选择器

6.1知识准备

6.1.4CSS样式的优先级、6.1.5标记选择器、6.1.6类选择器）

CSS样式的优先级

优先级关系：行内样式内嵌样式链接样式

标记选择器

用HTML标签名称作为选择器，用于更改页面中某一类标签的默认样式

语法格式：

标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

子任务：标记选择器的使用

图5-SEQ图\*ARABIC6标记选择器的使用

类选择器

类选择器：更加自由的定义和使用样式

语法格式：

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

应用方法：

在标签内添加“class=类名”才能应用，如：class=p1（p1为类名）

子任务：类选择器的使用

图5-SEQ图\*ARABIC7类选择器的使用

注意事项：

类名的第一个字符不能使用数字，而且区分大小写，一般情况下用小写字母。

类选择器的优先级大于标记选择器，当某个元素同时满足上述两种选择器且样式设置有冲突时，将显示类选择器中定义的样式。

第三学时

实战演练——制作“美化文章”网页

案例描述：设计并制作美化文章页面，网页效果如下。

图5-SEQ图