HTML5基础开发教程 教学课件 作者 范立锋 于合龙 孙丰伟 第10章__CSS3高级应用.ppt

《HTML5基础开发教程 教学课件 作者 范立锋 于合龙 孙丰伟 第10章__CSS3高级应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章CSS3高级应用10.1在页面中插入内容10.3元素变形处理10.2文字样式控制10.4样式过度10.5更复杂的样式过度10.1在页面中插入内容1.插入文字使用before选择器和after选择器，可以向所选择的页面元素的前面或后面插入指定文字信息。插入的文字信息，定义在选择器的content属性中。使用content属性不仅可以指定待插入的文字信息内容，还可以设置文字信息的样式。before选择器和after选择器的应用格式为元素:before{content:’信息内容’}元素:after{content:’信息内容’}2.插

2、入图像CSS3在页面中插入图像也是通过before和after选择器实现，在插入图像时，content属性赋值为图像文件的路径。3.插入项目编号使用CSS3插入项目编号通过两个步骤实现，第一步是将选择器content属性设置为counter，第二步是为待插入项目编号元素添加counter-increment样式属性。具体的应用格式如下元素:before{content:counter(计数器名称);}元素:{counter-increment:计数器名称;}元素:after{content:counter(计数器名称);}元素:{coun

3、ter-increment:计数器名称;}其中计数器的名称可以任意命名，如果没有为元素添加counter-increment属性设置，则所有编号都为0。10.2文字样式控制1.为文字增加阴影效果在CSS3中通过设置text-shadow属性，可以为页面中的文字增加阴影效果。text-shadow的应用格式如下text-shadow:lenlenlencolor；其中len分别用于设置阴影与文字的横向距离、阴影与文字的纵向距离以及阴影的模糊半径；color用于设置阴影的颜色。2.设置单词及网址自动换行使用word-wrap属性可设置长单词或

4、网址的自动换行。word-wrap的应用格式如下word-wrap:break-word;当添加了word-wrap的设置后，遇到行尾为长单词或网址，浏览器会自动截断并将剩余部分信息在下一行进行显示。3.使用服务器端字体CSS3提供了使用服务器端字体的功能，通过该功能最大程度的保证了网页的通用性。只要服务器端安装了指定的字体，客户无论在任何一台终端浏览网页，都能够正确显示文本字体样式。在CSS3中通过@font-face属性来应用服务器端字体，应用格式如下@font-face{font-family:WebFont;src:url(pat

5、h)}其中font-family属性值设置为WebFont用于声明使用服务器端的字体，src指定了服务器端字体文件所在的路径。通过@font-face还可以设置使用客户端本地字体，设置方法为将src属性设置为local(paht)。当加入了客户端本地字体设置后，浏览器加载时首先会尝试使用本地字体文件，如果没有找到合适的字体文件时，将使用服务器端字体文件。10.3元素变形处理元素变形在CSS3中主要是通过transform属性实现的，在不同浏览器下，transform应用格式有所不同，如下表所示浏览器transform应用格式Chrome-

6、webkit-transformSafari-webkit-transformOpera-o-transformFirefox-moz-transform1.缩放效果使用scale()方法指定缩放倍数可以实现文字或图像的缩放效果。scale()方法应用格式为scale(num)参数num指定放大或缩小的倍数，当num小于1时原文字或图像被缩小，否则将放大。2.旋转效果使用rotate()方法指定旋转角度可以实现文字或图像的缩放效果。rotate()方法应用格式为rotate(deg)参数deg为图像旋转的角度。3.移动效果使用transl

7、ate()方法指定水平方向和垂直方向的移动距离，可以实现文字或图像的移动效果。translate()方法应用格式为translate(x,y);参数x和参数y分别指定水平方向及垂直方向位移距离。4.倾斜效果使用skew()方法指定水平方向倾斜角度和垂直方向倾斜角度，可以实现文字或图像的倾斜效果。skew()方法应用格式为skew(degX,degY)参数degX和参数degY分别指定水平方向及垂直方向倾斜角度。10.4样式过度样式过渡指的是将元素样式，从一个指定的属性值平滑过渡到另一个指定的属性值。通过样式过渡的应用，可以在页面中实现简单

8、的动画效果。CSS3中使用transition属性实现样式过渡，应用格式如下transition:propertydurationtiming-function参数说明如下property用于