网页设计——入门与提高 作者 王维 吴菲 王丽娜 第15章.pptVIP

15.2 CSS伪类与伪元素 15.2.1 CSS伪类 伪类（Pseudo-Classes Reference）用于向某些选择器添加特殊的效果，让页面呈现丰富表现力。之所以称为“伪”，是因为它们指定的对象在文档中并不存在，它们指定的是元素的某种状态。 a:link {color: red ;} a:visited{color: blue;} a:hover{color: yellow;} a:active{color: green;} 15.2 CSS伪类与伪元素 15.2.2 CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果。 :first-letter伪元素向文本的第一个字母添加特殊样式。font、color、background、margin、padding、border、text-decoration、vertical-align、text-transform、line-height、float、clear这些属性都可以应用到:first-letter伪类上。 :first-line伪元素向文本的首行添加特殊样式。font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear这些属性都可以应用到:first-line伪类上。 :before伪元素在元素之前添加内容，这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。 15.2 CSS伪类与伪元素 15.2.2 CSS伪元素 例如：在h1元素前播放一段声音。 h1:before { content:url(beep.wav); } :after伪元素在元素之后添加内容，这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。例如：在h1元素后播放一段声音。 h1:after { content:url(beep.wav); } 15.3 CSS滤镜 CSS强大的滤镜功能可以使网页元素的显示方式更丰富，它将把用户带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。在介绍具体属性之前，先熟悉一下CSS滤镜的书写格式。CSS滤镜属性的标识符是filter，语法格式为： filter: 滤镜名称（变量名称） 其中滤镜名称共有14种，这里介绍常用的几种。 15.3 CSS滤镜 15.3.1 透明度滤镜 alpha是来设置透明度的，语法格式为： filter : alpha(opacity=值，finishopacity=值，style=值， startX=值，startY=值，finishX=值，finishY=值) 其中，opacity代表透明度等级，可选值从0到100,0代表完全透明，100代表完全不透明。style参数指定了透明区域的形状特征。其中，0代表统一形状；1代表线性；2代表放射状；3代表长方形。finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。startX和startY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。如上所述，如果不设置透明渐变效果，那么只需设置opacity这一个参数即可。 15.3 CSS滤镜 15.3.2 模糊滤镜 CSS下的blur属性可以达到模糊的效果，blur属性的语法格式为： filter : blur(add=值，direction，strength=值) 可以看到blur属性有三个参数：add、direction、strength。add参数有两个参数值：true和false，是指定图片是否被改变成模糊效果。direction参数用来设置模糊方向，模糊效果是按照顺时针方向进行的，其中0°代表垂直向上，没45°一个单位，默认值是向左的270°。strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 15.3 CSS滤镜 15.3.3 色度滤镜 chroma属性可以使一个元素中指定的颜色为透明色，它的语法格式为： filter : chroma（color=值） 这个规则表达式很简单，它只有一个参数。只需要把想要指定透明的颜色用color参数设置出来就可以了。