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