（转载） flex4 css语法

我们将展示以下几种例子：通过命名空间来定义全局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

{

color:#ff0000;

}

通过状态定义样式

s|Button:down

{

color:#33CC33;

}

总结：

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