在Flex中使用CSS

#天琪#

转自:http://www.scriptlover.com/pages/article.asp?ArticleID=269

一.使用<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");
}