H1-1层叠样式表.ppt

学习目标 了解CSS层叠样式表简介 掌握添加层叠样式表的方法 掌握层叠样式表的格式 熟悉层叠样式表的分类、伪类 掌握控制CSS格式的样式 层叠样式表简介 简单的css层叠样式表示例 添加层叠样式表的方法 直接添加在HTML的标记（tag）里，语法为： 添加层叠样式表的方法 添加在HTML的标识符 head里，语法为： 添加层叠样式表的方法 同是添加在HTML的标识符 head里，语法为： 层叠样式表的格式 样式表一般的声明分为选择符（selector）和块{}（block），块里包含属性（properties）和属性的取值（value）。 层叠样式表的分类、伪类 语法如下： 控制字体、文字的样式 字体类型语法如下： 控制文本的样式 控制颜色和背景的样式 颜色属性语法如下： 控制列表、界面的的样式 列表符号语法如下： 控制框与边框的样式 边框空白（MARGIN）语法如下： IE滤镜效果 alpha属性 alpha是来设置透明度的。先来看一下它的表达格式： filter：alpha（opacity=opcity，finishopacity=finishopacity，　　style=style，startX=startX，startY=startY，finishX=finishX，　　finishY=finishY） IE滤镜效果 Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。 Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。 IE滤镜效果 blur属性 假如用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。 　　先来看一下blur属性的表达式： 　　filter：blur（add=add，direction，strength=strength） IE滤镜效果 Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。 Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 IE滤镜效果 Chroma属性 　　Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： 　　Filter：Chroma（color=color） 　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。 IE滤镜效果 DropShadow属性 　　DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式： 　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，Positive=positive） IE滤镜效果 　该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。 Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。  IE滤镜效果 Glow属性 　　当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下： 　　Filter：Glow（Color=color，Strength=strength） 　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255 IE滤镜效果 Mask属性 　　Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单： 　　Filter：Mask（Color=颜色） 　　只有一个Color参数，用来指定使用什么颜色作为掩膜。  IE滤镜效果 FlipH、FlipV属性 　　Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是： 　　Filter：FlipH 　　Filter：FlipV IE滤镜效果 Xray属性