flex4 css语法--简单

原文：http://www.blogjava.net/liuwuping12064915/archive/2011/06/05/351776.html

我们将展示以下几种例子：通过命名空间来定义全局CSS样式；通过具体组件的ID来定义个别组件的样式；通过类里面的组件ID来定义样式；通过组件样式定义样式。

详细说明：

首先让我们新建一个application。如下。包含两个按钮（一个Halo按钮和一个Spark按钮）和一个包含在容器VGroup里面progressBar。代码如下：

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/halo” minWidth=”1024″ minHeight=”768″>

?? ? ? ?<fx:Style source=”global.css” />

?? ? ? ?<s:layout>

?? ? ? ? ? ? ? ?<s:VerticalLayout />

?? ? ? ?</s:layout>

?? ? ? ?<mx:Button label=”Click me,I’m a Halo button!” ?id=”haloButton” />

?? ? ? ?<s:Button label=”Click me,I’m a spark cool and funkybutton !” id=”sparkButton” />

?? ? ? ?<s:VGroup id=”myBox”>

?? ? ? ? ? ? ? ?<mx:ProgressBar />

?? ? ? ?</s:VGroup>

</s:Application>

在CSS里面需要导入相应的命名空间，如：

@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/halo”;

定制全局样式

mx|Button

{

color:#ffffff;

}

s|Button

color:#000000;

当然也可在组件的属性里面指定样式类，然后在css中声明相应的样式类

.myStyleClass

?? {

?? color:#ff0000;

?? }

组件ID设置相应的组件样式

#haloButton

?? base-color:#0000ff;

#sparkButton

?? base-color:#ffffff;

类里面的组件ID来定义样式

s|VGroup#myBox mx|ProgressBar

通过状态定义样式

s|Button:down

?? color:#33CC33;

总结：

通过这些语法，我们能够更轻松的为组件制作样式了。