Using file:

Using file:

  • Stylebounding.mxml
  • Stylebounding2.mxml
  • myCSS0329.css
  • Stylebounding.mxml
  • Stylebounding2.mxml
  • myCSS0329.css

 

 

在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也可以新建一个CSS文件,在这个文件中写样式,后者更便于管理。

在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也可以新建一个CSS文件,在这个文件中写样式,后者更便于管理。

 

 

先来看看直接在mxml文件中写样式:

先来看看直接在mxml文件中写样式:

  • 方法一:直接在想要控制的控件中直接写CSS元素,如left,right,top等;
  • 方法二:还可以将CSS样式写在<fx:Style><fx:Style/>标签中,示例代码如下:

    1
    2 http://ns.adobe.com/mxml/2009”
    3 xmlns:s=”library://ns.adobe.com/flex/spark”
    4 xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″>
    5
    6 fx:Declarations
    7
    8 /fx:Declarations
    9
    10
    11 fx:Style
    12 @namespace s “library://ns.adobe.com/flex/spark”;
    13 @namespace mx “library://ns.adobe.com/flex/mx”;
    14
    15 #myTAEffect{
    16 mouseDownEffect:WipeLeft;
    17 duration:1000;
    18 }
    19 /fx:Style
    20
    21
    22
    23 /s:Application

  • 方法一:直接在想要控制的控件中直接写CSS元素,如left,right,top等;
  • 方法二:还可以将CSS样式写在<fx:Style><fx:Style/>标签中,示例代码如下:

    1
    2 http://ns.adobe.com/mxml/2009”
    3 xmlns:s=”library://ns.adobe.com/flex/spark”
    4 xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″>
    5
    6 fx:Declarations
    7
    8 /fx:Declarations
    9
    10
    11 fx:Style
    12 @namespace s “library://ns.adobe.com/flex/spark”;
    13 @namespace mx “library://ns.adobe.com/flex/mx”;
    14
    15 #myTAEffect{
    16 mouseDownEffect:WipeLeft;
    17 duration:1000;
    18 }
    19 /fx:Style
    20
    21
    22
    23 /s:Application

重点谈谈利用CSS文件控制样式。首先,新建一个CSS文件,填写CSS样式文件代码。之后,需要将CSS文件引用到MXML文件中,具体如下:

重点谈谈利用CSS文件控制样式。首先,新建一个CSS文件,填写CSS样式文件代码。之后,需要将CSS文件引用到MXML文件中,具体如下:

  <fx:Style source=”CSS文件路径”/>

  <fx:Style source=”CSS文件路径”/>

在CSS文件中,要获得想要控制的对象,可以通过在被控制对象里设置id来进行,如控制TextArea需要设置id:

在CSS文件中,要获得想要控制的对象,可以通过在被控制对象里设置id来进行,如控制TextArea需要设置id:

  <mx:TextArea id=”myTAEffect”/>

  <mx:TextArea id=”myTAEffect”/>

相应地,在CSS文件中通过“#”进行获取,如:

相应地,在CSS文件中通过“#”进行获取,如:

  #myTAEffect{

  #myTAEffect{

  mouseDownEffect:WipeLeft;

  mouseDownEffect:WipeLeft;

  duration:1000;

  duration:1000;

  }

  }

也可以像在Html设置类来进行,即设置styleName属性,如:

也可以像在Html设置类来进行,即设置styleName属性,如:

  <mx:TextArea styleName=”myTAEffect”/>

  <mx:TextArea styleName=”myTAEffect”/>

相应地,在CSS文件中通过“.”进行设置,如:

相应地,在CSS文件中通过“.”进行设置,如:

  .myTAEffect{

  .myTAEffect{

  mouseDownEffect:WipeLeft;

  mouseDownEffect:WipeLeft;

  duration:1000;

  duration:1000;

  }

  }

然后在MXML文件中用到这一样式时,只需在相应标签中添上此styleName即可。

然后在MXML文件中用到这一样式时,只需在相应标签中添上此styleName即可。

 

 

               上山若随,2016年3月30日于南京草场门

               上山若随,2016年3月30日于南京草场门

 

 

参考资料:

参考资料:

  1. 聂晓霞. Flex从入门到精通[M]. 北京:清华大学出版社,2008.
  2. bangzhu.
    Java与Flex学习笔记—-用CSS控制页面样式[OL].
  1. 聂晓霞. Flex从入门到精通[M]. 北京:清华大学出版社,2008.
  2. bangzhu.
    Java与Flex学习笔记—-用CSS控制页面样式[OL].

相关文章