### Flex_CSS 完全手册知识点解析
#### 一、引言
Flex_CSS 是一种用于 Flex 应用程序的样式语言，它基于 CSS2.0 的语法，并进行了扩展以适应 Flex 框架的需求。Flex_CSS 提供了丰富的样式定义方式，使得开发者能够更加灵活地控制界面元素的外观和布局。
#### 二、使用本地样式定义
**本地样式定义** 是通过 `<mx:Style>` 标签在 MXML 文件中直接创建样式定义的一种方法。这种方式适用于需要在当前文档及其子文档中应用的样式规则。
##### 示例代码：
```xml
<mx:Style>
.solidBorder { // 类选择器
border-style: solid;
}
button { // 组件选择器
border-style: solid;
}
</mx:Style>
<mx:VBox styleName="solidBorder"/>
<mx:button/>
```
在这个示例中，`.solidBorder` 和 `button` 都被定义了 `border-style` 属性，当 `<mx:VBox>` 和 `<mx:button>` 被渲染时，它们将分别应用 `.solidBorder` 和默认 `button` 的样式。
#### 三、使用外部样式表
除了本地样式定义之外，Flex 还支持 **外部样式表**。开发者可以通过 `<mx:Style>` 标签的 `source` 属性引用外部的 CSS 文件，这样可以实现样式和逻辑的分离，便于维护。
##### 示例代码：
```xml
<mx:Application>
<mx:Style source="style/style.css"/>
</mx:Application>
```
这里的 `style.css` 文件中可以包含与本地样式相同的定义，但这些样式将应用于整个应用程序。
#### 四、使用内联样式
**内联样式** 是指直接在 MXML 标签中指定样式属性的方式。这种样式具有较高的优先级，通常用于覆盖其他样式规则。
##### 示例代码：
```xml
<mx:button borderStyle="solid"/>
```
这段代码直接设置了按钮的 `borderStyle` 为实线，这将覆盖任何可能存在的本地或外部样式表中的同名样式。
#### 五、使用 `setStyle()` 方法
对于更动态的样式设置，Flex 提供了 **`setStyle()` 方法**。这是一种通过 ActionScript 动态更改组件样式的方法，具有最高的优先级。
##### 示例代码：
```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>
```
在这个例子中，`initButton()` 函数在按钮初始化时被调用，通过 `setStyle()` 方法动态设置了按钮的上下填充。
#### 六、组件样式属性
Flex 中不同的 UI 组件提供了丰富的样式属性，下面是一些常见组件的样式属性：
##### Application 组件样式属性
- **backgroundImage**：设置背景图片。
- **backgroundColor**：设置背景颜色。
- **backgroundGradientColors**：设置背景渐变颜色，需要两个颜色值。
- **backgroundGradientAlphas**：设置背景渐变透明度，对应两个颜色值的透明度。
##### Panel 组件样式属性
- **cornerRadius**：设置边角圆角半径。
- **headerHeight**：设置标题栏高度。
- **dropShadowEnabled**：启用/禁用阴影效果。
- **shadowDistance**：阴影距离。
- **shadowDirection**：阴影方向。
- **dropShadowColor**：阴影颜色。
- **roundedBottomCorners**：底部边角是否为圆角。
- **textAlign**：文字对齐方式。
- **backgroundColor**：背景颜色。
- **backgroundAlpha**：背景透明度。
- **borderColor**：边框颜色。
#### 七、总结
通过上述内容我们可以了解到，Flex_CSS 提供了多种样式定义方式，包括本地样式定义、外部样式表、内联样式和 `setStyle()` 方法，每种方式都有其适用场景。此外，各种 UI 组件也提供了丰富的样式属性，以满足开发者对界面设计的不同需求。理解和掌握这些知识点对于开发高质量的 Flex 应用程序至关重要。
