Flex CSS样式与皮肤应用详解

本文档主要介绍了在Flex 4中如何自定义组件的外观，特别是通过CSS来填充按钮背景。提供了具体的代码示例，并探讨了Flex中的CSS使用。 在Flex 4中，我们可以利用CSS（层叠样式表）来定制组件的外观，使其更加符合应用程序的设计需求。CSS是一种强大的样式描述语言，常用于Web开发，它允许我们将界面设计与程序逻辑分离，以实现更好的控制和灵活性。 13.1 式样与皮肤 在Flex中，式样（Styles）和皮肤（Skin）是两个关键概念，用于定义组件的视觉表现。CSS在Flex中的应用使得界面美化变得更加便捷。 13.1.1 Flex CSS简介 Flex中的CSS遵循W3C标准，允许我们用CSS来呈现应用程序界面。CSS可以定义字体大小、颜色、布局等样式，使Flex组件的外观更具可定制性。 1. **样式名** - **自定义样式名**：以"."开头，如`.myStytle`，用于创建自定义的样式类。 - **组件名作为样式名**：例如`s|Button`，直接作用于Spark Button组件，设置其颜色。 - **组件id作为样式名**：使用"#"前缀，如`#okButton`，针对特定组件id设置样式。 - **分组样式名**：使用逗号分隔，如`.myStyle, s|Button`，将样式应用到多个组件。 - **全局选择器**：使用`global`关键字定义的样式会应用于所有组件，除非组件有特定的样式覆盖。 2. **属性** Flex中的样式属性包括字体大小、颜色、边距等，它们可以直接在组件上设置，也可以在CSS中定义。例如，全局字体大小和颜色可以通过`global { fontSize: 15; color: #ff00ff; }`进行设定。 在提供的代码示例中，展示了如何用XML语法来定义一个填充按钮背景的Rect元素，它使用线性渐变填充。通过调整`GradientEntry`的颜色和alpha值，可以实现按钮在不同状态（正常、鼠标悬停、按下）下的视觉变化。 这个例子展示了Flex 4中自定义组件外观的一种方法，即通过嵌入式XML CSS语法来定义组件的样式和皮肤。通过深入理解并熟练运用这些技术，开发者能够创建出更加独特和吸引人的用户界面。