本文和大家重點討論一下如何在Flex中使用CSS，主要包括使用<mx:Style>標(biāo)簽和使用CSS文件兩部分內(nèi)容，通過這兩者的對比我們可以看出在Flex使用CSS的優(yōu)越性。

在Flex中使用CSS

一.使用<mx:Style>標(biāo)簽

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>標(biāo)簽基本一樣。先創(chuàng)建一個CSS文件mystyle.CSS，并將上面的樣式內(nèi)容復(fù)制進(jìn)去。

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>標(biāo)簽的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對象，來設(shè)置CSS樣式，也可以通過Flex顯示對象的setStyle()來設(shè)置樣式。 

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

【編輯推薦】

1. 技術(shù)分享 Flex提交到j(luò)sp頁面出現(xiàn)亂碼解決辦法
2. FlexBuilder4十大新特性閃亮登場
3. Flex框架中Cairngorm和Mate的優(yōu)點大比拼
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 解析Flex應(yīng)用開發(fā)步驟 新特性和技術(shù)框架