学习目标
1.了解Flex4 的对样式的设置有了哪些变化
2. 学会使用它们
实现步骤
在Flex 4以前，Flex对Css的支持是很别扭的，相对于HTML强大的Css功能，Flex只能说继承了很表面的一部分。在众多Flex 开发者的投票下，Flex4终于对Css支持做了很大的改进，虽然说仍然不能像HTML Css那样随心所欲，但也足够满足在任何项目中的需求了
在主题章节中我提到了在新的样式设置中增加了对名称空间的支持，这主要针对不同控件包中的控件设置样式，我们来回顾一下，看下面的css代码
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button {
color: #FF0000;
}
mx|Button {
color: #000000;
}
</fx:Style>
第一排的名称空间申明表明了s代表spark的内容而mx代表halo也就是我们flex3中的所有控件。 s|Button表示将spark包下的Button样式改变，而mx|Button则表示设置mx包下Button的样式。如果同学们还有一点不理解也没关系，只要记住这种设置方式即可，在会用以后再通过看帮助了解名称空间更多的内容。
现在我们来就通过例子看看Flex4对Css的支持都有哪些提高
1. 同一控件多样式的设置 在Css文件中定义下面的样式
.blackButton{
base-color:#000000;
}
.whiteFont{
color:#ffffff;
}
主mxml文件中添加代码
<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="css.css" />
<s:Group horizontalCenter="0" verticalCenter="0">
<s:Button label="样式设置" styleName="blackButton whiteFont" />
</s:Group>
</s:Application>
对button设置了styleName="blackButton whiteFont" 两个样式，运行结果见 图五十 （一）
2. 通过控件ID设置样式
在Css文件中定义下面的样式
#okButton{
baseColor:#ae0000;
color:#ffffff;
}
在上面的代码中加入另一个Button
<s:Button id="okButton" label=" Id设置样式"/>
运行结果见 图五十 （二）
3. 子控件样式设置
在Css中定义下面的样式
s|Panel s|Button{
baseColor:blue;
color:#ffffff;
}在代码中再加入一个Panel
<s:Panel id="test" title="Panel" >
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"
useVirtualLayout="true" />
</s:layout>
<s:Button label=" 子控件设置"/>
</s:Panel>
运行结果见 图五十 （三）
图五十
样式
4.状态样式设置
在Flex3或者之前的版本中我们必须在一个样式里设置比如一个按钮的所有状态样式，up, down, over这样做很不方便的一点是如果我需要修改某一个状态的外观意味着我要重写整个样式，而现在不必了。
在Css中定义下面的样式
#cancelButton:up{
baseColor:#538787;
color:#304f68;
}
#cancelButton:down{
baseColor:#917541;
color:#b8a553;
}
#cancelButton:over{
baseColor:#b8a553;
color:#333333;
}这里我对id为cancelButton的按钮做了样式设置，我们同样可以针对所有的Button, 只需修改前缀为 s|Button:xx即可。
代码中加入一个Button
<s:Button id="cancelButton" label="状态设置" />
运行结果如下 （图五十一）
图五十一
状态样式设置
以上就是Flex4中对Css样式的改进，是不是要强大得多了呢? 最后还有一点，同样在主题章节说到过，Spark主题中使用了很多图片作为控件的皮肤，因此Spark只支持部分的色彩样式, 它们是baseColor, color, contentBackgroundColor, focusColor, symbolColor, selectionColor, and rollOverColor,如果同学们想改变一些控件的背景，比如Button的背景样式，我们需要重新定义背景的skin图片才可以做到
总结：
Flex 4中的样式设置已经可以很好的满足项目中的需要，但仍然期待在下一个版本的Flex SDK中样式会变得更加的强大。