单元3图文展示网ppt课件.pptx
单元3 图文展示网页设计,请简要概括什么是CSS的层叠性、继承性和重要性。请简述什么是CSS的优先级，并做出总结。,提问,（1）CSS层叠性是指当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。（2）CSS的继承性是指具有继承性的CSS样式可以被应用于某个特定HTML标签及其后代。（3）CSS重要性是指在同一组属性设置中标有“!important”的样式优先级最大，将会覆盖其他属性设置。,CSS优先级即是指CSS样式在浏览器中被解析的权重不同。CSS优先级进行总结，具体如下：（1）权值越大越优先；（2）当权值相等时，后出现的样式表设置要优于先出现的样式表设置；（3）创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的默认样式；（4）继承的CSS 样式权值小于后来指定的CSS 样式；（5）在同一组属性设置中标有“!important”规则的优先级最大；,作业点评,学习目标,传智书城,1,页面展示：,购物网站通常会以图文混排的方式展示商品信息，本项目将实现一个名为传智书城的网上书城页面，当鼠标悬停到某个商品上时，会出现商品的价格等信息。,鼠标悬停商品效果,2,技术要点：,HTML5 常用图像标签CSS背景设置CSS阴影和渐变,项目3-1-项目描述,标签,标签用于定义网页中的图像，语法格式如下所示：,src和alt是标签必需的属性。,标签和标签,案例代码（详见教材demo3-1）,当需要在网页中添加一个插图时，就可以使用标签来实现。, 一只呆萌的小鸡 拍摄者：papi 拍摄时间：2016 年 2 月 ,标注,插图,前导知识-HTML5 常用图像标签,CSS用于背景设置的常用属性如下所示。,url (url) 直接引用图片地址来设置图片作为对象背景。,Scroll：背景图像是随对象内容滚动。Fixed：背景图像固定。,length ：百分数 | 由浮点数字和单位标识符组成的长度值。如：35% 80%或35% 2.5cmposition：top | center | bottom | left | center | right。,前导知识-CSS背景设置,用backgroung进行设置。,CSS背景设置的复合写法,选择器 background : background-color | background-image | background-repeat | background-attachment | background-position,如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为： transparent none repeat scroll 0% 0%。,前导知识-CSS背景设置,盒阴影,对象选择器 box-shadow:投影方式| X轴偏移量| Y轴偏移量 |阴影模糊半径 | 阴影扩展半径 |阴影颜色,此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，其投影就是内阴影。,是指阴影水平偏移量其值可以是正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。,是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。,此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。,此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。,此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。,前导知识-CSS阴影和渐变,案例,代码详见教材demo3-2,前导知识-CSS阴影和渐变,CSS3渐变,线性渐变,径向渐变,前导知识-CSS阴影和渐变,线性渐变,案例代码（详见教材demo3-3）,background-image:linear-gradient( | , color stop, color stop, color stop*);,表示渐变的角度，角度数的取值范围是0365deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。,通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是 left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center。注意：IE10只能取left,top，Chrome则没有center,left center,right center。,用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个color stop之间的区域为颜色过渡区。,前导知识-CSS阴影和渐变,径向渐变,案例代码（详见教材demo3-4）,background-image: radial-gradient(圆心坐标, 渐变形状 渐变大小, color stop, color stop, color stop*);,用于设置放射的圆形坐标，可设置为形如10px 20px的x-offset y-offset，或使用预设值center（默认值）。,circle ：圆形。ellipse：椭圆形，默认值。,closest-side 或 contain:以距离圆心最近的边的距离作为渐变半径。closest-corner:以距离圆心最近的角的距离作为渐变半径。farthest-side:以距离圆心最远的边的距离作为渐变半径。farthest-corner 或 cove:以距离圆心最远的角的距离作为渐变半径。,前导知识-CSS阴影和渐变,多学一招：重复渐变,/*线性重复渐变*/repeating-linear-gradient(起始角度, color stop, color stop, color stop*)/*径向重复渐变*/repeating-radial-gradient(圆心坐标, 渐变形状 渐变大小, color stop, color stop, color stop*),了解了线性渐变和径向渐变的使用方法后，接下介绍一下重复渐变。对以上两种渐变方式都是适用的，只需在两个属性前添加“ repeating-“,具体语法格式如下：,前导知识-CSS阴影和渐变,该传智书城页面由header部分和两个商品模块构成。,1,页面结构：,传智书城,项目3-1-项目分析,案例代码（详见教材代码实现）,2,实现细节：,header部分使用标签中嵌套标签引入图片；两个大的商品模块由类名为items的标签构成，在div.items中使用多个类名为item的标签组成多个商品块。商品信息中qq图标为gif格式的图片，为了控制不同的文本样式，图书价格信息需要在中嵌套标签。在热销教材和精品套系两个模块使用了渐变色。为每个图书商品添加阴影，当鼠标悬停在每个商品上面时，显示价格等信息的层，该层是半透明的效果，使用“background-color: rgba(88,166,240,0.8);”来实现。rgb 表示Red Green Bule 3色，rgba前三个参数表示三色的值混合，最后一个参数0.8 则是指的透明度，1或100% 表示不透明。,传智书城,项目3-1-项目分析,1,页面展示：,与项目3-1的传智书城页面相比，本项目结合CSS3的一些新特性，如圆角、过渡、变形等对购物页面进行了一系列的优化，完成一个多肉植物的购物商城页面。,多肉商城,2,技术要点：,CSS3圆角边框CSS3 过渡（CSS3 transitions）CSS3 变形（CSS3 transform）,项目3-2-项目描述,CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。,border-radius属性,CSS3的圆角边框使用border-radius属性来实现，基本语法如下所示：,border-radius: 1-4 length | % /1-4 length | %;,length用于设置对象的圆角半径长度，不可为负值。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则表示水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果省略 bottom-left，则与 top-right 相同，如果省略 bottom-right，则与 top-left 相同，如果省略 top-right，则与 top-left 相同。,前导知识-CSS3圆角边框,border-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法：,其他写法,border-top-left-radius: /左上角border-top-right-radius: /右上角border-bottom-right-radius: /右下角border-bottom-left-radius: /左下角,他们的参数都是先y轴然后x轴,案例代码（详见教材demo3-5）,CSS3圆角边框的属性可以完成很多不同的图形效果,前导知识-CSS3圆角边框,CSS3的过渡就是平滑的改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。,CSS3 transitions,CSS3 过渡使用transition属性来定义，transition属性的基本语法如下所示：,transition: property duration timing-function delay;,要实现这样的效果，必须规定两项内容：（1）规定应用过渡的CSS属性名称。（2）规定效果的时长。,应用过渡的CSS属性的名称,过渡效果花费的时间,过渡效果的时间曲线,效果开始之前需要等待的时间,前导知识-CSS3 过渡,transition是一个复合属性，由4个属性构成，如下表所示。,CSS3 transitions,案例代码（详见教材demo3-6）,前导知识-CSS3 过渡,CSS3动画相关的第二个属性就是transform，翻译成中文的含义是“改变，使变形；转换”，用于向元素应用2D或3D 转换。,CSS3 transform,transform属性的基本语法如下所示：,transform：none | transform-functions;,默认值为none，适用于内联元素和块元素，表示不进行变形。,用于设置变形函数，可以是一个或多个变形函数列表。,旋转,倾斜,缩放,移动,前导知识-CSS3 变形,transform-functions的常用于2D转换的函数说明如下表所示。,2D转换,案例代码（详见教材demo3-7）,前导知识-CSS3 变形,元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置是元素的中心位置。,元素变形原点,CSS 变形使用transform-origin属性指定元素变形基于的原点，语法格式具体如下：,transform-origin: x-axis y-axis z-axis;,transform-origin最多接受三个值，分别是x轴、y轴和z轴的偏移量。,前导知识-CSS3 变形,transform-origin的参数说明如下表所示。,元素变形原点,元素旋转30，中心点在中间,对该元素设置transform-origin: left 0px 0px;,注意：transform-origin的三个参数均为可选参数，参数值为0px时可以省略不写。,前导知识-CSS3 变形,3D 变形是指某个元素围绕其x轴、y轴、z轴进行旋转，transform-functions的常用于3D转换的函数说明如下表所示。,3D转换,前导知识-CSS3 变形,erspective属性的透视效果就是用于实现视觉上的3D效果的，接下来看一个典型的案例立方体，页面效果如下所示。,3D转换案例,案例代码（详见教材demo3-8）,前导知识-CSS3 变形,该多肉商城页面由头部（）、商品模块（div.main）、文字模块、和footer部分构成。,1,页面结构：,多肉商城,项目3-2-项目描述,案例代码（详见教材代码实现）,2,实现细节：,页面头部由标签嵌套标签构成，每个商品由标签嵌套标签构成、商品上面的文字层由标签嵌套和标签构成，商品列表下方文字由标签嵌套标签构成，页面最下面的部分由标签嵌套标签和标签构成。“最新肉肉”按钮使用了CSS圆角边框。当鼠标悬停到每个商品上面时，会显示出文字信息的层，该层上应用了旋转和过渡组合，形成了旋转出现的动画效果，z-index值设置为4000，因为要显示在最上面。商品图片层中间还有两个交汇的三角形的效果，如下图所示。,多肉商城,它们不是两个，是使用CSS伪选择器“:before”和“:after”结合CSS3旋转和过渡、定位等给商品前后添加的动画背景，在实际开发中也是一种常用的方式。,项目3-2-项目分析,1,页面展示：,CSS3的出现使网页中的动画效果不在只依赖与flash和JavaScript，本项目是一个有趣的动画效果，名称叫做摇晃的桃子。,摇晃的桃子,2,技术要点：,CSS3 动画（CSS3 animations）CSS精灵技术（CSS Sprites）,项目3-3-项目描述,知识点概述,在项目3-2中，我们学习了CSS3的transition和transform属性，虽然二者结合可以实现一些简单的动画效果，但是也有一些难以克服的缺点，例如我们想让动画在多个状态中转换就无法实现了，CSS3中最后一个动画相关的属性是animations，有了它就可以解决这样的问题。,前导知识-CSS3 动画,CSS3 animations,一个完整的 CSS animations由两部分构成：,一组定义的动画关键帧,描述该动画的CSS声明,keyframes规则,animation属性,前导知识-CSS3 动画,keyframes规则,在CSS3中使用keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。keyframes规则的语法格式如下所示：,keyframes animationname keyframes-selectorcss-styles;,animationname表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。,keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。,css-styles定义执行到当前关键帧时对应的动画状态。以上三个属性都是必需品，缺一不可。,前导知识-CSS3 动画,animation属性,animation属性用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。animation属性的基本语法如下所示：,animation: name duration timing-function delay iteration-count direction fill-mode play-state;,与transtion类似，animation也是一个复合属性，以上参数分别对应8个子属性。,前导知识-CSS3 动画,animation属性-子属性,前导知识-CSS3 动画,案例,代码详见教材demo3-9,前导知识-CSS3 动画,知识点概述,过去，网页开发者喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着多的小图片，客户端每显示一张图片都会向服务器发送一次请求，图片越多请求次数越多，这样有可能造成图片延迟加载，影响用户体验。随着互联网技术的发展，大家越来越重视网页的加载速度，于是这些小图片被整合到了一起，CSS Sprites出现了。,前导知识-CSS精灵技术,CSS Sprites,CSS Sprites被称为CSS精灵技术，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有小图片都包含到一张大图中去，这样一来，当访问该页面时，只需要载入一次图片。CSS精灵技术的使用具体如下：,前导知识-CSS精灵技术,案例,代码详见教材demo3-10,前导知识-CSS精灵技术,摇晃的桃子,该页面通过控制几个标签的位置，让标签内的其他标签显示在适当的位置。,1,页面结构：,项目3-3-项目分析,摇晃的桃子,2,实现细节：,为类名为act_wrapper的标签设置背景图，其中包括桃树树枝的部分。在类名为act_content的标签中嵌套标签，用来添加“摇晃的桃子”文字。六个桃子使用标签+CSS3精灵技术完成，为了每个桃子的定位，需要在标签外层使用标签。桃子左右摇晃的效果使用CSS3的动画技术来实现。,案例代码（详见教材代码实现）,项目3-3-项目分析,作业,请列举CSS3中有关动画制作的属性，并说说这些属性给我们带来了哪些好处。请简述什么是CSS3 Sprites，如何使用Sprites。,课后作业,
