在Flex中使用CSS

一.使用<mx:Style>标签

xml 代码

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

二.使用css文件
使用css文件和使用<mx:Style>标签基本一样。先创建一个css文件mystyle.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. }  

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

xml 代码

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

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

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