Web前端技术项目式教程电子教案 任务四 使用CSS及CSS3美化网页

PAGE1PAGE任务四使用CSS及CSS3美化网页课程名称网页设计项目名称使用CSS及CSS3美化网页任务名称使用CSS及CSS3美化网页课时4项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.使用CSS单位、文本样式、颜色、背景样式等美化页面。2.使用CSS3边框、阴影、背景、渐变等特性美化页面。3.使用字体图标美化页面。知识目标：1.熟悉CSS文本样式、边框样式、列表样式、背景样式的语法规则。2.熟悉CSS3边框样式、盒阴影样式、背景样式、渐变样式的语法规则。3.了解网页中字体图标的插入方法。素质目标：1.培养学生的界面设计与审美能力。2.培养学生遵守行业标准（如W3C规范）的习惯。教学内容1.任务描述2.任务展示与实现3.教师讲解本任务涉及的知识点4.任务小结教学重点（1）美化首页导航区域样式。（2）美化首页主体内容区域样式。(3)美化首页底部区域样式。教学难点（1）二级菜单制作教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目化教程》作业设计1．设计一个超链接。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从超链接样式基本属性，CSS3样式伪类、鼠标特效等知识点进行介绍。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。（1）字体字体类别：使用font-family属性指定文本的字体。例如：font-family:”微软雅黑”表示将字体设置为微软雅黑。（2）文本颜色文本的颜色通常通过颜色的名称、十六进制值、RGB值和RGBA值四种方式指定。例如将文本标题变为红色可以使用以下方法：颜色名-比如"color:red"十六进制值-比如"color:#ff0000"RGB值-比如"color:rgb(255,0,0)"RGBA值-比如"color:rgba(255,0,0,0.5)"/*a表示alpha(透明度)，取值在0-1之间*/（3）文本行间距文本行间距就是行与行之间的距离，即行高，因此对应的属性为line-height。可以使用像素值和数值来设置行间距。（4）文本对齐方式文本对齐方式分为水平对齐和垂直对齐两种。文本水平对齐通过text-align属性实现。text-align的属性值可以设置为left、center、right，分别对应左对齐、居中对齐和右对齐。文本垂直对齐针对单行文本和多行文本有不同的实现方式。单行文本垂直居中仅需设置文本所在容器的高度(height)值等于行高(line-height)值即可。实现多行文本垂直居中，需要结合定位和平移来实现。（5）文本首行缩进中文段落的特点是首行缩进两个字符，在CSS中使用text-indent属性设置。⑴圆角边框border-radius属性为元素添加圆角边框，其语法如下。border-radius:1-4length|%/1-4length|%;⑵图像边框创建图像边框使用border-image属性。⑴列表符号列表项目的符号类型有多种值可选，常见的如none、disc、circle、decimal、lower-roman等。要修改用于列表项的标志类型，可以使用属性list-style-type。⑵图片符号List-style-image即列表样式图片，该属性可以将定制的图片设置为项目符号。（1）background-positionbackground-position属性设置背景图像的起始位置。①left，top，right，bottom，center：5个值组合显示位置。如果只写第1个，第2个属性默认为center。②x%y%：第1个值是水平位置，第2个值是垂直位置。左上角是0%0%，右下角是100%100%。如果仅规定了一个值，另一个值将是50%。③xpxypx：第1个值是水平位置，第2个值是垂直位置。（2）background-repeatbackground-repeat规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。①repeat-x，repeat-y：背景图像将在水平（垂直）方向重复。②no-repeat：不重复。③inherit：规定应该从父元素继承background-repeat属性的设置。（3）background-sizebackground-size规定背景图像的大小。语法：background-size:length|percentage|cover|contain;①length：设置背景图像的高度和宽度。可以是任何单位。如果只设置1个值，则第2个值会被设置为"auto"。②percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置1个值，则第2个值会被设置为"auto"。③cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。④contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。（4）background-originbackground-origin属性规定background-position属性相对于什么位置来定位。语法：background-origin:padding-box|border-box|content-box;①padding-box：从padding区域（含padding）开始显示背景图像。②border-box：从border区域（含padding）开始显示背景图像。③content-box：从content区域开始显示背景图像。（5）background-clipbackground-clip属性指定背景绘制区域。语法：background-clip:border-box|padding-box|content-box;①border-box：默认值，从边框区域向外裁剪背景。②padding-box：从内边距区域向外裁剪背景。③content-box：从内容区域向外裁剪背景。⑴文本阴影text-shadow属性用于为文本设置阴影，其语法如下。text-shadow:h-shadowv-shadowblurcolor;⑵盒子阴影box-shadow属性可以为盒子添加一个或多个阴影，其语法如下。box-shadow:h-shadowv-shadowblurspreadcolorinset;⑶渐变渐变分为线性渐变和径向渐变两种。线性渐变的语法为：background-image:linear-gradient(direction,color-stop1,color-stop2,...);括号里的参数用于设置线性渐变的角度和颜色。径向渐变的语法为：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);括号里的参数用于设置径向渐变的形状、圆心位置和颜色。1.