Flex 样式表及皮肤总结归纳

http://www.chhua.com/web-note419

 

http://hi.baidu.com/mmxcq/blog/item/ea1161c7ba704ad4d0006050.html

 

http://blog.csdn.net/zeming_gu/archive/2011/01/11/6129607.aspx

 

 

 

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