网站设计与开发课程 第13章 网页CSS过滤器 课件.pptVIP

第 13 章 CSS过滤器 什么是CSS过滤器 CSS过滤器是一种对特定的浏览器显示或隐藏CSS声明的方法。 13.1 CSS 过滤器 * html 选择符过滤器 常用CSS 过滤器 !important 关键字过滤器 下划线属性过滤器 13.2 常用的 CSS 过滤器 星号属性过滤器 1. !important 关键字过滤器 !important 关键字表示所附加的声明拥有最高优先权。 IE 7 和 Firefox 支持 !important 关键字。而 IE 6 及其更低版本浏览器不支持 !important 关键字。 例：设置 #box 在 IE 7 和 Firefox 中为固定定位，在 IE 6 及其更低版本浏览器中为绝对定位。 #box { position: fixed !important; /* 受 IE 7 和 Firefox 支持 */  position: absolute;} 2. 下划线属性过滤器 当在属性前面增加一个下划线后，IE 7 和 Firefox 会忽略这个声明。而 IE 6 及其更低版本浏览器会解析这个声明。 例：设置 #box 在 IE 7 和 Firefox 中为固定定位，在 IE 6 及其更低版本浏览器中为绝对定位。 #box { position: fixed; /* 对所有浏览器有效 */ _position: absolute; /* 仅对 IE 6 有效*/} 3. 星号属性过滤器 当在属性前面增加一个星号后， Firefox 会忽略这个声明。而 IE 7、IE 6 及更低版本浏览器会解析这个声明。 例：设置 #box 在三种浏览器中呈现不同的背景颜色。  #box { background-color: orange; /* 对所有浏览器有效 */ *background-color: blue; /* 仅对 IE 7、 IE 6 有效*/ _background-color: red; /* 仅对 IE 6 有效*/} 4. * html 选择符过滤器 html 元素是网页上的根元素。但是，IE 6及其更低版本浏览器认为 * 是网页上的根元素。因此，可以使用 * html 选择符过滤器仅对 IE 6 及其更低版本浏览器应用样式。 例：设置 #box 在 IE 7 和 Firefox 中应用 png 格式的背景图像，在 IE 6 中应用 gif 格式的背景图像。 #box { background: url(images/flower.png) no-repeat left top;} /* 对所有浏览器有效*/ * html #box { background-image: url(images/flower.gif);} /* 仅对 IE 6 有效*/