第14讲 CSS3高级应用.pptVIP

第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. 插入图像 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 文字样式控制 1. 为文字增加阴影效果 在CSS3中通过设置text-shadow属性，可以为页面中的文字增加阴影效果。text-shadow的应用格式如下 text-shadow : len len len color； 其中len分别用于设置阴影与文字的横向距离、阴影与文字的纵向距离以及阴影的模糊半径；color用于设置阴影的颜色。 10.2 文字样式控制 2. 设置单词及网址自动换行 使用word-wrap属性可设置长单词或网址的自动换行。 word-wrap的应用格式如下 word-wrap : break-word; 当添加了word-wrap的设置后，遇到行尾为长单词或网址，浏览器会自动截断并将剩余部分信息在下一行进行显示。 3. 使用服务器端字体 CSS3提供了使用服务器端字体的功能，通过该功能最大程度的保证了网页的通用性。只要服务器端安装了指定的字体，客户无论在任何一台终端浏览网页，都能够正确显示文本字体样式。 在CSS3中通过@font-face属性来应用服务器端字体，应用格式如下 @font-face { font-family:WebFont; src:url(path) } 其中font-family属性值设置为WebFont用于声明使用服务器端的字体，src指定了服务器端字体文件所在的路径。 通过@font-face还可以设置使用客户端本地字体，设置方法为将src属性设置为local(paht)。当加入了客户端本地字体设置后，浏览器加载时首先会尝试使用本地字体文件，如果没有找到合适的字体文件时，将使用服务器端字体文件。 10.3 元素变形处理 元素变形在CSS3中主要是通过transform属性实现的，在不同浏览器下，transform应用格式有所不同，如下表所示 浏览器 transform应用格式 Chrome -webkit-transform Safari -webkit-transform Opera -o-transform Firefox -moz-transform 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) 参数d