学习笔记 在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()来设置样式。