（转载） 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;

   }

总结：

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

评论

1 楼 荷尔萌 2013-10-12