白桦的天空

第一次的心动，永远的心痛！
  首页  :: 新随笔  :: 联系 :: 管理

flex中的css应用

Posted on 2008-06-24 17:34  白桦的天空  阅读(237)  评论(0)  编辑  收藏  举报

一.使用标签

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

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

css 代码
  1. /* CSS file */  
  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. }  

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

xml 代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
  3.        
  4.     <mx:Style source="css/mystyle.css"/>  
  5.        
  6.     <mx:Button x="10" y="10" label="Button"/>  
  7.     <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>  
  8.        
  9. </mx:Application>  

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

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

作者：wangcheng