【2017年整理】14讲CSS3高级应用.pptVIP

第10章 CSS3高级应用 ;10.1 在页面中插入内容;2. 插入图像 CSS3在页面中插入图像也是通过before和after选择器实现，在插入图像时，content属性赋值为图像文件的路径。 3. 插入项目编号 使用CSS3插入项目编号通过两个步骤实现，第一步是将选择器content属性设置为counter，第二步是为待插入项目编号元素添加counter-increment样式属性。具体的应用格式如下 元素:before{ content:counter(计数器名称); } 元素:{ counter-increment:计数器名称; };元素:after{ content:counter(计数器名称); } 元素:{ counter-increment:计数器名称; } 其中计数器的名称可以任意命名，如果没有为元素添加counter-increment属性设置，则所有编号都为0。;10.2 文字样式控制;10.2 文字样式控制;3. 使用服务器端字体 CSS3提供了使用服务器端字体的功能，通过该功能最大程度的保证了网页的通用性。只要服务器端安装了指定的字体，客户无论在任何一台终端浏览网页，都能够正确显示文本字体样式。 在CSS3中通过@font-face属性来应用服务器端字体，应用格式如下 @font-face { font-family:WebFont; src:url(path) } 其中font-family属性值设置为WebFont用于声明使用服务器端的字体，src指定了服务器端字体文件所在的路径。 通过@font-face还可以设置使用客户端本地字体，设置方法为将src属性设置为local(paht)。当加入了客户端本地字体设置后，浏览器加载时首先会尝试使用本地字体文件，如果没有找到合适的字体文件时，将使用服务器端字体文件。;10.3 元素变形处理;1. 缩放效果 使用scale()方法指定缩放倍数可以实现文字或图像的缩放效果。 scale()方法应用格式为 scale(num) 参数num指定放大或缩小的倍数，当num小于1时原文字或图像被缩小，否则将放大。 2. 旋转效果 使用rotate()方法指定旋转角度可以实现文字或图像的缩放效果。 rotate()方法应用格式为 rotate(deg) 参数deg为图像旋转的角度。;3. 移动效果 使用translate()方法指定水平方向和垂直方向的移动距离，可以实现文字或图像的移动效果。 translate()方法应用格式为 translate(x,y); 参数x和参数y分别指定水平方向及垂直方向位移距离。 4. 倾斜效果 使用skew()方法???定水平方向倾斜角度和垂直方向倾斜角度，可以实现文字或图像的倾斜效果。 skew()方法应用格式为 skew(degX,degY) 参数degX和参数degY分别指定水平方向及垂直方向倾斜角度。 ;10.4 样式过度;10.5 更为复杂的样式过渡;接下来实验;例1 插入文字;例1 不插入文字;例2 插入图像;例3 插入项目编号;例 4 文字阴影;例4 文字阴影;例5 设置单词及网址自动换行;例 6 缩放效果;例7 旋转效果;例8 移动效果;例8 倾斜效果;例9 样式过度;例10 复杂的样式过度 动态效果;实验要求;开始实验