Flex中的所有css应用方式

 

 

在FLEX中有很多方法来使用样式：

  一  使用本地样式定义

 

   使用<mx:Style>标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定

 

义。这些定义会应用到当前文档以及当前文档的子文档。

     <mx:style>

              

     .solidBorder{ //类选择样式

  border-style:solid;

 }

     button { // 组件定义样式

            border-style:solid;

}

 

 ....

     </mx:style>

    //应用到组件

   <mx:VBox styleName="solidBorder" />

    <mx:button/> //文档中的button自动应用样式表中的样式

 

  二 使用外部样式表

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

属性。

  <mx:Application ...>

   <mx:Style source="style/style.css"/>  //载入外部样式表

  ...

  </mx:Application>

   style.css文件中的样式表定义与本地样式定义相同。

 

 三  使用内联样式

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

。

    <mx:button borderStyle="solid">  //设定样式属性

 

 四  使用setStyle()方法

    可以在ActionScript中使用方法来操作组件的样式属性。使用setStyle()方法的优先级是最高的。

  <mx:Application ...>

  <mx:Script>

 <![CDATA[

 private functiom initButton():void {

  myButton.setStyle("paddingTop",12);

  myButton.setStyle("paddingBottom",12);

  }

 ]]>

</mx:Script>

 <mx:Button id="myButton" initialize="initButton();">  //组件初始化时调用设定样式的

脚本方法

  </mx:Application>