ＣＳＳ技术优势及其滤镜应用

2009-06-05陈玉萍

新媒体研究 2009年9期

关键词：样式滤镜

陈玉萍

[摘要]介绍CSS的两个核心概念。作为一种制作网页的技术，CSS可以控制Web站点的布局和外观，丰富WEB网页编辑，实现许多神奇的效果。主要讨论CSS的技术优势及在网页中如何利用CSS的滤镜属性为网页添加媒体特性。

[关键词]CSS 层叠样式滤镜

中图分类号：TP3文献标识码：A文章编号：1671－7597（2009）0510109－01

一、CSS概述

CSS（Cascading Style Sheets）也就是层叠样式表，它可以控制和重设HTML中的绝大多数标记。如今网页的排版格式越来越复杂，很多效果需要通过CSS来实现。CSS有两个核心概念：层叠和样式。层叠（Cascading）

也就是说多个CSS样式可以作用于同一个对象，形成样式的层叠现象，CSS能够根据一套规则来决定对象应该继承哪些样式以及显示为什么样的效果；样式（Style）是CSS的基础，CSS通过一个个样式来作用于网页对象，并规定它们呈现为不同的外观。网页的外观正是通过无数个大大小小的样式来描绘的。一个网页内部可能包含无数个CSS样式，同时每个CSS样式内部也包含无数个规则。

二、CSS的优势

这一点可以分为以下三个主要方面：灵活性、呈现性和可访问性。

（一）灵活性。每个Web设计者和开发者在对布置好的页面进行一点“小小的”更改时，虽然只需要处理有限的几个页面，但往往要耗费很多的精力。这是因为定义页面外观的标记本身是页面的一部分。也就是Web页面内容与格式不分离。如果能够从实际页面的流程（或代码）中删除这些标记，或者采用更好的办法，即将其外置，就可以对这些标记进行集中更改。而这就是CSS所能做的。它的最大特点是让网页设计者在设计网页时可以将网页内容（Content）与显示格式（Format）分开编写，也即内容与表现的分离。比如在传统的基于表格的布局中，将站点浏览从页面左侧移到页面右侧需要几个小时重复而乏味的工作。但是，如果使用CSS的定位属性（通常称作CSS-P）来设计页面，只需更改外部样式表中的“浮动”或“位置”属性，即可更新页面。并且可以更新站点中使用该样式的所有页面，使网页的表现非常统一，容易修改。

（二）呈现性。传统的基于表格的布局是页面下载速度慢的主要原因。如果使用CSS，浏览器从服务器接收内容后，立刻就可以开始呈现过程，因为页面中没有或只有很少的显示标记。若使用外部样式表还有一个潜在的呈现方面的好处。即站点的第一页将提示浏览器将页面使用的已链接样式表文件缓存起来。从而使用CSS可以减少网页的代码量，增加网页的浏览速度，减少硬盘容量。总之，基于CSS的站点很容易实现快速更新、外观一致、代码教少以及更快的下载速度。

（三）可访问性。在决定使用何种Web页面布局工具时，重要的是要考虑哪一种方法最适合实现所需的布局目标，并且可以让大多数访问者顺利的浏览站点。这就是可访问性问题。利用CSS可以轻松建立可访问站点。这是因为使用CSS，可以在页面中完整定义不可视元素。由于CSS没有显示标记，当使用CSS-P进行设计时，设计者只专注于内容的实际“流”，考虑的是它在页面上的逻辑顺序。在查看文档的源代码时，段落在文档的html 中仍然是所看到的位置。这使页面更容易访问。

三、CSS的滤镜属性在动态网站中的应用举例

在开发动态网站中，CSS的作用不容忽视。很多时候，需要结合CSS来动态控制网页的布局，以及利用CSS来设计动态网页的显示效果。

例如，在Google新闻咨询中文主页中，可以动态定制网页的显示内容和方式。实际上它正是通过脚本动态控制CSS来实现的。如果缺少CSS技术的支持，设计类似的网页动态效果是非常困难的。下面利用CSS滤镜属性使页面产生多媒体效果。

1．CSS的滤镜属性的标识符是filter。它的书写格式是：

filter：filtername（parameters）

Filter：是滤镜属性选择符;

filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性;

parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。

2．CSS滤镜使用实例，模拟探照灯动画效果，如图1。

下面介绍制作方法：（1）插入一个图层，作为“父层”，该层用来放要显示的内容（文字或图片）。再在该层上插入一个层，作为子层，它主要用来产生遮罩效果。也就是当子层运动到父层时就可见，在父层之外不可见。（2）在父层属性面板上设置显示窗口，也就是设置图层的“Clip”属性，在该属性中用的是相对坐标，其中：L、T是左上角坐标；R、B是右下角坐标。以后的子层将只有在你设置的窗口中才显示。设置好的层属性参数面板如下图2。