HTML+CSS+JavaScript网页设计-第9章-高级CSS操控课件

1、第1页第9章高级CSS操控本章概述 本章的学习目标主要内容第1页第9章高级CSS操控本章概述 第2页本章概述除了美观的字体，好看的背景、恰当的边框和边距以及酷炫的图形和动画都是网页受欢迎的重要因素，动画和用户界面效果曾有很长一段时间是Flash具有感染力的重头戏，而CSS 3将创建这些效果的能力内置于CSS变形、变换和动画规范当中。现在只要使用CSS就可以很容易的添加各种优秀的视觉效果。本章将继续学习如何使用CSS控制HTML网页的呈现。包括设置元素背景、边框和边距、元素的变形处理以及CSS动画。通过本章的学习读者应进一步熟悉CSS的语法规则，掌握更高级的CSS操控，能够制作更丰富多彩的网页动

2、画效果。第2页本章概述除了美观的字体，好看的背景、恰当的边框和边距以第3页本章的学习目标掌握设置元素背景的CSS属性了解盒子模型的基本概念掌握元素边框属性的设置理解内边距和外边距的含义掌握box-shadow属性的用法掌握CSS 3新增了transform属性的用法掌握CSS中的过渡动画的实现掌握CSS关键帧动画的原理和用法第3页本章的学习目标掌握设置元素背景的CSS属性第4页主要内容9.1 设置元素的背景9.2 边框与边距9.3 变形处理9.4 设计动画9.5 本章小结9.6 思考和练习第4页主要内容9.1 设置元素的背景第5页9.1 设置元素的背景为了方便、灵活地设计网页效果，CSS 3增

3、强了background属性的功能，允许在同一个元素内叠加多个背景图像。该属性的基本语法如下：background:,*;表示一个背景图像层。每个背景图像层都可以包含下面的值：background-color | background-image | background-position | background-size | background-repeat | background-origin | background-clip | background-attachment 第5页9.1 设置元素的背景为了方便、灵活地设计网页效果，第6页background-color属性back

4、ground-color属性能够为任何元素背景指定一个单一实体色。该属性的值与8.2.1节介绍的color属性值一样，可以有多种模式。当为元素设置background-color属性时，它将影响整个文档。而当其用于任何其他元素时，则会把指定的颜色用于为该元素创建的盒子边框内。前面的很多示例中就曾使用过该属性，这里不再赘述。第6页background-color属性backgroun第7页background-image属性background-image属性用于为元素设置背景图像。元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边距。默认情况下，背景图像位于元素的左上角，并在水平和垂

5、直方向上重复。background-image属性会在元素的背景中设置一幅图像。根据background-repeat属性的值，图像可以无限平铺、沿着某个轴(X轴或Y轴)平铺，或者根本不平铺。初始背景图像根据background-position属性的值放置。第7页background-image属性backgroun第8页background-position属性background-position属性用于设置背景图像(由background-image属性定义)的起始位置，背景图像如果要重复，将从这一位置开始。第8页background-position属性backgrbackgroun

6、d-size属性background-size属性用于控制背景图像的尺寸，这是CSS 3引入的新属性，在未CSS 3之前，无法控制背景图像的尺寸，只能事先把背景图像剪裁为适合的大小。length：设置背景图像的高度和宽度，包括两个值，第一个值设置宽度，第二个值设置高度；如果只设置一个值，第二个值会被设置为auto。percentage：以父元素的百分比来设置背景图像的宽度和高度，包括两个百分比数值，第一个值设置宽度，第二个值设置高度；如果只设置一个值，第二个值会被设置为auto。cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景区域内。con

7、tain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。第9页background-size属性background-sibackground-origin属性background-origin属性规定background-position属性相对于什么位置来定位。如果背景图像的background-attachment属性为fixed，那么该属性不生效。padding-box指定背景图像相对于内边距框来定位border-box指定背景图像相对于边框盒来定位content-box指定背景图像相对于内容框来定位第10页background-origin属性background-ba

8、ckground-repeat属性background-repeat属性规定了图像的平铺模式。该属性设置是否以及如何重复背景图像。repeat：默认。背景图像将在垂直方向和水平方向上重复。repeat-x：背景图像将在水平方向上重复。repeat-y：背景图像将在垂直方向上重复。no-repeat：背景图像将仅显示一次。第11页background-repeat属性background-background-clip属性background-clip属性用于规定背景的绘制区域。该属性的可取值与background-orign属性的可取值相同。表示背景图像被剪裁到相应的边框处。第12页backg

9、round-clip属性background-clbackground-attachment属性background-attachment属性用于设置背景图像是否固定或随着页面的其余部分滚动。该属性有两种取值：scroll：默认值，背景图像会随着页面其余部分的滚动而移动；fixed：当页面的其余部分滚动时，背景图像不会移动。第13页background-attachment属性backgro第14页主要内容9.1 设置元素的背景9.2 边框与边距9.3 变形处理9.4 设计动画9.5 本章小结9.6 思考和练习第14页主要内容9.1 设置元素的背景9.2 边框与边距默认情况下，HTML中的很多

10、元素都是没有边框的，有的时候，为了使页面布局更美观，需要为元素添加合适的边框，并调整元素内容到边框的距离。第15页9.2 边框与边距默认情况下，HTML中的很多元素都是没有第16页盒子模型“盒子模型”(box model)是CSS中一个很重要的概念，因为它决定了元素在浏览器窗口中如何定位。其因CSS处理每个元素都好像元素位于一个盒子中而得名。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。每个盒子都有3个重要的属性，第16页盒子模型“盒子模型”(box model)是CSS中第17页borde

11、r属性border属性用来指定代表某一元素的盒子的边框应如何呈现。一个边框具有3个可以修改的属性：border-color属性：指定边框应具有的颜色border-style属性：指定边框应为实线、虚线还是双股线，或者其他可能的取值borer-width属性：指定边框应具有的宽度第17页border属性border属性用来指定代表某一元素第18页padding属性padding属性用来指定元素内容与边框之间的距离，也叫做内边距。该属性的值通常使用像素指定，也可以使用任何之前介绍过的长度单位、百分比或关键字inherit。如果使用了百分比，则以包含盒子的百分比计算，如果指定为10%，则每一边取盒子

12、的5%作为内边距。元素的内边距默认不会继承，因此如果元素有一个值为50像素的padding属性，它不会自动应用于其内部的所有其他元素。只有padding属性值为inherit的元素才会继承父元素的内边距。与边框一样，也可以使用如下属性分别指定盒子内每一边的不同内边距大小：padding-bottom、padding-top、padding-left和padding-right。第18页padding属性padding属性用来指定元素内容第19页margin属性margin属性用来控制盒子之间的空间。它的取值可以是长度、百分比或者inherit，取值的含义与padding属性完全相同。也可以使用

13、如下属性为盒子的每一边分别设置不同的外边距大小：margin-bottom、margin-top、margin-left和margin-right。第19页margin属性margin属性用来控制盒子之间的空第20页border-radius属性为了美化网页，经常会将元素的边框设计为圆角矩形。在CSS 2.1中，为元素实现圆角边框效果是很头疼的一件事。为了简化这一功能，CSS 3引入了一个新的属性：border-radius。和前几个属性类似，可以使用border-radius属性分别设置4个角的圆角效果的半径，也可以为每个角单独设置，对应的4个属性分别是：border-top-left-ra

14、dius(左上角) 、border-top-right-radius(右上角)、border-bottom-right-radius(右下角)和 border-bottom-left-radius(左下角)。第20页border-radius属性为了美化网页，经常会将第21页border-radius属性一个值：所有四个角都有相同的半径。两个值：第一个值是左上角和右下角，第二个值是右上角和左下角。三个值：第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角。四个值：依次是左上角、右上角、右下角和左下角。第21页border-radius属性一个值：所有四个角都第22页border-im

15、age属性CSS 3引入了border-image属性来为边框添加背景图片。边框图像可以由单幅图像创建，该图像可以在元素周边的边框中沿着不同的轴向进行裁切或拉伸，换句话说，图像被4条线分成9个切片，如图9-7所示。4个角切片用于创建元素边框的4个角，剩下的4个边切片由border-image用来填充元素边框的4条边。然后可以指定切片的宽度以及是否希望这些切片平铺或拉伸以填满元素边的全部长度上。如果中间的切片不为空，就会填充border-image所应用的元素的背景。第22页border-image属性CSS 3引入了bord第23页border-image属性 前面提到的边框平铺方式有4个选项

16、，我们可以针对平铺指定两个值：第一个值用于水平方向的边框，第二个值用于垂直方向的边框。这4个选项的含义如下：round：图像会进行平铺，直至填满整个区域。如果平铺之后切片的数目与区域不匹配，就会对图像进行相应的缩放。stretch：图像会被拉伸，直至填满整个区域。repeat：图像会进行平铺，直至填满整个区域。space：图像会进行平铺，直至填满整个区域。如果平铺之后切片的数目与区域不匹配，就会调整图像之间的间距以填满整个区域。第23页border-image属性 前面提到的边框平铺方式box-shadow属性box-shadow属性也是CSS 3新增的属性，box-shadow属性有点类似于

17、上一章学习的text-shadow属性，text-shadow属性是为文本设置阴影，而box-shadow属性是为对象实现图层阴影效果。text-shadow属性一样，box-shadow也可以使用一个或多个投影。使用多个投影时，属性值是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值、一个可选的颜色值和一个可选的inset关键字来规定，省略长度的值是 0。 第24页box-shadow属性box-shadow属性也是CSS 第25页主要内容9.1 设置元素的背景9.2 边框与边距9.3 变形处理9.4 设计动画9.5 本章小结9.6 思考和练习第25页主要内容9.1 设置元素的背景第26页

18、9.3 变形处理CSS 3新增了transform属性，可以实现文字或图像的变形操作，主要包括旋转、倾斜、缩放和移动4种类型的变形处理。该属性接受一个或者多个由空格分隔的应用于元素的变形函数第26页9.3 变形处理CSS 3新增了transform第27页旋转旋转通过rotate函数来实现，在旋转之前可以使用transform-origin属性定义旋转的基点。rotate()的参数是旋转角度，可以是正值或负值，设置为正值，表示顺时针旋转；设置为负值，表示逆时针旋转。在三维变形中，还有3个旋转函数：rotateX( )、rotateY( )和rotateZ( )，可以让元素在任何轴上旋转。rot

19、ateX( )函数允许元素围绕X轴旋转；rotateY( )函数允许元素围绕Y轴旋转；rotateZ( )函数允许元素围绕Z轴旋转。这3个函数的参数也是旋转的角度，同样，为正值，元素围绕相应的轴顺时针旋转；为负值，逆时针旋转。第27页旋转旋转通过rotate函数来实现，在旋转之前可以使第28页旋转rotateX( )、rotateY( )和rotateZ( )可以看成是rotate3d( )函数的一个特例：rotateX(a)函数的功能等同于rotate3d(1,0,0,a)；rotateY(a)函数的功能等同于rotate3d(0,1,0,a)；rotateZ(a)函数的功能等同于rotat

20、e3d(0,0,1,a)第28页旋转rotateX( )、rotateY( )和ro第29页倾斜倾斜也叫扭曲，通过skew函数来实现。skew函数可以带一个或两个参数，只有一个参数的skew函数会使元素在水平方向上(X轴) 扭曲，如果有第二个参数的话，那么第二个值控制元素在垂直方向上(Y轴)扭曲。另外两个函数skewX()和skewY()则分别使元素仅在水平方向扭曲和仅在垂直方向扭曲。第29页倾斜倾斜也叫扭曲，通过skew函数来实现。skew函第30页缩放对元素的缩放通过scale()函数来实现。它接受无单位的数字为参数，scale(1)就是元素的默认尺寸。小于1的值使元素变小，所以scale

21、(0.5)将元素的尺寸缩小为原来的一半，相反，大于1的值使元素变大，所以scale(2) 将元素的尺寸放大到原来的两倍。如果参数值为负，则进行反转。也可以指定两个参数scale(x,y)，使元素在水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)；或者使用scaleX(x)函数，仅在水平方向缩放，scaleY(y)仅在垂直方向缩放，它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1。第30页缩放对元素的缩放通过scale()函数来实现。它接受第31页3D缩放对于元素的3D缩放，还有scaleZ(sz)和scale3d(sx,sy,sz)两个函数。当scale3d( )

22、中的X轴和Y轴同时为1(即scale3d(1,1,sz)时，其效果等同于scaleZ(sz)。scaleZ( )和scale3d( )函数单独使用时没有任何效果，需要配合其他变形函数一起使用才会有效果。第31页3D缩放对于元素的3D缩放，还有scaleZ(sz)第32页移动元素的移动通过translate函数来实现，元素从其当前位置移动，根据给定的位置参数(x 坐标和y 坐标) 沿着X轴、Y轴移动。也可有使用translateX(x)仅在水平方向移动(X轴移动)；或者使用translateY(Y)仅在垂直方向移动(Y轴移动)。另外，还有translateZ( )和translate3d( )两

23、个函数用于元素的3D位移操作。第32页移动元素的移动通过translate函数来实现，元素第33页移动3D位移处理的特点是：使用三维向量的坐标定义元素在每个方向移动多少。在translate3d( )函数中，X、Y、Z轴上的变化规律是：X轴：从左向右移动Y轴：从上向下移动Z轴：以方框中心为原点变大当Z轴的值越大时，元素离观看者越近，从视觉上元素就变得更大；反之，值越小时，元素也离观看者更远，从视觉上元素就变得更小。第33页移动3D位移处理的特点是：使用三维向量的坐标定义元素第34页主要内容9.1 设置元素的背景9.2 边框与边距9.3 变形处理9.4 设计动画9.5 本章小结9.6 思考和练习

24、第34页主要内容9.1 设置元素的背景第35页9.4 设计动画一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。CSS 3中的动画功能主要包括Transitions和Animations，这两种功能都可以用来制作动画效果。其中，Transitions功能支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；Animations功能支持通过对关键帧的指定来在页面上产生更复杂的动画效果，以方便制作逐帧动画。第35页9.4 设计动画一些 CSS 属性是可以有动画效果第36页过渡动画C

25、SS Transformation呈现的是一种变形效果，而CSS Transition呈现的是一种过渡效果，就是一种动画转换过程，如渐显、渐弱、动画快慢等。CSS Transformation和CSS Transition是两种不同的动画模型，因此，W3C为动画过渡定义了单独的模块。W3C标准中对CSS3 Transition是这样描述的：“CSS Transition允许CSS的属性值在一定的时间区间内平滑过渡。这种效果可以在鼠标单击、获得焦点、被单击或对元素的任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”第36页过渡动画CSS Transformation呈现的第37页过渡动画过

26、渡可以与变形同时使用。例如，触发:hover或:focus事件后创建动画过程，诸如淡出背景色、滑动一个元素以及让一个对象旋转等都可以通过CSS转换来实现。transition-property：执行变换的属性transition-duration：变换延续的时间transition-timing-function：在延续时间段，变换的速率变化transition-delay：变换延迟时间第37页过渡动画过渡可以与变形同时使用。例如，触发:hove第38页定义过渡属性transition-property属性用来定义转换动画的CSS属性名称，如background-color属性。即指定在元素的

27、哪个属性发生改变时执行过渡效果，主要有以下几个值：none(没有属性改变)；all(所有属性改变)，这也是默认值；indent(元素属性名)。当值为none时，过渡马上停止执行。当值为all时，元素产生任何属性值变化时都执行过渡效果。indent可以是指定元素的某个属性值第38页定义过渡属性transition-property属第39页定义过渡属性具体什么属性可以实现过渡效果，在W3C官网上列出了所有可以实现过渡效果的CSS属性值以及值的类型，大家可以到官网了解详情。需要注意的是，并不是所有的属性改变都会触发过渡效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发过渡效果。但上面所列的

28、属性类型发生改变都会触发过渡效果。第39页定义过渡属性具体什么属性可以实现过渡效果，在W3C官第40页定义过渡时间transition-duration属性用来指定元素过渡效果的持续时间，即设置从旧属性换到新属性所花费的时间，单位为秒。 该属性适用于所有元素以及:before和:after伪元素。默认情况下，动画过渡时间为0秒，所以【例9-9】中看不到过渡的效果。第40页定义过渡时间transition-duration属第41页定义过渡延迟时间transition-delay属性用来指定动画开始前的等待时间，单位为s(秒)或ms(毫秒)，也就是在改变元素属性值后多长时间开始执行过渡效果。tr

29、ansition-delay的用法和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认值为0，也就是变换立即执行，没有延迟。第41页定义过渡延迟时间transition-delay属性第42页定义过渡效果transition-timing-function属性用来指定切换效果的变换速率，也就是定义过渡动画的效果，该属性有6个可能的值：ease：过渡效果逐渐变慢，为默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。linear：匀速过渡效果，linear函数等同于贝塞尔曲线(0.0, 0.0, 1.

30、0, 1.0)。ease-in：加速过渡效果，ease-in函数等同于贝塞尔曲线(0.42,0,1.0,1.0)。ease-out：减速过渡效果，ease-out函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)。ease-in-out：过渡效果首先是加速，然后减速，ease-in-out函数等同于贝塞尔曲线(0.42,0, 0.58,1.0)。cubic-bezier：允许自定义一条时间曲线，即特定的cubic-bezier曲线。(x1,y1,x2,y2)中的4个值特定于曲线上的点P1和点P2。所有值必须在0,1区域内，否则无效。第42页定义过渡效果transition-timing-f

31、u第43页关键帧动画过渡动画只能使元素产生基本的运动，CSS动画规范(http:/j.mp/ css3-animations, /csswg/css3-animations/)用基于关键帧的动画使运动效果更进一步。关键帧的概念来源于传统的卡通片制作。关键帧相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。第43页关键帧动画过渡动画只能使元素产生基本的运动，CSS第44页关键帧动画关键帧动画的定义方式比较特殊，它使用了一个关键字keyframe

32、s 来定义动画。具体格式如下：keyframes 动画名称 时间点 元素状态 时间点 元素状态 一般来说，0%和100%这两个关键帧是必须要定义的。0%可以由from代替，100%可以由to代替。第44页关键帧动画关键帧动画的定义方式比较特殊，它使用了一个第45页关键帧动画每一个关键帧规则的开始都是一个百分比值或者from(相当于0%)与to(相当于100%)这两个关键字之一，它指定了关键帧在动画的何处出现。百分比值表示动画持续时间的百分比，所以一段2秒动画中的50%关键帧出现于动画的1秒处。定义好一个关键帧动画后，可以使用animation属性把这个动画绑定到某个要进行动画的元素上就能实现关

33、键帧动画了。第45页关键帧动画每一个关键帧规则的开始都是一个百分比值或者第46页关键帧动画animation就相当于用keyframes预先定义好元素在整个过渡过程中将要经历的各个状态，然后再通过animation属性将这些状态一次性赋给该元素。animation属性是一个复合属性，包含animation-name、animation-duration、animation- timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-pla

34、y-state子属性值。第46页关键帧动画animation就相当于用keyfra第47页创建关键字动画animation-name属性用来定义动画的名称，该名称就是使用Keyframes关键字创建的动画名，如果要为同一个元素应用多个动画，该属性值也可以是一个用逗号“,”分隔的动画名称列表。与过渡动画类似，仅指定动画名称还不能看到动画效果，至少还需要使用animation-duration属性指定播放动画持续的时间，单位为s(秒)，默认值为0。这个属性和transition属性的transition- duration子属性的使用方法一样。第47页创建关键字动画animation-name属性

35、用来定第48页动画播放方式和延迟时间animation-timing-function属性和transition-timing-function的使用方式相同，并且接受的所有值也相同，它用来控制动画的播放方式。animation-delay属性和transition-delay属性的使用方法一样，它用来指定动画延迟播放时间，属性值为数值，单位为s(秒)，默认值也是0。第48页动画播放方式和延迟时间animation-timin第49页动画播放次数和方向animation-iteration-count属性用来指定播放动画的循环次数，默认值为1；infinite为无限次数循环。 animatio

36、n-direction属性用来指定动画播放的方向，可以取值有如下4个：normal：表示动画按正常顺序播放，这也是该属性的默认值。reverse：表示动画反向播放。alternate：动画在奇数次(1、3、5.)正向播放，在偶数次(2、4、6.)反向播放。alternate-reverse：动画在奇数次(1、3、5.)反向播放，在偶数次(2、4、6.)正向播放。第49页动画播放次数和方向animation-iterati第50页暂停播放动画animation-play-state属性可以用来暂停播放动画，该属性有两个值：running和paused。默认值为running，当该值设置为paused时，将暂停正在播放的动画，如果之后值再次改为running，那么动画就会从其暂停之处继续播放。第50页暂停播放动画animation-play-state控制元素在动画前后的表现动画与CSS变形不同，默认情况下它会在动画结束时返回到其原有的样式，这是因为animation-fill-mode属性的默认值是none，该属性用来控制当动画不播放时，要应用到元素的样式。除了默认值none，该属性还有如下3个可取值：forwards：产生动画的元素会保持最后一个关键帧的属性，通常是100%或to关键帧，但是如果指定了animation-iteration