flex中的css应用

一.使用标签

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文件和使用标签基本一样。先创建一个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;
}

再修改我们的主程序，使用标签的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");
}

作者：wangcheng