第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复杂的样式过度动态效果;实验要求;开始实验