第4章2CSS进阶概要.ppt

CSS滤镜属性的分类 无参滤镜 Gray：使对象产生灰度图效果，仅对图像有作用。 Invert：使对象产生“底片”效果。 Xray：使对象产生“X光片”效果。 FlipH：使对象产生水平翻转效果。 FlipV：使对象产生垂直翻转效果。 Light：使对象产生一种模拟光源的投射效果 有参滤镜 Alpha：设置对象的透明度。 Blur：使对象产生模糊效果。 Dropshadow：设置对象的阴影效果。 Chroma：将对象中指定的颜色设置为透明色。 Glow：在对象的边缘产生类似发光的效果。 BlendTrans：设置对象的淡入淡出效果。 RevealTrans：设置对象之间的切换效果 滤镜的应用 使网页变黑白 由于gray滤镜只能使图像变黑白，要使网页整体变黑白需对html标记使用如下滤镜代码： html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 滤镜的应用 用Alpha属性制作渐变的hr分隔条 hr { filter: Alpha(opacity=10%, FinishOpacity=100%, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=8); color: #FF0033; } 滤镜的应用 设置网页之间的切换效果。 meta http-equiv=Enter content=blendTrans(duration=10) meta http-equiv=Exit content=blendTrans(duration=10) meta http-equiv=Enter content=RevealTrans(duration=10, transition=14) 作业 自己建一个css文件，完成下列样式的定义 （1）h1：红色，字体大小12px，bold。 （2）#f3: 幼圆，水平居中，字符间距：10px，下划线。 （3）.s1:绿色，段落行距：8px，首行缩进：25px。 在html中调用这个css文件中的这三个样式 本次实验任务 用标记选择器将网页中所有文字调整成12PX大小 用类选择器 .title将栏目框的标题文字调整成14PX，红色。 用伪类选择器将导航条调整为链接的hover状态文字变色，加下划线 用后代选择器将友情链接中的链接行距调整为150％ 用Li.style1 A将常用下载里的链接调整为紫色字 CSS样式的优先级 总图 !important样式 行内样式 id选择器 类选择器 复合选择器 标记选择器 浏览器对标记预定义的样式 继承的样式 低 高 优先级 复杂选择器名称的分解 如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减一样，CSS选择器分解的原则是：先逗号，接着空格，再冒号，最后点号。例如： #menu a.class?:hover b, .special b.class { … } 就可先分解为： （#menu a.class?:hover b），（.special b.class） 这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了类名的a标记的伪类选择器。 CSS样式的总体设计原则 定义标记选择器最省事，它不需在元素的html标记里添加class或id属性，因此初学者最喜欢定义标记选择器或由标记选择器组成的包含选择器。但有些标记（如a标记）在网页文档的各部分都出现得很多，它们在各部分的样式风格往往不一样。 例如导航条内的a标记就要求和文档其他地方的a标记样式不同，我们当然可以将导航条内的各个a标记定义为一个类，但这就要将导航条内的各个a标记都添加一个class属性，实际上，可以将导航条内a标记的父标记（如ul）添加一个id属性（#menu），然后用包含选择器（#menu a）就可以选中导航条内的各个a标记了。 CSS样式的总体设计原则2 对于几个不同的选择器，如果它们有一些共同的样式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些选择器的特殊样式。 CSS 2.1新增加的选择器简介 CSS 2.1新增加的选择器简介 CSS 2.1标准在1.0的基础上增加了一些新的选择器，这些选择器不能被IE6浏览器支持，但是其他浏览器如IE 7、Firefox3、Safari 4等均对它们提供支持，考虑到目前越来越多的电脑安装了IE 7等新型浏览器，预计IE 6将在一两年内被淘汰，因此我们有必要知道这些新选择器，它们能给CSS设计带来方便，而且对我们以后学习jQuery的选择器是很有帮助的 1. 子选择器 子选择器用于选中元素的直接后