HTML5网页前端设计第3版 第11章教案-CSS3技术

《HTML5网页前端设计》教案第11章CSS3技术一、教学目标：掌握CSS3边框和背景效果的应用；掌握CSS3文本和字体效果的应用；掌握CSS3变形与动画效果的应用；掌握CSS3多列效果的应用。二、教学重点和难点：重点：掌握CSS3各类样式（边框、背景、文本、字体）效果的应用；难点：掌握CSS3变形与动画效果的应用。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍CSS3技术的新增内容，是在第三章CSS基础知识上的补充。元素的样式效果新增内容主要包括CSS3边框、背景、文本、字体等。CSS3变形技术分为2D与3D两种，本书主要介绍了2D效果下的元素变形的应用。在CSS3动画部分介绍了Transition简单动画与Animation组合动画。最后介绍了CSS3多列技术，该技术可用于分栏布局页面内容，实现仿报纸排版效果。五、教学基本内容：11.1CSS3边框和背景效果 11.1.1CSS3边框 CSS3新增了三种边框效果，分别是为元素设置圆角边框、带阴影效果的边框和图片边框。具体属性名称如表11-1所示。表11-SEQ表11-\*ARABIC1CSS3新增边框效果属性一览属性名称解释border-radius为元素设置圆角边框。box-shadow为元素设置带阴影效果的边框。border-image为元素设置带有背景图片的边框。CSS3圆角边框在CSS3中，border-radius属性可用于直接创建带有圆角的边框样式，该属性值表示圆角边框的圆角半径长度，数值越大则圆的弧度越明显。其语法格式如下：border-radius:<length>|<percentage>;border-radius属性的取值有以下两种形式：<length>：使用长度值规定圆角半径的长度，该值不可为负数。<percentage>：使用百分比规定圆角半径的长度，该值不可为负数。border-radius实际上是一种简写形式，用于一次性定义边框的四个角。如需为不同的角分别定义样式，可以查看表11-3。表11-SEQ表11-\*ARABIC3CSS3圆角边框属性值一览表属性值解释border-radius用于定义边框四个角的弧度border-top-left-radius用于定义边框左上角的弧度border-top-right-radius用于定义边框右上角的弧度border-bottom-left-radius用于定义边框左下角的弧度border-bottom-right-radius用于定义边框右下角的弧度以上4种border-*-radius属性均与border-radius属性取值方式相同，可以使用长度值或百分比的形式表示。CSS3矩形阴影在CSS3中，box-shadow属性可以为边框添加阴影，该属性适用于所有元素。box-shadow的默认属性值为none，表示无阴影效果。其语法格式如下：box-shadow:xoffsetyoffsetwidthcolor参数解释如下：xoffset：表示阴影在水平方向（x轴）上的偏移距离，取值为CSS长度值<length>。yoffset：表示阴影在垂直方向（y轴）上的偏移距离，取值为CSS长度值<length>。width：表示阴影的宽度，取值为CSS长度值<length>。color：表示阴影的颜色效果，取值为CSS颜色值<color>。例如，为矩形添加一个15px宽的灰色阴影，映射在右下角。div{

box-shadow:10px10px15pxgray}CSS3图像边框在CSS3中，border-image属性可以元素添加自定义图像效果的边框，该属性适用于所有元素。CSS图像边框相关属性如表11-6所示。表11-SEQ表11-\*ARABIC6CSS3图片边框属性一览表属性名称解释border-image-source用于设置或获取元素边框的图像来源路径。其默认值为none，表示无背景图片。border-image-slice用于设置或获取边框图片的分割方式。border-image-width用于设置或获取边框厚度。border-image-outset用于设置或获取边框背景图超出边框的量。border-image-repeat用于设置或获取边框图片的平铺状态。其默认值为stretch。border-image复合属性，用于定义边框图片的全部设置。border-image-slice属性有三种取值，解释如下：<number>：使用数值规定宽度，允许是整数或浮点数，不可以是负数。<percentage>：使用百分比规定宽度，不可以是负值。fill：保留剪裁后的区域，这块区域的平铺方式依据border-image-repeat的规定。注：border-image-slice属性的默认值为100%。border-image-repeat属性有三种取值，解释如下：repeat：定义用重复平铺的方式填充边框背景图。如果图片碰到边框的边界超过部分将被截断。round：定义用重复平铺的方式填充边框背景图。图片会根据边框尺寸动态调整图片大小，直至正好可以铺满整个边框。stretch：定义用拉伸图片的方式填充边框背景图。该属性值为默认值。注：事实上border-image-repeat属性在标准中还有一个取值为space，由于目前所有的主流浏览器均不支持该属性，因此没有列入表中。border-image是一种简写形式，用于一次性定义若干种border-image-*属性。其声明常用顺序如下（省略border-image-前缀）：[source][slice][width][outset][repeat]border-image属性的默认值为none100%10stretch，如果其中部分属性省略不写，则取其对应的默认值。如果同时设置了border-style与border-image属性，浏览器会优先显示border-image规定的样式效果。当border-image属性值为none或者指定的图像不可见时将会显示border-style所定义的边框样式。例如，为段落元素p同时设置普通边框样式与图片边框样式：p{border:2pxsolidred;border-image:url(image/test.jpg)10;}上述代码同时定义了border属性与border-image属性，如果border-image中指定的图片不可见或尚未被加载，则以border属性规定的样式显示；如果图片加载成功，则只显示border-image规定的边框样式。11.1.2CSS3背景效果 CSS3新增了三种背景效果，可用于自定义背景图片或颜色的绘制区域、位置和尺寸。具体属性名称如表11-7所示。表11-SEQ表11-\*ARABIC7CSS3新增背景效果属性一览属性名称解释background-clip自定义背景图片的绘制区域。background-origin自定义背景图片的位置。background-size自定义背景图片的尺寸。自定义背景图片绘制区域在CSS3中，background-clip属性可用于剪裁元素的背景图片或颜色区域，使其只显示指定的区域内容。其语法格式如下：background-clip:border-box|padding-box|content-box|text;background-clip属性的取值有以下4种形式：padding-box：只保留元素内边距之内的背景区域，包括内边距本身。border-box：只保留元素边框之内的背景区域，包括边框本身。content-box：只保留元素内容区域的背景。该属性值是默认值。text：只保留前景内容（例如文字）的形状，其他区域的背景图像均去掉。该取值必须将属性名称写成-webkit-background-clip方可使用。自定义背景图片位置在CSS3中，background-origin属性可用于剪裁元素的背景图片，使其只显示指定的区域内容。该属性必须与background-image属性配合使用，否则没有图片来源则无法对背景图片进行定位。其语法格式如下：background-origin:border-box|padding-box|content-box;background-origin属性的<position>参数表示背景图片的位置，有以下3种取值：padding-box：从元素内边距开始显示背景图像，该属性值是默认值。border-box：从元素边框开始显示背景图像。content-box：从元素内容区域开始显示背景图像。自定义背景图片尺寸在CSS3中，background-size属性可用于定义元素背景图片的尺寸大小。其语法格式如下：background-size:<bg-size>[,<bg-size>];background-size的<bg-size>参数表示背景图片的位置，有以下5种取值：<length>：使用长度值规定背景图像的大小，该值不可为负数。<percentage>：使用百分比规定背景图像的大小，该值不可为负数。auto：背景图像的真实大小。cover：将背景图像等比例缩放到完全覆盖容器。由于图像有可能与容器比例不一致导致部分背景图像超出容器范围。contain：将背景图像等比例缩放到宽度或高度与容器保持一致。背景图像始终在容器中，不会超出容器的范围。该属性允许包含1-2个参数，如果只有单个参数则用于表示宽度的样式，高度默认为跟随宽度等比例缩放。例如：p{background-size:200px;}上述代码表示将段落元素<p>的背景图片宽度缩放为200像素，高度会随着宽度等比例缩放。如果有2个参数则第一个参数表示宽度，第二个参数表示高度。例如：p{background-size:200px300px;}上述代码表示将段落元素<p>的背景图片宽度缩放为200像素、高度缩放为300像素。11.2CSS3文本和字体效果 11.2.1CSS3文本 CSS3新增了两种文本效果，分别是为文本添加阴影效果和长单词强制换行效果。具体属性名称如表11-11所示。表11-SEQ表11-\*ARABIC11CSS3新增文本效果属性一览属性名称解释text-shadow用于为指定的文本添加阴影效果。word-wrap用于实现长单词强制换行效果。CSS3文本阴影CSS3使用text-shadow属性为指定文本添加阴影效果。其基本格式如下：text-shadow:xoffsetyoffsetwidthcolor参数解释如下：xoffset：指的是阴影距离原文字内容在横向上的偏移距离。取值为CSS长度值<length>，可以为负值。yoffset：指的是阴影距离原文字内容在纵向上的偏移距离。取值为CSS长度值<length>，可以为负值。width：表示阴影的模糊半径，半径越大阴影面积越大，显示效果越模糊，该值如果缺省则阴影和正文的面积大小完全一样。取值为CSS长度值<length>，不能为负值。color：表示阴影的颜色效果，取值为CSS颜色值<color>。该值如果缺省在Chrome浏览器中不会显示阴影，而在Firefox和Opera浏览器中将直接使用字体颜色作为阴影颜色。注：text-shadow的默认属性值为none，表示无阴影效果。例如：h3{text-shadow:5px5pxred}指的是在目标文本内容右边5px和下面5px的地方渲染红色阴影。CSS3文字换行CSS3使用word-wrap属性规定文本的换行规则，可以将长单词断开换到下一行继续显示。其语法格式如下：word-wrap:normal|break-word;word-wrap属性的取值有以下两种形式：normal：指的是只允许在断字点换行，如果单词较长则直接溢出边界不会自动换行。该属性值为默认值。break-word：指的是文本内容允许在边界内换行，如果单词较长将在内部断开换行。注：word-wrap的默认属性值为none，表示无阴影效果。例如：p{word-wrap:break-word;}上述代码表示段落元素<p>中的文字内容强制在元素边界处换行。11.2.2CSS3字体 在CSS3之前，浏览器只能显示设备上已安装的字体。目前在CSS3中，通过@font-face的规则，网页可以显示任何字体。当有特殊字体时，可以将其放在服务器端，在浏览页面时会被自动下载到用户的设备终端。其语法规则如下：@font-face{font-family:<identifier>;src:<url>[format(<string>)]}例如：@font-face{font-family:'diyfont';src:url('diyfont.ttf')format('truetype')}其中font-family的名称可以自定义，然后在CSS样式声明font属性时使用该名称即可。p{font-family:'diyfont';}目前各类浏览器中的常用字体格式有如下四种：TrueType(.ttf)：中文称为“全真”字体，该字体由微软与苹果公司联合提出，使用数学函数定义字体轮廓，因此也被称为轮廓字体。；WebOpenFontFormat(.woff)：中文称为“开放字体格式”，该字体不包含加密内容，目前由W3C组织的Web字体工作组进行标准化；EmbeddedOpenType(.eot)：这是一种压缩字库，可以解决网页中加载特殊字体的问题。该字体目前只有IE浏览器（微软已于2023年2月14日正式禁用）可以支持；SVG(.svg)：SVG的全称是ScalableVectorGraphics（可缩放矢量图），它使用二维矢量图来显示字体，也是由W3C制定的一种开放标准。注意：如果需要兼容目前所有的主流浏览器，需要同时使用TureType(.ttf)、WebOpenFontFormat(.woff)、EmbeddedOpenType(.eot)和SVG(.svg)四种格式字体。 11.3CSS3变形与动画效果 11.3.1CSS32D变形CSS3中的transform属性用于元素变形，它能够实现对元素进行移动、收缩、旋转等2D动画效果。transform属性有如下5种方法，具体可以查看表11-17。表11-SEQ表11-\*ARABIC17transform属性方法一览表方法名称解释 translate(x,y)元素移动到指定位置。例如translate(10px,20px)表示元素从左侧往右移动10像素，从顶部往下移动20像素。rotate(degree)元素顺时针旋转指定的角度，填入负数则逆时针旋转。例如rotate(30deg)表示顺时针旋转30度。scale(x,y)元素尺寸缩放指定的倍数。例如scale(2,3)表示宽度放大为原始尺寸的2倍，高度放大为原先的3倍。skew(xdeg,ydeg)围绕x轴和y轴将元素翻转指定的角度。例如skew(20deg,10deg)指的是将元素横向倾斜20度，纵向倾斜10度。matrix(m11,m12,m21,m22,dx,dy)该方法包含了矩阵变换数学函数，根据填入的数据不同可以做到元素的移动、旋转、缩放和倾斜。可以用该方法完成更为复杂的变形。 11.3.2CSS3Transition动画 CSS3中的Transition动画又称为过渡动画，在指定时间内可以将元素从原始样式逐渐变化为新的样式。通常可用于鼠标悬停在元素上发生动画事件。transition动画包含5种属性，具体可以查看表11-19。表11-SEQ表11-\*ARABIC19transition动画属性一览表属性名称解释transition-property用于指定对何种CSS属性进行渐变处理。例如可以指定元素的背景颜色background-color、宽度width、高度height等。transition-duration用于指定transition动画的持续时间，例如5秒写为5s。transition-timing-function用于指定transition动画的渐变速度。缺省值为ease。transition-delay用于指定transition动画的延迟时间，缺省值为0s。transition复合属性，用于一次性设置4种属性效果。11.3.3CSS3Animation动画 CSS3可以创建Animation动画效果。该动画可以自定义任意多个关键时间点的样式效果，浏览器将自动处理两个关键时间节点之间的渐变效果，所有的关键帧组合在一起形成更复杂的动画效果。在网页文档中使用可取代Flash动画、动态图片和JavaScript。与animation动画相关有10种属性，具体可以查看表11-21。表11-SEQ表11-\*ARABIC21主animation动画相关属性一览表属性名称解释@keyframes用于设置自定义动画内容。animation-name用于检查或设置需要执行的@keyframes动画的名称。animation-duration用于检查或设置动画完成的时间。默认值为0。animation-timing-function用于检查或设置动画的速度曲线，默认值是ease。animation-delay用于检查或设置动画延迟开始的时间。默认值是0。animation-iteration-count用于检查或设置动画的播放次数。默认值为1。animation-direction用于检查或设置动画在循环播放时的运动方向。animation-play-state用于检查或设置动画是否在运行或暂停状态。默认值为running。animation-fill-mode用于检查或设置动画时间以外的状态。animation复合属性，用于一次性设置所有动画效果。11.4CSS3多列 CSS3可以将文本布局分割为多个列，实现仿报纸排版效果。11.4.1columns CSS3中columns是一个复合属性，用于同时设置目标文本每列的宽度和列数。其语法结构如下：columns：<column-width><column-count>columns包含的两个参数解释如下：column-width：用于设置每列的宽度。可填入长度值用于指定每列的宽度。缺省值为auto，表示根据column-count属性自动分配宽度。column-count：用于设置文本分割的列数，可填入正整数用于指定列数。缺省值为auto，表示根据column-width属性自动分配宽度。这两个参数也可以作为独立的属性使用，columns相当于同时指定column-width和column-count的属性。例如，为段落元素<p>实现多列效果：p{columns:20px3;}上述代码表示将文本分为3列，每列宽度为20像素。如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{columns:20px3;/*兼容旧版Firefox*/-moz-columns:20px3;/*兼容旧版Safari、Chrome和Opera*/-webkit-columns:20px3;}11.4.2column-gap CSS3中column-gap属性用于设置列与列之间的宽度。其语法结构如下：column-gap:<length>其中<length>可填入一个长度值来规范列与列之间的距离。缺省值为normal，表示根据font-size的值自动分配同样长度值的距离。例如，为段落元素<p>设置列间距：p{column-gap:30px;}上述代码表示文本列与列间隔30像素的距离。如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{column-gap:30px;/*兼容旧版Firefox*/-moz-column-gap:30px;/*兼容旧版Safari、Chrome和Opera*/-webkit-column-gap:30px;}11.4.3column-rule CSS3中column-rule属性适用于同时为列与列之间的分割线设置宽度、样式和颜色规范。其语法结构如下：column-rule：<column-rule-width><column-rule-style><column-rule-color>column-rule是一个复合属性，包括三个属性分别对应设置分割线的宽度、样式和颜色，具体解释如下：column-rule-width：用于设置列与列之间的分割线的宽度，可填入CSS长度值<length>，例如20px。column-rule-style：用于设置分割线的线形，例如实线solid、虚线dashed等。缺省值为none，表示无边框，此时宽度和颜色的设置将被浏览器忽略。column-rule-color：用于设置分割线的颜色，可填入CSS颜色值<color>，例如红色red。缺省值和当前文本颜色color属性一致。这三个参数也可以作为独立的属性使用，column-rule相当于同时指定了column-rule-*的系列属性。column-rule的默认值要分别看这三个属性值的组合结果。例如，为段落元素<p>设置多列之间的分割线样式：p{column-rule:1pxsolidred;}上述代码表示文本列与列之间的分割线为1像素宽的红色实线效果。如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{column-rule:1pxsolidred;/*兼容旧版Firefox*/-moz-column-rule:1pxsolidred;/*兼容旧版Safari、Chrome和Opera*/-webkit-column-rule:1pxsolidred;}11.5实验案例——特殊字体效果的设计与实现功能要求：基于CSS3文本阴影text-shadow属性制