flex4 css语法

问题：

?

Adobe新发布的flash builder 4 中对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;

?? }

?

总结：

?

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