Flex中的所有css应用方式

    技术2025-09-10  25

     

     

    在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>

    最新回复(0)