在Flex中使用样式

来源:互联网 发布:做淘宝亏本冲销量 编辑:程序博客网 时间:2024/03/29 22:22

一.使用<mx:Style>标签

xml 代码
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
  3. <mx:Style>
  4. Button{
  5. color:#ff0000;
  6. borderColor:#cccccc;
  7. themeColor:#00ff00;
  8. fontFamily:Arial;
  9. fontSize:12;
  10. fontWeight:normal;
  11. }
  12. .mylinkButton{
  13. rollOverColor:#00ff00;
  14. selectionColor:#00ff00;
  15. color:#ffff00;
  16. }
  17. </mx:Style>
  18. <mx:Buttonx="10"y="10"label="Button"/>
  19. <mx:LinkButtonstyleName="mylinkButton"label="LinkButton"x="10"y="40"/>
  20. </mx:Application>

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

css 代码
  1. /*CSSfile*/
  2. Button{
  3. color:#ff0000;
  4. borderColor:#cccccc;
  5. themeColor:#00ff00;
  6. fontFamily:Arial;
  7. fontSize:12;
  8. fontWeight:normal;
  9. }
  10. .mylinkButton{
  11. rollOverColor:#00ff00;
  12. selectionColor:#00ff00;
  13. color:#ffff00;
  14. textRollOverColor:#0000ff;
  15. }

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

xml 代码
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
  3. <mx:Stylesource="css/mystyle.css"/>
  4. <mx:Buttonx="10"y="10"label="Button"/>
  5. <mx:LinkButtonstyleName="mylinkButton"label="LinkButton"x="10"y="40"/>
  6. </mx:Application>

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

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

 

原创粉丝点击