Flex CSS样式深入解析：从本地到外部样式

"这篇文档详细介绍了在Flex中使用CSS样式的方法，包括本地样式定义、外部样式表、内联样式和使用setStyle()方法。同时，提到了组件的样式属性，如themeColor，以及样式优先级的概念。" 在Flex中，CSS样式是用于定制组件外观的关键工具，下面将逐一解析这些知识点： 1. **本地样式定义**： 通过在MXML文件中使用`<mx:Style>`标签，你可以创建符合CSS2.0语法的样式定义。例如，定义一个名为`.solidBorder`的类选择器，为具有该类名的组件添加实线边框。同样，可以直接定义组件的样式，如`button`，使所有按钮都具有实线边框。应用样式到组件时，只需将`styleName`属性设为相应的类名。 2. **外部样式表**： Flex支持引用外部CSS样式表，使用`<mx:Style source="style.css">`将样式表加载到应用中。这允许将样式分离到单独的文件中，提高代码的可维护性和重用性。外部样式表的定义方式与本地样式定义相同。 3. **内联样式**： 内联样式是在MXML标签中直接设定样式属性，如`<mx:Button borderStyle="solid">`。这种方式的优先级高于本地样式和外部样式表，意味着它会覆盖相同属性的其他样式定义。 4. **使用setStyle()方法**： 在ActionScript中，可以通过`setStyle()`方法动态地改变组件的样式属性。这种方法的优先级最高，如示例中的`myButton.setStyle("paddingTop", 12)`和`myButton.setStyle("paddingBottom", 12)`，在组件初始化时设置内边距。 5. **组件样式属性**： 每个Flex组件都有其特定的样式属性，比如`themeColor`。这个属性允许设置一个基础颜色，Flex会根据这个颜色生成一套默认的配色方案，用于组件的边框、背景等。通过设置`themeColor`，可以统一应用风格而无需详细调整每个组件的颜色。 6. **样式优先级**： Flex中的样式优先级遵循CSS的常规规则：内联样式 > 本地样式 > 外部样式。`setStyle()`方法设置的样式具有最高的优先级，其次是内联样式，然后是通过`<mx:Style>`标签定义的本地样式，最后是外部样式表中的定义。 Flex中的CSS样式提供了一套丰富的机制，让开发者能够灵活地控制应用的视觉呈现，从全局的主题颜色到组件级别的个性化定制。理解并熟练运用这些方法，可以使Flex应用的界面设计更加美观且易于维护。