在Flex中施用CSS

在Flex中使用CSS
一.使用<mx:Style>标签
xml 代码

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
       
    <mx:Style>  
        Button {   
           color: #ff0000;   
           borderColor: #cccccc;   
           themeColor: #00ff00;   
           fontFamily: Arial;   
           fontSize: 12;   
           fontWeight: normal;   
        }   
        .mylinkButton {   
           rollOverColor: #00ff00;   
           selectionColor: #00ff00;   
           color: #ffff00;   
        }   
    </mx:Style>  
       
    <mx:Button x="10" y="10" label="Button"/>  
    <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>  
       
</mx:Application> 

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

/* CSS file */  
Button {   
   color: #ff0000;   
   borderColor: #cccccc;   
   themeColor: #00ff00;   
   fontFamily: Arial;   
   fontSize: 12;   
   fontWeight: normal;   
}   
.mylinkButton {   
   rollOverColor: #00ff00;   
   selectionColor: #00ff00;   
   color: #ffff00;   
   textRollOverColor: #0000ff;   
}  

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

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

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

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