探索 Flex 和 CSS 的强大功能

核心提示： 样式优先权虽然全局选择器基本上设置的是一个属性的默认值，该值很容易被覆盖，探索 Flex 和 CSS 的强大功能(4)，比如，如果我在内联（inline）或在我的 CSS 文件内将 Button 组件的 cornerRadius 属性设置为 0，这些属性对 id 值为 volumeIcon 的

样式优先权

虽然全局选择器基本上设置的是一个属性的默认值，该值很容易被覆盖。比如，如果我在内联（inline）或在我的 CSS 文件内将 Button 组件的 cornerRadius 属性设置为 0，它将优于我已经指定的 4 这一全局默认设置；因此，所有我的 Button 组件都将包含一个值为 0 的 cornerRadius 属性。而且，我将通过创建一个额外的样式来覆盖 4 这一全局设置和 0 这一 Button 设置：

Button.altCornersButton　
{　
　cornerRadius:　8;　
}　

在 Flex 内应用样式

选择用 Flex 实现 CSS 的方法必须基于环境和条件。在考虑设计实现的可用选项时，最好是从较高的层次审视应用程序。如下的这些方法是用 Flex 实现 CSS 时最为常用的。

设置一个实例（内联）上的样式

扩展了 Flex UIComponent 基类的 Flex 组件允许作为内联属性设置常见样式 — 换言之，即在 MXML 组件声明标签内（参见 清单 1）。一个显示对象的布局属性通常对该对象惟一，所以常常能够看到某个组件被显式地设置了如下这些属性之一：x、y、height、 width、top、right、left、bottom、horizontalCenter、 verticalCenter、horizontalAlign 和 verticalAlign。

清单 1. 用 MXML 作为某个组件实例的属性设置样式

　　　
<mx:Button　id="volumeIcon"　cornerRadius="0"　alpha="0.9"　
　verticalCenter="0"　enabled="true"　toolTip="Volume　Control"　
　click="toggleVolumeControl();"　/>　

清单 1 展示了设置样式属性的一个函数示例，这些属性对 id 值为 volumeIcon 的 Button 组件的这个特定实例是惟一的。由于我知道它是惟一一个需要这些特定样式值的按钮，因此我已经显式地设置了此特定按钮的 cornerRadius、alpha 和 verticalCenter。