在Flex中使用样式

一.使用<mx:Style>标签

xml 代码

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
3. <mx:Style>
4. Button{
5. color:#ff0000;
6. borderColor:#cccccc;
7. themeColor:#00ff00;
8. fontFamily:Arial;
9. fontSize:12;
10. fontWeight:normal;
11. }
12. .mylinkButton{
13. rollOverColor:#00ff00;
14. selectionColor:#00ff00;
15. color:#ffff00;
16. }
17. </mx:Style>
18. <mx:Buttonx="10"y="10"label="Button"/>
19. <mx:LinkButtonstyleName="mylinkButton"label="LinkButton"x="10"y="40"/>
20. </mx:Application>

二.使用css文件
使用css文件和使用<mx:Style>标签基本一样。先创建一个css文件mystyle.css，并将上面的样式内容复制进去。

css 代码

1. /*CSSfile*/
2. Button{
3. color:#ff0000;
4. borderColor:#cccccc;
5. themeColor:#00ff00;
6. fontFamily:Arial;
7. fontSize:12;
8. fontWeight:normal;
9. }
10. .mylinkButton{
11. rollOverColor:#00ff00;
12. selectionColor:#00ff00;
13. color:#ffff00;
14. textRollOverColor:#0000ff;
15. }

再修改我们的主程序，使用<mx:Style>标签的source属性，指定css文件

xml 代码

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
3. <mx:Stylesource="css/mystyle.css"/>
4. <mx:Buttonx="10"y="10"label="Button"/>
5. <mx:LinkButtonstyleName="mylinkButton"label="LinkButton"x="10"y="40"/>
6. </mx:Application>

三.使用编程方法
可以通过CSSStyleDeclaration对象，来设置css样式，也可以通过flex显示对象的setStyle()来设置样式。

private function init():void {
myLinkBtn.setStyle("color", "#ff0000");
myLinkBtn.setStyle("rollOverColor", "#ffff00");
}