Flex 4中的 CSS

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的样式都有影响。