1、第17章 CSS美化界面,CSS标准最早应用于网页开发中，使得程序开发和界面开发分离。Flex也支持使用CSS。CSS由于其简单、方便的优点，逐渐成了Flex应用程序美化界面的最重要方法。本章将为读者介绍CSS的语法及Flex中如何使用CSS美化界面。,17.1 CSS简介,CSS是一种层叠样式表，可以有效地对布局、字体、颜色、背景和其它效果进行精确的控制。 属性名和属性值之间以“:”符分隔。不同属性名间以“;”符分隔。以下代码定义了两个样式“.myFontStyle”、“.myButton”。 一个常见的CSS定义包括样式名、属性、属性值。对于特殊的需求，需要其他语法支持，如单位、规则等。下
2、面将详细介绍CSS语法。,17.2 样式名,样式名是CSS定义的第一个元素，指明此CSS定义的名称。其他程序调用CSS样式时以样式名为准，所以在同一CSS文件中不能有同名的样式名。样式名可分为默认样式名、自定义样式名、分组样式名。,17.2.1 默认样式名,默认样式名是指此样式名与Flex组件的名称相同。例如，CSS文件中定义了一个名为“Button”的样式，此样式名与Flex中的按钮组件同名。 默认样式名的主要特点是“一改全改”，即定义默认样式后，Flex组件中相关的组件都使用此样式。这样就能保证同一应用程序中组件的风格是统一的。,17.2.2 自定义样式名,自定义样式名是指此样式是特殊的，
3、用以定制一个或若干个组件界面。 自定义样式以“.”符开头，指明此样式为自定义的样式，后接样式名称。 自定义样式主要用于对某一个或某几个组件使用特殊的样式。,17.2.3 分组样式名,若某几种样式的定义内容完全相同，可使用分组样式。这样可使得CSS代码更简洁。 需要注意的是，分组样式中的不同样式都使用相同的定义。不同样式名之间以“,”分隔。,17.3 属性,CSS中的属性非常丰富，按用途大致可分为字体、文本、背景等17类。本节将为读者详细介绍各种属性。,17.3.1 字体（Font）,字体类属性主要用于定义字体样式。,17.3.2 文本（Text）,文本类属性主要用于定义文本样式，是CSS属性中
4、最复杂的部分。,17.3.3 背景（Background）,背景类属性主要用于定义背景样式。,17.3.4 定位（Positioning）,定位类属性主要用于定位。,17.3.5 尺寸（Dimensions）,尺寸类属性主要用于定义尺寸。,17.3.6 布局（Layout）,布局类属性主要用于定义布局。,17.3.7 外补丁（Margins）,外补丁类属性主要用于定义外补丁。,17.3.8 边框（Borders）,边框类属性主要用于定义边框样式。,17.3.9 内补丁（Paddings）,内补丁类属性主要用于定义内补丁。,17.3.10 列表（Lists）,列表类属性主要用于定义列表样式。,1
5、7.3.11 表格（Table）,表格类属性主要用于定义表格样式。,17.3.12 滚动条（Scrollbar）,滚动条类属性主要用于定义滚动条样式。,17.3.13 打印（Printing）,打印类属性主要用于定义打印样式。,17.3.14 声音（Aural）,声音类属性主要用于定义声音样式。,17.4 单位,CSS语法中单位是最基础的元素。CSS中定义了长度、颜色、角度、时间、频率五大类计量单位。本小节将为读者介绍每类计量单位。,17.4.1 长度（Length）,CSS标准中长度单位包括相对长度单位和绝对长度单位。,17.4.2 颜色（Color）,1十六进制表示法 2RGB模型表示法
6、3英文名称表示法。,17.4.3 角度（Angle）,CSS标准中角度单位有deg、grad、rad 3种。 117.4.4 时间（Time）和频率（Frequency） CSS标准中时间单位有s（秒）、ms（毫秒）两种。1s=1000ms。CSS标准中频率单位有HZ（赫兹）、kHZ（千赫）两种。HZ和kHZ都是声波的基本单位。1kHz=1000Hz。,17.5 规则,规则是CSS标准中为使用特殊设备而定义的方法。CSS中规则都以“”开头。本小节将为读者介绍常用的几种规则。,17.5.1 导入外部样式表import,import规则用以指定导入的外部样式表及目标设备类型。 此规则其后的分号是必
7、需的。如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。 “url(导入路径)”、设备类型都是可选的，但不能两者都默认。 导入的外部样式表中的定义会被程序中的样式定义覆盖。,17.5.2 指定字符集charset,charset规则用以指定该样式表使用的字符集。 此规则无默认值。 此规则只能定义在外部样式表文件内。只允许定义一次，且必须在样式表的最前面。,17.5.3 导入外部字体font-face,font-face规则用以设置嵌入程序的外部字体。 此规则无默认值。 此规则可以使程序应用本地系统上没有的字体。,17.5.4 指定设备media,media规则用以指定样式表应用的设
8、备类型。,17.6 静态滤镜,静态滤镜是指为对象添加特殊的静态效果，如模糊效果、发光效果、旋转效果等。静态滤镜效果是静态的，即经过滤镜处理后结果。本节将为读者介绍CSS标准中常用的几种静态滤镜效果。,17.6.1 色彩层滤镜Gradient,Gradient滤镜在对象的背景和内容之间显示定制的色彩层。 enabled参数为可选项，类型为布尔值（Boolean）。 startColorStr参数为可选项，类型为字符串（String）。,17.6.2 边界图片滤镜AlphaImageLoader,AlphaImageLoader滤镜在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图
9、片的剪切和改变尺寸的操作。如果载入的是PNG格式，则0%-100%的透明度也被提供。,17.6.3 透明度滤镜Alpha,Alpha滤镜调整对象内容的透明度。 enabled参数为可选项，类型为布尔值（Boolean）。 style参数为可选项，类型为整数值（Integer）。 opacity参数为可选项，类型为整数值（Integer）。 finishOpacity参数为可选项，类型为整数值（Integer）。用于设置或检索透明渐变的结束透明度。取值范围为0-100。默认值为0，即完全透明。100为完全不透明。 startX参数为可选项，类型为整数值（Integer）。 startY参数为可选
10、项，类型为整数值（Integer）。 finishX参数为可选项，类型为整数值（Integer）。 finishY参数为可选项，类型为整数值（Integer）。,17.6.4 图片处理滤镜BasicImage,BasicImage滤镜用于色彩处理，图像旋转，或对象内容的透明度。,17.6.5 模糊滤镜Blur,Blur滤镜制作对象内容的模糊效果。 enabled参数为可选项，类型为布尔值（Boolean）。用于设置或检索滤镜是否激活。其值可为true、false。true（默认值）表示滤镜激活，false表示滤镜被禁止。 makeShadow参数为可选项，类型为布尔值（Boolean）。 pi
11、xelRadius参数为可选项，类型为浮点数（Float）。 shadowOpacity参数为可选项，类型为浮点数（Float）。,17.6.6 阴影滤镜DropShadow,DropShadow滤镜制作对象的阴影效果。 enabled参数为可选项，类型为布尔值（Boolean）。 color参数为可选项，类型为字符串（String）。 offX参数为可选项，类型为整数值（Integer）。 offY参数为可选项，类型为整数值（Integer）。 positive参数为可选项，类型为布尔值（Boolean）。,17.6.7 浮雕滤镜Emboss,Emboss滤镜用灰度值为对象内容制作浮雕纹理效
12、果。 enabled参数为可选项，类型为布尔值（Boolean）。 Bias参数为可选项，类型为浮点数（Float）。,17.6.8 发光滤镜Glow,Glow滤镜环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。,17.6.9 矩阵遮罩Matrix,Matrix滤镜使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。使用此滤镜可以建立下列效果。 左右反转。将M11和M12的值取负。 上下反转。将M21和M22的值取负。 改变尺寸。将M11和M12和M21和M22的值乘以相同的因数。 enabled参数为可选项，类型为布尔值（Boolean）。 Sizin
13、gMethod参数为可选项，类型为字符串（String）。,17.6.9 矩阵遮罩Matrix,FilterType参数为可选项，类型为字符串（String）。 Dx参数为可选项，类型为浮点数（Float）。 Dy参数为可选项，类型为浮点数（Float）。 M11参数为可选项，类型为浮点数（Float）。 M21参数为可选项，类型为浮点数（Float）。,17.6.10 运动模糊滤镜MotionBlur,MotionBlur滤镜为对象内容制作运动模糊效果。,17.6.11 波纹滤镜Wave,Wave滤镜为对象内容建立波纹扭曲效果。,17.6.12 X光滤镜Xray,Xray滤镜以X光效果显示对
14、象内容。,17.6.13 反相滤镜Invert,Invert滤镜反相显示对象内容。,17.7 转换滤镜,转换滤镜是指为对象添加特殊的转换效果，如百叶窗效果、大风车效果、滚动条效果等。CSS标准中定义了丰富的转换滤镜，基本能满足用户的要求。,17.7.1 百叶窗效果滤镜Blinds,Blinds滤镜用百叶窗开关效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 bands参数为可选项，类型为整数值（Integer）。,17.7.2 国际象棋棋盘效果滤镜CheckerBoard,CheckerBoard滤镜用类
15、似国际象棋棋盘的网格推拉效果转换对象内容。,17.7.3 渐隐效果滤镜Fade,Fade滤镜用渐隐效果转换对象内容。,17.7.4 滚动渐隐效果滤镜GradientWipe,GradientWipe滤镜用滚动渐隐效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 gradientSize参数为可选项，类型为浮点数（Real）。 motion参数为可选项，类型为字符串（String）。,17.7.5 对角扩张效果滤镜Insert,Insert滤镜用对角扩张效果转换对象内容。,17.7.6 放射状擦除效果滤镜R
16、adialWipe,RadialWipe滤镜用放射状擦除效果转换对象内容，效果类似汽车挡风玻璃的刮雨刀。,17.7.7 随机线条效果滤镜RandomBars,RandomBars滤镜用随机发生的线条转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 orientation参数为可读写，类型为字符串（String）。,17.7.8 随机像素溶解效果滤镜RandomDissolve,RandomDissolve滤镜用随机像素溶解效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 dur
17、ation参数为可选项，类型为浮点数（Real）。,17.7.9 拉伸（缩）变形效果滤镜Stretch,Stretch滤镜用拉伸（缩）变形效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 stretchStyle参数可读写，类型为字符串（String）。,17.7.10 风车叶轮旋转效果滤镜Wheel,Wheel滤镜用风车叶轮旋转效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 spokes参数可读写，类型为整数值（
18、Integer）。,17.7.11 擦地板的效果滤镜Zigzag,Zigzag滤镜用类似擦地板的效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 gridSizeX参数为可选项，类型为整数值（Integer）。 gridSizeY参数为可选项，类型为整数值（Integer）。,17.8 使用组件定义CSS,Flex 4.0应用程序中的CSS样式都是使用组件定义的。定义的方式有两种：组件内部定义CSS，组件调用外部CSS。本小节将详细介绍如何使用组件定义CSS。,17.8.2 组件调用外部CSS,外部CSS
19、文件的后缀名为“.css”，可使用任何文本编辑器编写。,17.8.3 两种CSS定义方式的比较,使用组件直接定义样式比较方便，且不需要其他文本工具。缺点是样式的有效范围只在该MXML文件。其他MXML文件若要应用相同的样式需重新定义。 外部CSS文件调入的方法操作简单，且可重复使用。另外，外部定义的CSS样式可在运行时动态编译，减小了程序的大小。运行时加载样式将在下面章节中介绍。 综上所述，推荐使用组件调用外部CSS的方法。使用该方法后，整个应用程序只需要定义一个外部CSS文件。重用性高，且将样式设计与程序设计有效地分离。,17.9 Flex3StyleExplorer工具辅助设计CSS样式,
20、Flex组件的样式属性有很多。用户使用时往往要查看组件帮助，以了解各种属性的作用。这种方式效率低且并不直观。这里推荐一个定制Flex组件CSS样式的有用工具Flex3StyleExplorer。在线版本的网址为“http:/ 3.0版本的，但是由于在CSS特性方面差别不大，所有同样也具有极大的参考价值。,17.10 Flex组件应用CSS样式,前面介绍了如何定义CSS样式。定义CSS样式后需要指定Flex组件应用某种CSS样式。 Flex 3.0组件中都一个styleName属性，用以指定组件使用的样式。关于样式名称需要说明的是，“.”符指明此样式为自定义的样式，并不是样式名的一部分，所以st
21、yleName属性的值不应包含“.”符。,17.11 运行时动态加载CSS样式,运行时动态加载CSS样式是指在程序运行时加载不同的CSS样式。这种的需求经常存在。例如，程序中有两个按钮，单击第一个按钮应用第一种主题样式，单击第二个按钮应用第二种主题样式。,17.11.1 调用SWF样式文件。,调用SWF样式文件使用StyleManager类的loadStyleDeclarations()方法。StyleManager类包含于“mx.styles.StyleManager”中。,17.11.2 撤消SWF样式文件,动态加载样式是通过StyleManager类控制，在应用另外的样式前需要撤消SWF
22、样式文件。使用StyleManager类的unloadStyleDeclarations()方法可实现撤消样式。,17.11.3 按钮控制应用样式,在MXML编辑器中编写组件。,17.11.4 完成剩余代码。,程序剩余的代码包括定义菜单组件、设定应用程序的背景和手形图标、在程序始初化处理函数中加载“style1.swf”样式、鼠标移动到菜单项的处理函数、鼠标移出菜单项的处理函数等。,17.12 小结,本章主要介绍了CSS样式的相关语法、Flex组件如何使用CSS美化界面、运行时动态加载CSS样式等内容。CSS定义时应特别注意其属性和属性值的意义。Flex组件美化界面前需要使用组件定义CSS样式。通过Flex2StyleExplorer工具能可视化地设计组件界面，同时生成相应的CSS代码。,
