本文和大家重點(diǎn)討論一下Flex3中應(yīng)用CSS完全詳解，比如說使用本地樣式定義，使用<mx:Style>標(biāo)簽在MXML文件中創(chuàng)建本地的樣式定義。這個標(biāo)簽包含了符合CSS2.0語法的樣式表定義。

Flex3中應(yīng)用CSS完全詳解

在Flex3中使用樣式方法

一、使用本地樣式定義

使用<mx:Style>標(biāo)簽在MXML文件中創(chuàng)建本地的樣式定義。這個標(biāo)簽包含了符合CSS2.0語法的樣式表定義。這些定義會應(yīng)用到當(dāng)前文檔以及當(dāng)前文檔的子文檔。

<mx:style> 
 
.solidBorder{//類選擇樣式  
 
border-style:solid;  
 
}  
 
button{//組件定義樣式  
 
border-style:solid;  
 
}  
....  
 
</mx:style> 
 
//應(yīng)用到組件  
 
<mx:VBoxstyleNamemx:VBoxstyleName="solidBorder"/> 
 
<mx:button/>//文檔中的button自動應(yīng)用樣式表中的樣式  
 

 二、使用外部樣式表

Flex3支持外部CSS樣式表。要應(yīng)用一個樣式表到當(dāng)前文檔和子文檔，使用<mx:Style>標(biāo)簽中的source屬性。

<mx:Application...> 
 
<mx:Stylesourcemx:Stylesource="style/style.css"/>//載入外部樣式表  
 
...  
 
</mx:Application> 
 

 style.css文件中的樣式表定義與本地樣式定義相同。

三、使用內(nèi)聯(lián)樣式

可以像設(shè)定組件的屬性一樣在MXML標(biāo)簽中設(shè)定樣式屬性。內(nèi)聯(lián)樣式的優(yōu)先級高于本地樣式和外部樣式。

<mx:buttonborderStylemx:buttonborderStyle="solid">//設(shè)定樣式屬性 

四、使用setStyle()方法

可以在ActionScript中使用方法來操作組件的樣式屬性。使用setStyle()方法的優(yōu)先級是***的。

<mx:Application...> 
 
<mx:Script> 
 
<![CDATA[privatefunctiominitButton():void{myButton.setStyle("paddingTop",12);myButton.setStyle("paddingBottom",12);}]]> 
 
</mx:Script> 
 
<mx:Buttonidmx:Buttonid="myButton"initialize="initButton();">//組件初始化時調(diào)用設(shè)定樣式的  
 

【編輯推薦】

1. 經(jīng)驗總結(jié) 解析Flex3與Flex4之間的區(qū)別
2. Flex3學(xué)習(xí)之簡單教程
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則