一.使用<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 代码
- ??
- 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"); }