学习笔记 在Flex中如何使用CSS文件

本文和大家重点讨论一下如何在Flex中使用CSS，主要包括使用<mx:Style>标签和使用CSS文件两部分内容，通过这两者的对比我们可以看出在Flex使用CSS的优越性。

在Flex中使用CSS

一.使用<mx:Style>标签

xml代码 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns: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:Buttonxmx:Buttonx="10"y="10"label="Button"/> 
<mx:LinkButtonstyleNamemx:LinkButtonstyleName="mylinkButton"label="LinkButton"  
x="10"y="40"/> 
 
</mx:Application> 
 

 二.使用CSS文件

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

CSS代码
 

/*CSSfile*/  
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代码
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
layout="absolute"> 
 
<mx:Stylesourcemx:Stylesource="CSS/mystyle.CSS"/> 
 
<mx:Buttonxmx:Buttonx="10"y="10"label="Button"/> 
<mx:LinkButtonstyleNamemx:LinkButtonstyleName="mylinkButton"label="LinkButton"
x="10"y="40"/> 
 
</mx:Application> 
 

 三.使用编程方法

可以通过CSSStyleDeclaration对象，来设置CSS样式，也可以通过Flex显示对象的setStyle()来设置样式。 

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

【编辑推荐】

1. 技术分享 Flex提交到jsp页面出现乱码解决办法
2. FlexBuilder4十大新特性闪亮登场
3. Flex框架中Cairngorm和Mate的优点大比拼
4. FlexBuilder3.0与Eclipse3.4的***结合
5. 解析Flex应用开发步骤 新特性和技术框架