FLEX4 CSS用法

CSS文件如下:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

/*-----------1、全局选择：定制全局样式-----------*/
mx|Button s|Button{
    color: #FF0000;
}

s|Button{
    color: #FF00FF;
}


/*-----------2、全局选择器：可在组件的属性里面指定样式类，然后在css中声明相应的样式类-----------*/
.myStyleClass{
    backgroundColor: #000000;
    color:#0000FF;
}


/*-----------3、ID选择：组件ID设置相应的组件样式-----------*/
#can01ID{
    backgroundColor: #0000FF;
}




/*-----------4、派生选择：类里面的组件ID来定义样式-----------*/
s|VGroup#vGroupID mx|ProgressBar{
    color:#FF0000;
}




/*-----------5、状态选择：通过状态定义样式，只适用于Button组件-----------*/
s|Button:down{
    fontSize:20;
    color:#FF0000;
}



mxml文件如下:
<?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="hello.css"/>
    
    <!--1、全局选择：定制全局样式-->
    <mx:Button id="s01ID" x="500" y="20" label="方式1_1号"/>
    <s:Button id="s02ID" x="500" y="50" label="方式1_2号" />
    
    <!--2、全局选择器：可在组件的属性里面指定样式类，然后在css中声明相应的样式类-->
    <mx:Canvas id="s03ID" x="500" y="100" width="200" height="100" styleName="myStyleClass"/>
    
    <!--3、ID选择：组件ID设置相应的组件样式-->
    <mx:Canvas id="can01ID" x="500" y="220" width="200" height="100"/>
    
    <!--4、派生选择：类里面的组件ID来定义样式-->
    <s:VGroup id="vGroupID" x="500" y="350">
        <mx:ProgressBar id="progressBarID"/>
    </s:VGroup>
    
    <!--5、状态选择：通过状态定义样式，只适用于Button组件-->
    <s:Button id="can02ID" x="500" y="450" width="200" height="100" label="方式5"/>
    
</s:Application>