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