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

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案05 《向项目中引入CSS》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案05 《向项目中引入CSS》.docx（9页珍藏版）》请在优知文库上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备

2、，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务向项目中引入CSS3授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索质目标：1,培养学生红色精神:2 .提升学生思

3、想道谯本质和社会主义核心价值观.知识目标：1.笔抿CSS3的外部伴式、内部样式与行内样式:3 .掌握CSS3的语法规则：4 .笈握CSS3的基地选择器、层次选择器、结构伪类选择襁.属性选择零能力目标：1,掌握使用表CSS时文本、字体样式内容的美化：5 .掌握使用急乎乎选择器进行页面元素选择查找：6 .掌提使用岛级选择器进行页面元素的选择查找.被学内容1. CSS3概述2. CSS3基础语法3. CSS3的进入方法I.CSS3基础选择器5. CSS3高级选择器6. CSS3选择器权重M点充点找学血点:1. CSS3的三种引入方式及特点对比、优先级2. CSS3的基础选择涔及优先级3. CSS3的

4、高汲选择器、高级选择器的分类与使用教学难点：1.CSS3选择器权重的计算教学方法谈论法、讲授法、演示法、练习法素材0文本素材实物展示PpT幻灯片口者颈素材（Z1.视频素材回动向素材0图形/图像素材口网络资源口其他课后作业任务一：总结提升任务二:能力进阶教学反思注：教案按授课次数填写,每次投深均应填写一份本表.重复班投课可不另填写教案.教学过程及内容注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师：在经过施面几个单元的学习中，掌握了HTM1.进行页面内容框架的开发,那我们能开发出例如,学习强国、人民网.京东商城.脚易新闻.QQ空间等，具有独特效果的网站了么？答案自然是不能，我

5、们使J1.JHTM1.仅能开发出以内容为主,有少盘文本样式效果的页面，早己不能满足现在的产品设计需求.而页面中华网的、个性的、炫酷的效果.需要借助CSS提供的能力.CSS正是网页三剑客中,负贪页面展示效果的重要部分.在新云课堂项目中，我们已羟完成部分内容，仅有HTM1.5蚊认的显示效果,还不够吸引用户。我的将在本明元开始,通过CSS的引入,来美化项目.二、新知识点、技能点讲解【的X分花】新课讲解1：【约20分钟】教师；的着HTM1.的成长.为了满足页而设计者的要求.HTM1.添加了很多显示功能,但是随昔这些功能的增加,HTM1.变的越来越杂乱,而且HTM1.页面也越来越膨肿.于是CSS便诞生了

6、，CSS,英文全称是CascadingSty1.eSheeIS,中文名为层无杆式单或级联样式单.这里的级联或层费的含义为.可以对同一元素做多次的表现样式进行谀定，这些样式之间存在一定的权曳等级逻辑关系,权重或级别最高的会对G线的去现样式进行由写泣染.在由HTM1.、CSS.JavaScript组成的网页三剑客中,CSS主要负货网页的表现标准，包括页面风格、字体样式、排列方式、持版布同和少部分简单的动画与切换效果.学生：那如何使用CSS呢？教师：那我们先从CSS的基础语法来学习-CSS由选择器和样式上两部分组成.其中使用成对的/*”与*/”符号作为注杼符：选择零（广这里是注称说明/样式属性I:样

7、式值I：样式属性2:样式值2:花括号外为选和器部分，用来决定相邻的样式表对页面中的哪些HTM1.元素内容产生效果.花括号内为样式表部分田至少一组雄值对组成键名与键值使用日号隔开：每条样式属性的结尾使用分号结束.样式展性就是用来设定表现方式的。花括号用来包援样式属性，被包援的样式施性,则用来修饰该花括号开始部分紧邻的选择器所对陶的全部份HTM1.元素内容.花括号的开始却分写在对应选择器的紧邻右恻并JR面跟随换行，对应的样式属性使用2个或4个空格符，作为缩迸的内容。每行只写一个样式属性键值对.花括号的结尾部分,新起一行,与选择潺垂直缩进对齐.CSS是如何同合HTM1.进行页面关化的.CSS的使用共

8、有3种方式：内部样式、外部样式、行内样式.内部样式:通过位于HTM1.的head标签中的sy1.e标签来引入CSS样式。sty1.e标签为双标记标签，在标签内容部分按照CSS语法书用本页面内生效的样式内容type机性告知浏览器内容格式,HTM1.5标准中推荐省略IyPe属性。（案例演示）行内样式I通过HTM1.的S1.yie属性的方式,来引入CSS样式内容.这里需要注意作为元素的StyIC属性的Gi的内容只行CSS样式娓性.并无选择器，因为此种方式的写法,只能给StyIC所在的元素添加CSS样式,同时支持添加多条CSS样式，须同时和载Sty1.e的属性做中，好潮样式屈性之间用分号分隔，最后一个

9、分号省略。（案例演示）外部样式：通过位于HTM1.的head标器中的Iink标签来引入外部CSS样式文件，通过href属性来设定要引入的CSS文件路径，IyPC属性告知浏览器文件格式,其中rd属性不可行略，Iype属性推荐省略。（案例演示）新课讲解2：【约20分钟】教师：我们在页面编写中，应该用哪种方式进行样式的引刖呢？实际上页面元素最终的样式即为多个样式的小加效果。但这存在一个问遨当同时应用上述的三类样式时，页面元素将同时继承这此样式，但样式之间如有冲突,应继承哪种样式？这就存在样式优先级的问题.我们大胆猜想一下,；.种引入优先级哪一种更高，哪一种更低？学生；（各种猜想放舶我的未通过案例来了

10、解，他们的优先级是如何排列的.我们在案例中，使用三种样式引入方式来而内容的h1.标签设定不同的颜色样式.然后在外部样式表和内部样式表中可对h4标签设定不同演的字体颜色.I入S先*何*+CQ127.1.884aNOCnewfi1.e.明立义：北京欢迎你歌手：刘欢.（演示过程）你是否能看出其中的过规律呢？调整内部外部样式，都不影响h1.标签的颜色为愤色，则可以推出行内样式的优先级最高：调整内部外部样式，h2的颜色会受到影响，该元素没有行内样式只受到内外样式引用位置的先后影响.其实质是外部引用相当于将外部文件复制到引用的1.ink标签位置，从而变为一个内部样式,而对h2使用了相同的选择器方式设定样式

11、，则后设定的样式眼盖之前的样式,其引用优先级如下：行内样式内部样式表外部样式表.需要引起足够注意的是.这里的优先级仅仅是表示在选择湍相同而引用方式不同的情况下，因引用方式不同而带来的权史优先区别.实际中影响样式优先级的还有选择器权JR的影响，嫉终结果由两者共同决定，我们会在梢后的部分，再讨论媒合情况卜的优先级权重问题,为了便于记忆基础选择器优先级的特点，我们总结了一个简单的判断方法.“就近原则，如果同一个选择器中样式声明层扑，距离被修饰元素最近的样式会双终生效。新课讲斛3：【约15分钟】教师：CSS语法中的垂要的两个剖分之一,选择器地川来决定相邻的样式友对页面中的哪生HTM1.元素内容产生效果

12、，CSS中我们讲选择零分为了堪咄选持器和高级选择器。权础选样器是构成高级选择满的基础成员.基础选择湍行标签选择渊、c1.ass选择零、K1.选择密.这里我们再补充一个通配符选择器.元素选择器：也叫做标程选和器，摊种HTM1.标签的名称都可以作为相应的标签选择器的名麻，该选择据会兀配页面中所有该类型的标签元素.元次选择隔也叫做标签选择器.何由HTM1.标线的名称都可以作为相应的标签选择器的名称.该选择涔会匹配页面中所仃该类型的标签元素.id选择潺：通过与HTM1.元素中的id属性值进行匹配,从而指定对应的样式进行演架.使用符号配合id届性位进行去示,在一个页面中id的属性值不能产生重复。c1.a

13、ss选择器：通过与HTM1.元素中的c1.ass属性值进行匹配,从而指定对应的样式进行演柒。使用”符号配合c1.ass施性值进行表示,在一个页面中c1.ass的屈性侪可以产生重复.互为不同的选择器，那所对应的优先级权重又是如何？璃础选择器优先级遵循ID选择器c1.ass类选择播标签选择器的优先顺序.我们招在本单元的最后详细的说明权笊问遨.大家跟着我一起完成练习案例.新课讲解4：【约IS分钟】敦师：选择器是CSS中一个JE要的内容，一般大型网站中样式表可能到达成百上千行，如果只是用基础选择器,样式之间只有一一对应关系,当箭要对样式表进行修改的时快，要做的工作麻极大：的单是添加一条样式，可能名c1

14、.ass版性的命名想要不冲突都是件非常困难的事情又如果当样式与样式之间有了一定的关联时，由很难从对应的CIaSS期性中得到结构化的逻辑关系.所以就需要借助将联础选择器按照一定关系条件构造祖成的高线选杼器,1.图是用户进行登录的一个流程模拟.表单的执行原理是用户通过脚络提交表单给服务器,等待服务器反馈.层次选择器：通过描述基础选择器之间的层次关联关系，来确定要匹配的元素.其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟等几种关系，通过它们之间的关系就可以快速选定衢要的元素。层次选齐器是一个非,落好用的选择器，选择零语法公式功能解择后代选择器EF选择匹配的F元索，且匹配的F元素被包含在巩配的E元

15、素内子选择器EF选择匹配的F元素，旦匹配的F元素毡匹配的E元素的子元素相邻兄弟选择擀（CSS3新增）E+F选择匹配的F元索，且匹用的F元素紧位于见配的E元素后面迪用兄弟选择器（CSS3新增）EF选择匹配的F元素，且匹配的F元素是位于匹配的E元素后的同级元素新课讲解5：【约30分怦】教师：在HTM1.5中如何进行验证？这里主要/解以下几种方式.P1.aCChOkter属性用于为input类型的文本框提供一种提示hint).这种提示可以描述文本框期待用户输入何种内杵.在输入为空时显示,当在文本框中写入内容时消失，P1.aCehOIderM性适合于input标短；1.exi、searchuri、e11ui1.和password等类型.required属性用于规定文本