Flex CSS样式详解：自定义与全局选择器

"本文档主要介绍了Flex_4组件中如何通过CSS进行自定义外观，包括了分组样式名和全局选择器的使用方法。" 在Flex_4中，CSS被广泛应用于组件外观的定制，它使得开发者可以更加灵活地控制应用程序的视觉呈现。Flex中的CSS支持标准的CSS语法，同时提供了一些特定于Flex的扩展。 13.1.1 Flex CSS简介 CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的样式语言。它允许开发者将样式和结构分离，提高了界面设计的效率和可维护性。在Flex中，CSS同样扮演着关键角色，让开发者能够方便地调整组件的颜色、字体、布局等视觉元素。 1. **样式名** - **自定义样式名**：以"."开头，后跟任意命名，如`.myStyle`，用于定义特定的样式规则。 - **组件名作为样式名**：直接使用组件名称，如`s|Button`，可以为整个组件类型定义样式。 - **组件ID作为样式名**：通过"#idName"来引用，如`#okButton`，可以针对性地为某个具有特定ID的组件设置样式。 - **分组样式名**：多个样式名之间用逗号分隔，如`.myStyle, s|Button`，用于定义一组共享相同样式的类。 - **全局选择器**：使用`global`关键字定义全局样式，如`global { fontSize:15; color:#ff00ff; }`，此样式会应用到所有组件，除非组件有特定的样式覆盖。 2. **属性** Flex中的样式属性可以涵盖颜色、字体大小、边距、填充、边框等多个方面。例如，`fontSize`用于设置字体大小，`color`用于设定文本颜色。这些属性可以在样式中定义，也可以直接在组件的属性设置中进行。 使用CSS自定义Flex组件外观时，可以通过组合不同的样式名和属性，实现丰富的视觉效果。分组样式名和全局选择器的运用，尤其能提高代码的复用性和维护性。对于大型项目，良好的CSS组织和规划可以使界面设计更加高效，同时保持代码的整洁和模块化。