在Flex中使用CSS

转自:http://www.scriptlover.com/pages/article.asp?ArticleID=269

一.使用<mx:Style>标签

xml 代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Style>
Button {
color: #ff0000;
borderColor: #cccccc;
themeColor: #00ff00;
fontFamily: Arial;
fontSize: 12;
fontWeight: normal;
}
.mylinkButton {
rollOverColor: #00ff00;
selectionColor: #00ff00;
color: #ffff00;
}
</mx:Style>

<mx:Button x="10" y="10" label="Button"/>
<mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>

</mx:Application>

二.使用css文件
使用css文件和使用<mx:Style>标签基本一样。先创建一个css文件mystyle.css，并将上面的样式内容复制进去。

css 代码
/* CSS file */
Button {
color: #ff0000;
borderColor: #cccccc;
themeColor: #00ff00;
fontFamily: Arial;
fontSize: 12;
fontWeight: normal;
}
.mylinkButton {
rollOverColor: #00ff00;
selectionColor: #00ff00;
color: #ffff00;
textRollOverColor: #0000ff;
}

再修改我们的主程序，使用<mx:Style>标签的source属性，指定css文件

xml 代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Style source="css/mystyle.css"/>

<mx:Button x="10" y="10" label="Button"/>
<mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>

</mx:Application>

三.使用编程方法
可以通过CSSStyleDeclaration对象，来设置css样式，也可以通过flex显示对象的setStyle()来设置样式。

private function init():void {
myLinkBtn.setStyle("color", "#ff0000");
myLinkBtn.setStyle("rollOverColor", "#ffff00");
}