<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="winAppCreationCompleteHandler(event)"
               width="640" height="320">
    <!-- 样式： http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ffe.html -->
    <!-- Skin： http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS53116913-F952-4b21-831F-9DE85B647C8A.html -->
    <!--方式一：外部的css;-->
    <fx:Style source="assets/Common.css" />
    
    <!--方式二：内部的css，使用styleName绑定 -->
        <fx:Style>
        .yiciLabel
        {
            fontSize:16;
            color:#ff0000;
        }
    </fx:Style>
    
    <!--方式三：内部的css，使用命名空间-->
        <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|Button
        {
            fontSize:18;
            color:#9933ff;
        }
        
        s|Button:up
        {
            chromeColor:#eeffee;
        }
        
        s|Button:over
        {
            chromeColor:#996633;
        }
        
        s|Button:down
        {
            chromeColor:#456a98;
            fontWeight:bold;
        }
        
        s|Application 
        {
            color:#0ffff0;
        }
        
        s|TextArea 
        {
            fontSize: 12;
        }
        
        @media (application-dpi: 160) and (os-platform: "Windows"), (os-platform: "Macintosh"), (os-platform: "Linux") 
        {
            s|TextArea 
            {
                fontSize: 12;
                color: red;
            }
        }
        @media (application-dpi: 240) and (os-platform: "Windows"), (os-platform: "Macintosh"), (os-platform: "Linux") 
        {
            s|TextArea {
                fontSize: 18;
                color: green;
            }
        }
        @media (application-dpi: 320) and (os-platform: "Windows"), (os-platform: "Macintosh"), (os-platform: "Linux") 
        {
            s|TextArea 
            {
                fontSize: 24;
                color: blue;
            }
        }
    </fx:Style>
    
    <!--方式四：用styleManager-->
    <!--方式五：用setStyle , getStyle-->
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            private function winAppCreationCompleteHandler(event:FlexEvent):void
            {
                styleManager.getStyleDeclaration("spark.components.Button").setStyle('color' , 0xff0000);
                styleManager.getStyleDeclaration("global").setStyle("textDecoration", "underline");
                styleManager.getStyleDeclaration("global").setStyle("fontFamily", "微软雅黑");
                
                var mySparkDynStyle:CSSStyleDeclaration  = new CSSStyleDeclaration();
                mySparkDynStyle.setStyle('color' , 0x00ffff);
                mySparkDynStyle.setStyle("fontSize" , 16);
                styleManager.setStyleDeclaration("spark.components.TextArea" , mySparkDynStyle , true);
                
                bt1.setStyle("color" , 0x00f0f0);
                bt1.label = bt1.getStyle("fontFamily");
                bt1.label = "陪你到天荒地老";
                
                myTextArea.setStyle("textDecoration" , null);
            }
        ]]>
    </fx:Script>
    
    <!--方式六：行类定义-->
    <s:Image source="http://help.adobe.com/en_US/flex/using/assets/butterfly.gif" left="10" top="10" right="10" bottom="10" />
    
    <s:VGroup width="100%" verticalAlign="middle" top="30">
        <s:HGroup width="100%" height="38" verticalAlign="middle" horizontalAlign="center">
            <s:Label text="我是电我是光，我是美丽的神话。">
                <s:filters>
                    <s:DropShadowFilter distance="10" angle="45"/>
                </s:filters>
            </s:Label>
            <s:Label text="一次就好" styleName="yiciLabel" />
            <s:Button label="一次就好"/>
            <s:Button id="bt1" label="在阳光灿烂的日子" />
            <s:Button label="一起寻找" fontSize="13" color="0x00f00f" />
        </s:HGroup>
        <s:VGroup paddingLeft="20" height="50" width="100%">
            <s:TextArea alpha="0.5" id="myTextArea" text="想看你笑，想看你闹，想拥你入我怀抱。上一秒红着脸在争吵，下一秒转身就能和好。" height="120" width="90%"/>
        </s:VGroup>
    </s:VGroup>
</s:Application>