flex中使用css

一、Flex 内的 CSS
首先，对于具有 Web 设计背景的人，最为重要的是要理解 Flex CSS 并不遵循与 W3C CSS 规定相同的约定。
在 W3C CSS 版本 2.0 中被用来分离单词的连字符（-）并未用作 Flex 实现内的代码约定的一部分。相反，
CSS 的 Flex 实现使用了驼峰式大小写。比如，W3C CSS2 规范内的 vertical-center 对等于 Flex CSS 内
的 verticalCenter。如果您已经在使用了驼峰式大小写的编程语言内进行过编程，那么，这非常容易习惯。
好的消息是 CSS 2.0 规范内可用的大部分内容在 Flex CSS 实现内也可用。并且，CSS 的 Flex 实现是在
CSS 2.0 W3C 标准上的显著扩展，提供了额外的、对 Flex 组件惟一的样式属性。 
A、用 MXML 作为某个组件实例的属性设置样式
<mx:Button id="volumeIcon" cornerRadius="0" alpha="0.9"
verticalCenter="0" enabled="true" toolTip="Volume Control"
click="toggleVolumeControl();" />
B、在 MXML 内嵌入 CSS
<mx:WindowedApplication 
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
showFlexChrome="false">
<mx:Style>
.bGroup {
borderSides:"left,bottom,right";
borderStyle:"solid";
borderColor:#6d6f71;
borderLeftThickness:3;
borderRightThickness:3;
borderBottomThickness:1;
dividerColor:#6d6f71;
dividerThickness:3;
}
</mx:Style>
</mx:WindowedApplication>
C、外部样式表
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
showFlexChrome="false">
<mx:Style source="com/passalong/assets/RED_SKIN_MAIN.css"/>
</mx:WindowedApplication>
D、使用 getStyle() 和 setStyle()
二、运行时 CSS
在 Flex 内实现此任务十分容易。只需创建一个新的 CSS 文件，将 CSS 样式选择器放入其内，并保存此文件。
然后，在 Flex 导航面板（Flex Development 模式内的左上方的面板）内，右键单击刚刚创建的这个 CSS 文件，
然后单击 Compile CSS to SWF。 


使用 StyleManager 类在运行时加载预编译的样式表


private function loadFirstStyleSheet():void {
StyleManager.loadStyleDeclarations("CSS1.swf");
}

private function loadSecondStyleSheet():void {
StyleManager.loadStyleDeclarations("CSS2.swf");
}


计算成本
在运行时加载预先编译的样式表时，需要考虑的很重要一点是由此给用户系统带来的负荷。使用这个设计实现方法时
，应该非常谨慎和小心，过多的使用这个方法会因为缺少可用系统资源而快速降低应用程序的性能。