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

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）使用CSS及CSS3美化网页任务四知识目标1熟悉CSS文字样式、边框样式、列表样式、背景样式的语法规则。2熟悉CSS3边框样式、盒阴影样式、背景样式、渐变样式的语法规则。3了解网页中字体图标的插入方法。能力目标1掌握使用CSS单位、文本样式、颜色、背景样式等美化页面。2掌握使用CSS3边框、阴影、背景、渐变等新特性美化页面。3掌握使用图标字体美化页面。素质目标1培养学生具备一定的界面设计审美能力。2培养学生遵守行业标准（如W3C规范）的习惯。思维导图任务描述李明完成布局定位之后，页面内容位置已初步确定，但样式不够美观。本任务要求对中华传统文化网站首页的样式进行美化。本任务的具体要求如下。

美化首页导航区域样式。

美化首页主体内容区域样式。

美化首页底部区域样式。知识引入1.文本样式2.边框样式3.列表样式4.背景样式5.阴影和渐变6.字体图标1.

文本样式（1）字体字体类别：使用font-family属性指定文本的字体。例如：font-family:”微软雅黑”表示将字体设置为微软雅黑。

1.

文本样式（1）字体字体大小：使用font-size属性设置字号。字号单位使用最多的是px、em和rem。px是一个固定大小的单位，不适合用于制作响应式网页。em单位的特点是子元素字体大小是相对于其父元素字体大小的。rem是CSS3新增的一个相对长度单位。它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根元素即HTML元素进行计算。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

1.

文本样式（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之间*/

1.

文本样式（3）文本行间距文本行间距就是行与行之间的距离，即行高，因此对应的属性为line-height。可以使用像素值和数值来设置行间距。

1.

文本样式（4）文本对齐方式文本对齐方式分为水平对齐和垂直对齐两种。文本水平对齐通过text-align属性实现。text-align的属性值可以设置为left、center、right，分别对应左对齐、居中对齐和右对齐。文本垂直对齐针对单行文本和多行文本有不同的实现方式。单行文本垂直居中仅需设置文本所在容器的高度(height)值等于行高(line-height)值即可。实现多行文本垂直居中，需要结合定位和平移来实现。

1.

文本样式（5）文本首行缩进中文段落的特点是首行缩进两个字符，在CSS中使用text-indent属性设置。

1.

文本样式（5）文本首行缩进中文段落的特点是首行缩进两个字符，在CSS中使用text-indent属性设置。

2．边框样式⑴圆角边框border-radius属性为元素添加圆角边框，其语法如下。border-radius:1-4length|%/1-4length|%;

2．边框样式⑵图像边框创建图像边框使用border-image属性。

3．列表样式下面我们介绍3个最为常见的列表属性。list-style-type：设定引导列表项目的符号类型。list-style-image：选择图像作为项目的引导符号。list-style-position：决定列表项目所缩进的程度。

3．列表样式⑴列表符号列表项目的符号类型有多种值可选，常见的如none、disc、circle、decimal、lower-roman等。要修改用于列表项的标志类型，可以使用属性list-style-type。

3．列表样式⑵图片符号List-style-image即列表样式图片，该属性可以将定制的图片设置为项目符号。

3．列表样式⑶列表符号位置在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside两种，对它们的解释如下。inside：列表项目符号位于列表文本以内。outside：列表项目符号位于列表文本以外。

4．背景样式background可以在一个声明中设置所有的背景属性，其语法如下。background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit;

4．背景样式（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个值是垂直位置。

4．背景样式（2）background-repeatbackground-repeat规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。①repeat-x，repeat-y：背景图像将在水平（垂直）方向重复。②no-repeat：不重复。③inherit：规定应该从父元素继承background-repeat属性的设置。

4．背景样式（3）background-sizebackground-size规定背景图像的大小。语法：background-size:length|percentage|cover|contain;①length：设置背景图像的高度和宽度。可以是任何单位。如果只设置1个值，则第2个值会被设置为"auto"。②percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置1个值，则第2个值会被设置为"auto"。③cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。④contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

4．背景样式（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区域开始显示背景图像。

4．背景样式（5）background-clipbackground-clip属性指定背景绘制区域。语法：background-clip:border-box|padding-box|content-box;①border-box：默认值，从边框区域向外裁剪背景。②padding-box：从内边距区域向外裁剪背景。③content-box：从内容区域向外裁剪背景。

5．阴影和渐变⑴文本阴影text-shadow属性用于为文本设置阴影，其语法如下。text-shadow:h-shadowv-shadowblurcolor;

5．阴影和渐变⑵盒子阴影box-shadow属性可以为盒子添加一个或多个阴影，其语法如下。box-shadow:h-shadowv-shadowblurspreadcolorinset;

5．阴影和渐变⑶渐变渐变分为线性渐变和径向渐变两种。线性渐变的语法为：background-image:linear-gradient(direction,color-stop1,color-stop2,...);括号里的参数用于设置线性渐变的角度和颜色。径向渐变的语法为：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);括号里的参数用于设置径向渐变的形状、圆心位置和颜色。

6．字体和图标⑴FontAwesome字体图标

6．字体和图标⑵阿里巴巴矢量图标库（Iconfont）

任务实现：中国传统文化网站首页美化1.头部区域导航样式美化2.主体内容区域样式美化3.页脚区域样式美化任务拓展1:美化中国传统文化