### Flex 4 CSS 样式详解
#### 使用样式方法概览
Flex 4 提供了多种方式来管理和应用 CSS 样式，以便开发者能够更好地控制应用程序的视觉效果。以下是几种常见的样式应用方法：
##### 一、使用本地样式定义
本地样式定义允许开发者直接在 MXML 文件中使用 `<mx:Style>` 标签来创建样式规则。这种方式适用于在同一文件或其子文件中重复使用的样式。例如：
```xml
<mx:Style>
.solidBorder {
border-style: solid;
}
button {
border-style: solid;
}
</mx:Style>
<mx:VBox styleName="solidBorder"/>
<mx:Button/>
```
在这个例子中，`<mx:VBox>` 显式地指定了 `styleName` 属性，而 `<mx:Button>` 则会自动应用 `<mx:Style>` 中定义的默认样式。
##### 二、使用外部样式表
Flex 支持加载外部 CSS 文件作为样式资源。这可以通过 `<mx:Style>` 标签的 `source` 属性实现，例如：
```xml
<mx:Application>
<mx:Style source="style/style.css"/>
</mx:Application>
```
外部样式文件（如 `style.css`）中的样式定义与本地样式定义相似，但具有更好的可维护性和重用性。
##### 三、使用内联样式
在 MXML 标签中直接设置样式属性是一种便捷的方法，其优先级高于本地样式和外部样式。例如：
```xml
<mx:Button borderStyle="solid"/>
```
这种方式适合于单个组件的快速样式调整。
##### 四、使用 `setStyle()` 方法
在 ActionScript 中使用 `setStyle()` 方法可以动态地修改组件的样式属性，其优先级最高。例如：
```xml
<mx:Application>
<mx:Script><![CDATA[
private function initButton():void {
myButton.setStyle("paddingTop", 12);
myButton.setStyle("paddingBottom", 12);
}
]]></mx:Script>
<mx:Button id="myButton" initialize="initButton();"/>
</mx:Application>
```
这段代码展示了如何在组件初始化时动态设置 `paddingTop` 和 `paddingBottom` 的值。
##### 五、脚本方法
除了以上方法，Flex 还提供了一些其他的方式，比如通过设置 `themeColor` 来快速定义主题色系，从而简化样式的配置过程。例如：
```xml
<mx:Application themeColor="#FF0000"/>
```
这将使得整个应用程序的主题颜色基于红色进行构建。
#### 各组件样式属性详解
##### Application 组件样式属性
- **backgroundImage**: 使用 `Embed(source="")` 来指定背景图像。
- **backgroundColor**: 设置背景颜色。
- **backgroundGradientColors**: 设置背景渐变颜色，需要指定两个颜色值，中间用逗号分隔。
- **backgroundGradientAlphas**: 设置背景渐变透明度，同样需要指定两个透明度值，范围为 0.00 至 1.00，中间用逗号分隔。
##### Panel 组件样式属性
- **cornerRadius**: 设置面板外框的圆角程度，数值范围为 0 至 280，数值越大圆角越明显。
- **headerHeight**: 设置面板标题的高度。
- **dropShadowEnabled**: 是否启用阴影效果，接受 true 或 false。
- **shadowDistance**: 如果启用了阴影效果，则可以设置阴影的距离。
- **shadowDirection**: 设置阴影的方向，可选值为 left、right 或 center。
- **dropShadowColor**: 设置阴影的颜色。
- **roundedBottomCorners**: 设置底部边角是否为圆角。
- **textAlign**: 设置文本的对齐方式，可选值为 left、right 或 center。
- **backgroundColor**: 设置面板的背景颜色。
- **backgroundAlpha**: 设置面板背景的透明度。
- **borderColor**: 设置边框颜色。
以上就是 Flex 4 中 CSS 样式管理的基本方法及其部分组件的样式属性介绍。通过灵活运用这些方法和属性，开发者可以更加精细地控制用户界面的呈现效果。
