flex中的css应用

一.使用

xml 代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns: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:Button x="10" y="10" label="Button"/>
19. <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>
20. </mx:Application>

二.使用css文件

使用css文件和使用

css 代码

1. /* CSS file */
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. }

再修改我们的主程序，使用

xml 代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:Style source="css/mystyle.css"/>
4. <mx:Button x="10" y="10" label="Button"/>
5. <mx:LinkButton styleName="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");

}

作者：wangcheng