教案
序号：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图