基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第5讲次 任务6 标记选择器和类选择器.docx
文件大小:1.03 MB
总页数:8 页
更新时间:2025-05-27
总字数:约2.34千字
文档摘要

教案

序号: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图