HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案05 《向项目中引入CSS》

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时6授课日期教学任务《向项目中引入CSS》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生红色精神；2.提升学生思想道德素质和社会主义核心价值观。知识目标：1.掌握CSS3的外部样式、内部样式与行内样式；2.掌握CSS3的语法规则；3.掌握CSS3的基础选择器、层次选择器、结构伪类选择器、属性选择器。能力目标：1.掌握使用表CSS对文本、字体样式内容的美化；掌握使用急乎乎选择器进行页面元素选择查找；掌握使用高级选择器进行页面元素的选择查找。教学内容CSS3概述CSS3基础语法CSS3的进入方法CSS3基础选择器CSS3高级选择器CSS3选择器权重重点难点教学重点：CSS3的三种引入方式及特点对比、优先级CSS3的基础选择器及优先级CSS3的高级选择器、高级选择器的分类与使用教学难点：CSS3选择器权重的计算教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：在经过前面几个单元的学习中，掌握了HTML进行页面内容框架的开发，那我们能开发出例如，学习强国、人民网，京东商城，网易新闻，QQ空间等，具有独特效果的网站了么？答案自然是不能，我们使用HTML仅能开发出以内容为主，有少量文本样式效果的页面，早已不能满足现在的产品设计需求，而页面中华丽的、个性的、炫酷的效果，需要借助CSS提供的能力。CSS正是网页三剑客中，负责页面展示效果的重要部分。在新云课堂项目中，我们已经完成部分内容，仅有HTML5默认的显示效果，还不够吸引用户。我们将在本单元开始，通过CSS的引入，来美化项目。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS，英文全称是CascadingStyleSheets，中文名为层叠样式单或级联样式单。这里的级联或层叠的含义为，可以对同一元素做多次的表现样式进行设定，这些样式之间存在一定的权重等级逻辑关系，权重或级别最高的会对最终的表现样式进行重写渲染。在由HTML、CSS、JavaScript组成的网页三剑客中，CSS主要负责网页的表现标准，包括页面风格、字体样式、排列方式、排版布局和少部分简单的动画与切换效果。......学生：那如何使用CSS呢？教师：那我们先从CSS的基础语法来学习。CSS由选择器和样式表两部分组成，其中使用成对的“/*”与“*/”符号作为注释符：选择器

{

/*

这里是注释说明

*/

样式属性1:

样式值1;

样式属性2:

样式值2;

......}花括号外为选择器部分，用来决定相邻的样式表对页面中的哪些HTML元素内容产生效果。花括号内为样式表部分，由至少一组键值对组成，键名与键值使用冒号隔开；每条样式属性的结尾使用分号结束。样式属性就是用来设定表现方式的。花括号用来包裹样式属性，被包裹的样式属性，则用来修饰该花括号开始部分紧邻的选择器所对应的全部份HTML元素内容。花括号的开始部分写在对应选择器的紧邻右侧并后面跟随换行，对应的样式属性使用2个或4个空格符，作为缩进的内容。每行只写一个样式属性键值对。花括号的结尾部分，新起一行，与选择器垂直缩进对齐。CSS是如何配合HTML进行页面美化的。CSS的使用共有3种方式：内部样式、外部样式、行内样式。内部样式：通过位于HTML的head标签中的style标签来引入CSS样式。style标签为双标记标签，在标签内容部分按照CSS语法书写本页面内生效的样式内容，type属性告知浏览器内容格式，HTML5标准中推荐省略type属性。......(案例演示)行内样式：通过HTML的style属性的方式，来引入CSS样式内容。这里需要注意作为元素的style属性的值的内容只有CSS样式属性，并无选择器，因为此种方式的写法，只能给style所在的元素添加CSS样式，同时支持添加多条CSS样式，须同时卸载style的属性值中，每调样式属性之间用分号分隔，最后一个分号省略。......(案例演示)外部样式：通过位于HTML的head标签中的link标签来引入外部CSS样式文件。通过href属性来设定要引入的CSS文件路径，type属性告知浏览器文件格式，其中rel属性不可省略，type属性推荐省略。......(案例演示)新课讲解2：【约20分钟】教师：我们在页面编写中，应该用哪种方式进行样式的引用呢？实际上页面元素最终的样式即为多个样式的叠加效果。但这存在一个问题——当同时应用上述的三类样式时，页面元素将同时继承这些样式，但样式之间如有冲突，应继承哪种样式？这就存在样式优先级的问题。我们大胆猜想一下，三种引入优先级哪一种更高，哪一种更低？学生：......(各种猜想)教师：我们来通过案例来了解，他们的优先级是如何排列的。我们在案例中，使用三种样式引入方式来对内容的h1标签设定不同的颜色样式。然后在外部样式表和内部样式表中再对h4标签设定不同演的字体颜色。......（演示过程）你是否能看出其中的过规律呢？调整内部外部样式，都不影响h1标签的颜色为橙色，则可以推出行内样式的优先级最高；调整内部外部样式，h2的颜色会受到影响，该元素没有行内样式，只受到内外样式引用位置的先后影响，其实质是外部引用相当于将外部文件复制到引用的link标签位置，从而变为一个内部样式，而对h2使用了相同的选择器方式设定样式，则后设定的样式覆盖之前的样式。其引用优先级如下：行内样式>内部样式表>外部样式表。需要引起足够注意的是，这里的优先级仅仅是表示在选择器相同而引用方式不同的情况下，因引用方式不同而带来的权重优先区别。实际中影响样式优先级的还有选择器权重的影响，最终结果由两者共同决定，我们会在稍后的部分，再讨论综合情况下的优先级权重问题。为了便于记忆基础选择器优先级的特点，我们总结了一个简单的判断方法------“就近原则"。如果同一个选择器中样式声明层叠，距离被修饰元素最近的样式会最终生效。新课讲解3：【约15分钟】教师：CSS语法中的重要的两个部分之一，选择器。是用来决定相邻的样式表对页面中的哪些HTML元素内容产生效果。CSS中我们讲选择器分为了基础选择器和高级选择器。基础选择器是构成高级选择器的基础成员。基础选择器有标签选择器、class选择器、id选择器。这里我们再补充一个通配符选择器。元素选择器：也叫做标签选择器。每种HTML标签的名称都可以作为相应的标签选择器的名称。该选择器会匹配页面中所有该类型的标签元素。......元素选择器：也叫做标签选择器。每种HTML标签的名称都可以作为相应的标签选择器的名称。该选择器会匹配页面中所有该类型的标签元素。......id选择器：通过与HTML元素中的id属性值进行匹配，从而指定对应的样式进行渲染。使用“#"符号配合id属性值进行表示，在一个页面中id的属性值不能产生重复。......class选择器：通过与HTML元素中的class属性值进行匹配，从而指定对应的样式进行渲染。使用“.”符号配合class属性值进行表示，在一个页面中class的属性值可以产生重复。......互为不同的选择器，那所对应的优先级权重又是如何？基础选择器优先级遵循ID选择器>

class

类选择器>标签选择器的优先顺序。我们将在本单元的最后详细的说明权重问题。大家跟着我一起完成练习案例。新课讲解4：【约15分钟】教师：选择器是CSS中一个重要的内容，一般大型网站中样式表可能到达成百上千行，如果只是用基础选择器，样式之间只有一一对应关系，当需要对样式表进行修改的时候，要做的工作量极大；单单是添加一条样式，可能名class属性的命名想要不冲突都是件非常困难的事情。又如果当样式与样式之间有了一定的关联时，由很难从对应的class属性中得到结构化的逻辑关系。所以就需要借助将基础选择器按照一定关系条件构造组成的高级选择器。上图是用户进行登录的一个流程模拟，表单的执行原理是用户通过网络提交表单给服务器，等待服务器反馈。层次选择器：通过描述基础选择器之间的层次关联关系，来确定要匹配的元素。其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟等几种关系，通过它们之间的关系就可以快速选定需要的元素。层次选择器是一个非常好用的选择器。选择器 语法公式 功能解释后代选择器 EF 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内子选择器 E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素相邻兄弟选择器（CSS3新增） E+F 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面通用兄弟选择器（CSS3新增） E~F 选择匹配的F元素，且匹配的F元素是位于匹配的E元素后的同级元素......新课讲解5：【约30分钟】教师：在HTML5中如何进行验证？这里主要了解以下几种方式。placeholder属性用于为input类型的文本框提供一种提示（hint）。这种提示可以描述文本框期待用户输入何种内容。在输入为空时显示，当在文本框中写入内容时消失。

placeholder属性适合于input标签：text、search、url、email和password等类型。required属性用于规定文本框填写内容不能为空，否则不允许用户提交表单。该属性适合input标签：text、search、url、email、password、number、checkbox、radio、file等类型。pattern属性用于验证表单输入的内容，通常情况下email、tel、number等，已经自带了简单的验证，加上pattern就会更加高效。pattern的属性值为正则表达式。注意，该属性在具有novalidate属性的<form>元素内不生效。novalidate属性规定，当提交表单时不进行验证。如果使用该属性，则表单不会验证表单的输入。以上几种特殊属性中，pattern用来设定正则验证规则，是最灵活也是较难理解的。正则表达式是对\t"/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/_blank"字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”。起初是科学家研究出了一种用数学方式来描述神经网络的新方法，他们创造性地将神经系统中的神经元描述成了小而简单的自动控制元，从而作出了一项伟大的工作革新。本质上正则表达式是使用特殊符号表示一定匹配规则的字符串，用来进行内容比对。HTML5标准中提供了一种不借助js进行表单验证的新方式：文本类输入框中的pattern属性中存放开发者预先设定的内容格式的正则表达式，用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单，在提交表单时做出错误信息的反馈。关于正则表达式这里不做深入讲解，我们举几个例子，让大家在头脑中有初步的概念即可。示例：/^[a-z0-9_-]{6，18}$/分析：两侧"/"表示正则表达式的开始与结束，开始位置与^相邻构成了/^，表示正则表达式的匹配要求从目