flex4 css使用方式全总结实例

eric_616

1、 cssTest.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>

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;}