HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案06 《使用CSS3美化页面》

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

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

《》教案授课教师班级学时6授课日期教学任务《使用CSS3美化页面》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生主动学习的能力，分析问题、解决问题的能力；2.培养学生职业素养和职业道德。知识目标：1.了解常用文字样式；2.掌握图文混排的对齐样式；3.掌握超链接的不同状态样式；4.掌握背景、背景图、渐变背景的样式设定。能力目标：1.使用CSS3样式进行常见页面样式的美化。教学内容CSS3文字样式CSS3文本样式CSS3超链接样式CSS3列表样式CSS3背景样式CSS3背景渐变样式重点难点教学重点：CSS3掌握图文混排的垂直对齐问题CSS3精灵图原理与应用CSS3背景渐变样式教学难点：CSS3掌握图文混排的垂直对齐问题教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：职业素养是人类在社会活动中需要遵守的行为规范。职业道德、职业思想、职业行为习惯是职业素养中最根基的部分。同学们学习HTML和CSS语法，要注意书写格式、合理添加注释、合理规划项目文件，这些都是合格的前端开发从业人员的基本素质。在理解CSS基本语法，使用选择器灵活的对要修饰的内容进行选定之后，我们的工作重心就要转向如何去修饰渲染我们的内容了。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约20分钟】教师：本单元将日常开发中常用的样式进行分类学习。从基础的文字样式设置开始，详细讲解使用CSS样式设置文字的各种效果，文字与图片的混排效果，使用CSS样式设置超链接的各种方式，最后讲解网页中背景颜色、背景图片的各种设置方法、列表样式的设置方法和渐变效果的设置方法。掌握了各种各样的样式美化方式之后，我们将在对新云课堂中的文本内容较为集中的几个页面部分，配合最常用的class选择器进行样式的美化。......学生：我想先对网页中的文字内容进行美化，黑色白底的网站太没有新意了，我应该如何进行？教师：HTML中，<span>标签是用来组合HTML文档中的行内元素的，它没有固定的格式表示，只有对它应用CSS样式时，才会产生视觉上的变化。......(案例演示)在CSS中，使用font-style属性设置字体的风格，使用font-weight进行字体字重的设定，使用font-family属性设置字体的类型，使用font-size设定字体大小。font方式可以同时完成上述多个样式的设定，font方式的简写形式，必须按照font-style、font-weight、font-size/line-height、font-family的顺序书写，否则浏览器无法正确识别内容。当需要同时设置英文字体和中文字体时，一定要将英文字体设置在中文字体之前，如果中文字体设置于英文字体之前，英文字体设置将不起作用。在实际网页开发中，网页中的文本如果没有特殊要求，通常设置为"宋体"；宋体是Windows系统中默认的字体，如果需要其他比较炫的字体则使用图片来替代。......(案例演示)新课讲解2：【约20分钟】教师：我如果要使用CSS把网页中的文本设置得非常美观和漂亮，该如何设置呢?这就需要下面的知识——使用

CSS排版网页文本。在网页中，用于排版网页文本的样式有文本颜色、水平对齐方式、首行缩进、行高、文本装饰、垂直对齐方式。常用的文本属性、含义及用法。学生：......(各种猜想)教师：color样式设定文字颜色。颜色的表示方式有如下几种：英文单词方式，如red、blue、green等，这种方式可以快速描述一些常用到的预设定颜色。十六进制方式，如#f00、#0f0、#00f等，这种方式依照颜色的现实的三基色方式，使用0-255的数字表示红绿蓝三种颜色的数值。#后面依次跟随的数字为十六进制表示的红绿蓝，通常后面所跟的数字为6位，红色则表示为#ff0000，这里的ff表示最大红色数值255，00表示绿色蓝色为最小数值0。当表示的颜色每一组的前后数值相同时，如#000000、#333333、#ffffff时，可以简写为其中一位：#000、#333、#fff。rgb()方式，同时也是依据三基色的数值方式进行颜色的表示。这里使用的10进制数进行表示，每一种颜色的取值范围在0-255之间，如rgb(255，0，0)表示红色。rgba()方式，在rgb()的基础上增加了透明效果，表示带有透明度值的RBG颜色表示方式。如rbga(255，0，0，0，5)，表示红色且具有50%透明度。a代表透明度，取值范围[0，1]之间，值为0时表示全透明状态，值为1时表示完全显示不透明状态。......（演示过程）在书写颜色值的时候，注意以下几点：1.通常在实际业务中不会使用英文颜色名的方式进行颜色定义，尝使用十六进制数的方式进行指定，并且使用小写方式；如果书写的颜色值满足#XXYYZZ（6位十六进制数满足从左向右依次每两各位一组，组内两数相同）形式条件时，使用简写方式#XYZ。如红色：#ff0000通常写作#f00;白色：#ffffff通常写作#fff。2.在一个项目中不论使用哪一种方式进行颜色值的设定，通常在项目中要求统一书写方式，在项目开发前沟通商定。文本水平对齐：在CSS中，文本的水平对齐是通过text-align属性来控制的，通过它可以设置文本左对齐、居中对齐、右对齐和两端对齐。line-height的属性值与font-size的属性值一样，也是以数字来表示的，单位也是px。除了使用像素表示行高外，也可以不加任何单位，按倍数表示，这时行高是字体大小的倍数。例如，<p>标签中的字体大小设置为12px，它的行高设置为"Iine-height:1.5;"，那么它的行高换算为像素则是18px。这种不加任何单位的方法在实际网页制作中并不常用，通常使用像素的方法表示行高。text-

decoration属性来设置文本装饰。超链接标签默认就有下划线，但大多数情况下我们并不希望显示下划线，所以就要通过设置text-decoration属性把它删除。一般情况下none和underline是最常用的两个值。在网页实际应用中，通常使用vertical-align

属性设置文本与图片的居中对齐，此时它的值为middle，设置图片与文本居中对齐。在text-shadow出现之前，网页中要出现阴影效果主要采用Photoshop等绘图工具将其制作成图片引入页面的方式。不过，这样的方式非常麻烦，现在CSS3版本可以使用text-shadow属性为文本设置阴影效果，这个属性有两个作用，即产生阴影和模糊主体。这样无须使用图片就能给文本增加质感。新课讲解3：【约15分钟】教师：超链接单击前和单击后的不同颜色，其实是超链接的默认伪类样式。所谓伪类，就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式，也就是说，超链接将根据用户单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的四个状态显示不同的超链接样式。伪类样式的基本语法为“标签名:伪类名{声明:}"。伪类名称含义示例a:link单击访问前的超链接样式a:link{color:#9EF5F9;}a:visited单击访问后的超链接样式a:visited{color:#333;}a:hover鼠标悬浮其上的超链接样式a:hover{color:#FF7300;}a:active单击未释放的超链接样式a:active{color:#999;}新课讲解4：【约5分钟】教师：在浏览网页时，使用列表组织网页内容是无处不在的。例如，横向导航菜单、竖向菜单、新闻列表、商品分类列表等，基本都是使用ul-li结构列表实现的，传统网页中的菜单、商品分类使用中的列表均没有前面的圆点符号，该如何去掉这个默认的圆点符号呢?------list-style：none；在网页制作中，list-style和list-style-type两个属性是大家经常用到的，而另两个属性则不太常用，因此在这里大家牢记list-style和list-style-type的用法即可。新课讲解5：【约30分钟】教师：大家在上网时能看到各种各样的页面背景（background），有页面整体的图像背景、颜色背景，也有部分的图像背景、颜色背景等。在学习背景属性之前，先认识一个网页布局中的常用标签——<div>标签。<div>标签可以把HTML文档分割成独立的、不同的部分，因此<div>标签用来进行网页布局。<div>标签与<p>标签一样，也是成对出现的，它的语法如下。使用background-image属性设置背景图像的方式是background-image:url(图片路径);。如果仅设置了background-image，那么背景图像默认自动向水平和垂直两个方向重复平铺。如果不希望图像平铺，或者只希望图像沿着一个方向平铺，则使用background-repeat属性来控制。该属性有四个值为实现不同的平铺方式。(1)repeat:沿水平和垂直两个方向平铺。(2)no-repeat:不平铺，即背景图像只显示一次。(3)repeat-x:只沿水平方向平铺。(4)repeat-y:只沿垂直方向平铺。在CSS中，使用background-position来设置图像在背景中的位置。背景图像默认从被修饰的网页元素的左上角开始显示图像，但也可以使用background-position属性设置背景图像出现的位置，即背景出现一定的偏移量。可以使用具体数值、百分比、关键词三种方式表示水平和垂直方向的偏移量。景是CSS中使用频率很高的一个属性，可以帮助Web设计师实现一些特殊的效果，但是有时候CSS中提供的background功能无法满足设计师的需求。例如，设计师想直接对背景图片的大小进行控制呢?接下就详细介绍在CSS3中新添加的background-size的使用。学生：跟做新课讲解6：【约30分钟】教师：线性渐变是颜色沿着一条直线过渡:从左到右、从右到左、从上到下等。CSS3制作渐变效果其实和制作软件中的渐变没什么区别，首先指定一个渐变的方向、起始颜色、结束颜色。具有这三个参数就可以制作一个简单的、普通的渐变效果。IE浏览器是Trident内核，在写样式兼容的时候要加前缀:-ms-。Chrome浏览器是Webkit内核，在写样式兼容的时候要加前缀:-webkit-。Safari浏览器是Webkit内核，在写样式兼容的时候要加前缀:

-webkit-。Firefox浏览器是Mozilla内核，在写样式兼容的时候要加前缀:-moz-。后面还会学到其他CSS属性也需要在属性前面加浏览器前缀才能获得相应的支持，这些主流浏览器的前缀内核后续用到将不再详细说明。常规语法如下。linear-gradient(position,color1，color2,,...)如果兼容写法：-webkit-linear-gradient(position,color1,color2,...)经验分享：对于CSS3样式的兼容性并不是不变的，CSS3是一个永远在更新的版本号，所以部分CSS3样式是否使用兼容性写法就好的方式是去""网站查询当前的兼容性。学生：跟做新课讲解7：【约30分钟】教师：演示操作上机任务-美化页面通用尾部学生：跟做新课讲解8：【约30分钟】教师：演示操作上机任务-美化页