Flex中的样式（CSS）

改变Flex应用程序的两种方式：样式和皮肤

　　简单说一下这两个的区别：通过样式可以设置可见元素的字体大小及背景颜色，也可以改变Flex组件的外观。皮肤的概念比样式更宽泛，通过换肤可以一下子改变所有可见元素的外观，甚至重新排布元素在屏幕上的位置。

　　在Flex4之前的版本中定制外观主要方式是样式，而Flex中可以通过皮肤和样式共同设计有意思的用户界面。因此在MX组件中拥有很多内置样式，在Spark组件中拥有的样式要少的多，但Spark组件拥有一些基本造型能力，如果想要更彻底的改变 Spark组件的展示效果，可以通过为该组件实现一个皮肤，在Spark组件中CSS主要被用在三个方面：为一个应用程序定义一些整体属性，为组件装配皮肤以及能够运用高级CSS选择器。

Flex中CSS有四种使用方式

　　一、使用本地样式定义

　　使用<fx:Style>标签在MXML文件中创建本地的样式定义。

    <fx:Style>
        
        .lableColor{//类选择样式
            color:#333333;
        }
        S|Button{//组件定义样式 
            color:#333333;
            chromeColor:#AF5E5E;      
        }
    </fx:Style> 
    <!--应用到组件--> 
    <s:Label styleName="lableColor"/> 
    <!--文档中的Button自动应用样式表中的样式--> 
    <s:Button/>                            

　　二、使用外部样式表

　　FLEX支持外部CSS样式表。要应用一个样式表到当前文档和子文档，使用<fx:Style>标签中的source属性。

    <s:Application>
        <fx:Style source="defaults.css"/>
        <!--defaults.css文件中的样式表定义与本地样式定义相同-->
        <!--应用到组件-->
        <s:Label styleName="lableColor"/> 
        <!--文档中的button自动应用样式表中的样式-->
        <s:Button/>
    </s:Application>

　　三、通过标签属性设置行内样式

　　可以像设定组件的属性一样在MXML标签中设定样式属性。行内样式的优先级高于本地样式和外部样式

    <!--设置Button组件颜色chromeColor为#AF5E5E，字体颜色color为#333333，-->
    <!--字体fontFamily为Arial（宋体），字体大小fontSize为15-->
    <s:Button x="10" y="85" chromeColor="#AF5E5E" color="#333333" fontFamily="Arial" fontSize="15"/>

　　四、使用setStyle()方法

　　可以在ActionScript中使用方法来操作组件的样式属性。使用setStyle()方法的优先级是最高的。虽然setStyle()方法对于运行时修改样式很有用，但应该尽量少用。因为setStyle()会导致应用程序中很多可见的地方不断刷新，属于CPU占用率较高的操作。

  <s:Application>
    <fx:Script>
        <![CDATA[
        private function initButton():void{
            myButton.setStyle("paddingTop",12);
        
            myButton.setStyle("paddingBottom",12);
        }
        ]]>
    </fx:Script>
    <!--组件初始化时调用设定样式的脚本方法-->
    <s:Button id="myButton" initialize=" initButton();"/>
　</s:Application>

 CSS为Flex应用程序添加样式的途径

• 为个别组件设置个别样式
• 使用CSS类选择器为多个组件设置一组样式
• 使用类型选择器指定某种类型（例如Button）的所有实例都采用同一组样式
• 使用后代选择器指定符合某种层次关系（如位于VGroup中的所有Button实例）的组件采用同一组样式。
• 使用ID选择器指定具有特定id的某一个组件采用一组样式
• 使用伪选择器，为组件的某种特定状态（例如按钮的抬起状态）应用样式

 　　在标准的CSS中属性一般都使用小写字母，不同单词之间使用连字符分割，如：background-color:#FFFFF;，但在Flex中我们是使用驼峰大小写形式的定义的CSS属性，如：backgroundColor:#FFFFF;。之所以有这样的差别是因为连字符在XML不是有效的字符，而MXML标签都遵循XML标签的约定。但对于<fx:Style>标签中指定样式的时候，使用这两种语法，Flex都可以正确理解。

    <fx:Style>
        /* 这两个都是正确的 */
        .lableColor{
            background-color:#FFFFF;
        }
　　
        .lableColor{
            backgroundColor:#FFFFF;
        }
    </fx:Style>    

 　　CSS选择器可以包括，类选择器、类型选择器（也叫元素选择器、标签选择器）、后代选择器（也叫派生选择器）、ID选择器、伪（状态）选择器、全局选择器、交集选择器、并集选择器等，这些样式应用都已经在flex得到支持。

　　1.类选择器
      类选择器是通过一个样式类定义一组样式，以一个点开头，后面加上组件中通过styleName设置的样式名来表示，可以应用到一个或者多个组件上

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        .col{
            color: #FF0000;
        }
    </fx:Style>
    <s:Button label="button" styleName="col"/>
    <s:Label  text="label" styleName="col"/>

　　2.类型选择器（也叫元素选择器、标签选择器）

　　类型选择器是根据MXML文件中组件的类型来设置的，通过类型选择器可以把一组样式应用到某种类型的组件的所有实例上

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|TextInput{
             color: #FF0000;
        }
        s|Button{
            color: #FFFF00;
        }
    </fx:Style>
    <!--TextInput和Button组件的颜色会随之改变-->
    <s:TextInput text="text input"/>
    <s:Button label="button"/>

　　3.后代选择器（也叫派生选择器）
      后代选择器也叫派生选择器，可以使用后代选择器给一个元素（如容器、页面、组件）里的子元素定义样式，既指定符合某种层次关系（如位于VGroup中的所有Button实例）的组件采用同一组样式，是一种添加具体性的手段，可以为应用的样式指定包含层次

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|VGroup s|Button{
            color: #FF0000;
        }
    </fx:Style>
    <s:VGroup verticalAlign="middle">
          <s:Label text="Text Input 1"/>
          <s:Button text="button1"/>
    </s:VGroup>
    <s:Button text="button2"/>
    <!--button1字体颜色会变成红色，button2字体颜色不会改变-->

　　4.ID选择器
      ID选择器是只想为一个组件添加样式时使用的一种手段，ID选择器以#开头，后面加上组件中设置的ID名来表示的类别选择器

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        #btn{
            color: #FF0000;
        }
       
    </fx:Style>
    <s:Button id="btn" label="button"/>

　　5.伪（状态）选择器
      伪（状态）选择器为组件的不同状态（如：按钮的抬起、悬停、按下、禁用等等）设置样式，使用前面的四种选择器和伪选择器就可以为任何Flex组件的状态设置样式了

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|Button:up{
            color: #FF0000;
        }
        .col:over{
            color: #0000FF;
        }
        #btn:down{
            color: #FF00FF;
        }
        s|VGroup s|Button:disabled{
            color: #FF0000;
        }
    </fx:Style>
    <s:VGroup verticalAlign="middle">
        <s:Button id="btn" label="button" styleName="col"/>
    </s:VGroup>         

　　6.全局选择器
      全局选择器global可以将样式应用到所有的组件

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        global{
            color: #FF0000;
        }
    </fx:Style>
    <s:Label text="label"/>
    <s:TextInput text="text input"/>
    <s:Button label="button"/>

　　7.交集选择器
      交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集

　　8.并集选择器
      并集选择器是多个选择器通过逗号连接而成的，并集选择器同时选中各个基本选择器所选择的范围，任何形式的选择器都可以

加载外部字体

    <fx:Style>
       @font-face
    {
        fontFamily: UbuntuTitling-Bold;
        src: url("assets/fonts/UbuntuTitling-Bold.ttf");
        embedAsCFF: true;
    }
    </fx:Style>