Flex中CSS三种表达方式和区别

Flex中的CSS不同于Web中的CSS,只有一部分是相似的,而且不能有连字符,其表现形式有三种:
1、在组件标签中写,如:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
其中fontSize="12"就是一个CSS。
2、在应用文件中写,可以写在应用程序的Style标签中:
     <mx:Style>
           Button{
                  fontSize:12;
                  fontFamily:Arial;
          }
     </mx:Style>
这是通用样式的写法,这样写所有的Button都会是这个样式,如果想单独定义样式,可以用下面的方法:
     <mx:Style>
           .myButton{
                  fontSize:12;
                  fontFamily:Arial;
          }
     </mx:Style>
然后在组件中这样使用该样式
    <mx:Button styleName="myButton"/>
3、在外部CSS文件中写:
    <mx:Style source = "CSS文件路径"/>

第一种方式效率最高,但是会造成代码比较混乱,组建的属性和样式都混在一起了,也不便于维护。所以一般情况下建议把样式写在外部。
CSS有继承性,容器组建自动继承父容器中的CSS样式,如在Application标签中设置了fontSize = “12” 则里面的大部分组建都会继承这一样式;Flex中的组件支持多继承,可以同时拥有多重不冲突的CSS样式,如下面的例子中:
<mx:Style>
      Button{
         fontSize:12;
         fontFamily:Arial;
      }
      .mybutton{
         color:#FF000C;
      }
</mx:Style>
<mx:Button label="test" styleName="mybutton" />
在上述例子中,button组建既有color:#FF000C;样式,又继承了通用Button样式。
在flex 3 中不支持不同样式的组合应用,而在网页中的CSS却可以组合应用,如在网页中可以有如下的定义:
<li  class = "style1 style2"></li>
但是在flex 3 中一个组件的styleName只能学一个样式名称,不过在flex 4中开始支持不同样式的组合使用

Adobe从flex2就开始推出flex style exploer(样式设计器)了,我们可以方便的设计出自己所需要的样式来,
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值