1、 cssTest.mxml
2、 hello.css
<?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>
2、 hello.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;
}