第4章2CSS进阶.pptVIP

16进制颜色 16进制颜色的使用最普遍，其原理同样是RGB色，不过将RGB颜色的数值转换成了16进制的数字，并用更加简单的方式写出来——#RRGGBB，如#ffcc33。 其参数取值范围为：00－FF（对应十进制仍为0－255），如果每个参数各自在两位上的数值相同，那么该值也可缩写成“#RGB”的方式。例如，#ffcc33可以缩写为#fc3。 为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。 绝对单位 绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pica（pc）。 由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会按显示器的比例去显示。所以绝对单位很少用。 顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。 有3种相对长度单位，元素的字体高度（em）、字母x的高度（ex）和象素（px）。 em就是元素原来给定的字体font-size的值，如果元素原来给定的font-size值是14px，那么1em就是14px。ex是以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。 象素px：象素指显示器按分辨率分割得到的小点，因为显示器由于分辨率或大小不同，象素点的大小是不同的，所以象素也是相对单位。目前大多数设计者都倾向于使用象素作为单位。 百分比显得非常简单，也可看成是一个相对量。如： td{font-size:12px; line-height: 160%; } /*设定段落的行高为字体高度的160% */ hr{ width: 80% } /* 线段长度是相对于浏览器窗口的80% */ CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器中IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。 滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中，在一定程度上美化了页面。但滤镜属性只被IE支持，由于不符合CSS标准，所以Firefox不支持。 注意：滤镜中的透明和阴影效果，在很多非IE浏览器中有一些私有属性，也能实现IE中的滤镜效果 div.transp {opacity: 0.6;????????????????/* Firefox, */ ?filter: alpha(opacity=60); /* IE 8 支持*/? filter: alpha(opacity=60);?? /* IE 6-7支持 */} CSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单： filter:filtername(parameters);? alpha .alpha{ /*类选择器*/ filter:alpha(opacity=50); } 滤镜属性可分为无参滤镜和有参滤镜 无参滤镜 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=b