Flex中使用CSS控制页面样式

Using file：

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

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

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

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

 <?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" minWidth="955" minHeight="600">

     <fx:Declarations>
         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
     </fx:Declarations>

     <!--在MXML中使用样式来实现行为控制-->
     <fx:Style>
         @namespace s "library://ns.adobe.com/flex/spark";
         @namespace mx "library://ns.adobe.com/flex/mx";

         #myTAEffect{
             mouseDownEffect:WipeLeft;
             duration:1000;
         }
     </fx:Style>

     <mx:TextArea id="myTAEffect"/>

 </s:Application>

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

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

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

　　<mx:TextArea id="myTAEffect"/>

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

　　#myTAEffect{

　　mouseDownEffect:WipeLeft;

　　duration:1000;

　　}

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

　　<mx:TextArea styleName="myTAEffect"/>

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

　　.myTAEffect{

　　mouseDownEffect:WipeLeft;

　　duration:1000;

　　}

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

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

参考资料：

1. 聂晓霞. Flex从入门到精通[M]. 北京:清华大学出版社,2008.

2. bangzhu. Java与Flex学习笔记----用CSS控制页面样式[OL].