Flex 4 对CSS做了很大的改进,虽然还不能像HTML那样随心所欲,但是也能满足任何项目的要求了。Flex3中的mx都要被fx取代。
Flex 不支持使用层叠样式表(CSS) 来控制组件的所有可视方面。属性, 比如 x, y, width和 height 是 UIComponent 类的属性, 而不是其样式, 因此, 无法在 CSS 中进行设置。您还必须知道您的主题支持哪些属性。Flex 中的默认主题并不支持所有样式属性。
一、设置样式的几种方式
· 使用本地样式定义
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
.solidBorder{ border-style:solid;}
#solidBorderPaddedVertically{
padding-top:12;
padding-bottom:12;
border-style:solid;
}
</fx:Style>
· 使用外部样式表(推荐)
<fx:Stylesource="external.css"/>
· 使用内联样式
可以像设定组件的属性一样在MXML标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。
例如:<:Button id="myButton"fontSize="15" label="My Button"/>
· 使用 setStyle() 方法
可以在ActionScript中使用方法来操作组件的样式属性。使用setStyle()方法的优先级是最高的。
setStyle() 方法采用两个参数: 样式名称和样式值。
<fx:Script>
<![CDATA[
privatefunction initVbox():void
{
box2.setStyle("paddingTop",12);
box2.setStyle("paddingBottom",12);
box2.setStyle("borderStyle","solid");
}
]]>
</fx:Script>
二、Flex CSS样式设置
详细见文档:《FLEX 4 CSS样式设置例》
1、四种基本的选择方式:
1)Type
例如:s|Button{ color: #FFFFFF; }
适合任意一个Button的实例。
2)Universal
例如:* { fontWeight: bold; } (注意要加上*号)
对程序中所有组件的字体都有效。
3)Class:由组件的stylename属性引用
例如:.rounded { cornerRadius: 10;}
则引用为:<s:Button styleName="rounded"label="Here be a Button"/>
4)ID:对应组件的ID
例如:#header{ backgroundColor: #FF0000; } (header为组件的ID)
Note:四种方式可以也可以通过组合形成新的选择方式
5)组合方式
例如:.mains|Button{ fontSize: 15; }
即对引用Class为main的组件内所有Button的样式都有影响。