本文和大家重點討論一下設置Flex樣式的幾種方法，相信通過本文的介紹你對Flex樣式的設置方法一定會有深刻的認識，歡迎大家一起來學習。

設置Flex樣式

一、使用<mx:stylesource="">導入外部樣式：

1、新建一個樣式文件（all.css）:

Panel{  
background-color:#00FF00;  
font-family:Geneva;  
}  
.lbl{  
font-size:16px;  
color:#FF0000;  
}  
 

 2、使用<mx:Stylesource="all.css"/>導入

二、使用<mx:stylesource="">導入外部樣式并使用“.”樣式

三、使用<mx:style>標簽設置Flex樣式

<mx:Style> 
.lblStyle{  
color:#0000FF;  
font-size:16px;  
}  
</mx:Style> 
 

 四、使用getStyle和setSty進行設置：lblGet.setStyle("color","#FF0000");

五、使用了StyleManner類來設置Flex樣式：

varcs:CSSStyleDeclaration=newCSSStyleDeclaration();  
 
cs.setStyle("color","#0000FF");  
 
StyleManager.setStyleDeclaration("Text",cs,true);  
 
StyleManager.setStyleDeclaration(哪一類型,樣式,是否立即生效);  
 

 六、通過全局變量：golbal

vargolbarStyle:CSSStyleDeclaration=StyleManager.getStyleDeclaration("golbal")

在進行操作

七、實例：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="13"creationComplete="init()"> 
 
<mx:Stylesourcemx:Stylesource="all.css"/> 
 
<mx:Style> 
.lblStyle{  
color:#0000FF;  
font-size:16px;  
}  
</mx:Style> 
 
 
<mx:Script> 
<![CDATA[  
importmx.controls.Text;  
internalfunctioninit():void  
{  
lblGet.setStyle("color","#FF0000");  
 
varcs:CSSStyleDeclaration=newCSSStyleDeclaration();  
 
cs.setStyle("color","#0000FF");  
 
StyleManager.setStyleDeclaration("Text",cs,true);  
}  
]]> 
</mx:Script> 
 
<mx:Labelxmx:Labelx="10"y="130"text="使用&lt;mx:stylesource=&quot;&quot;&gt;導入外部樣式并使用“.”樣式"id="lbl1"styleName="lbl"/> 
<mx:Labelxmx:Labelx="24"y="152"text="使用&lt;mx:style&gt;標簽設置Flex樣式"id="lbl"styleName="lblStyle"/> 
<mx:Labelxmx:Labelx="24"y="193"text="使用getStyle和setSty進行設置"id="lblGet"/> 
<mx:Textxmx:Textx="24"y="223"text="使用了StyleManner類來設置Flex樣式"id="txtInfo"/> 
<mx:Panelxmx:Panelx="10"y="34"width="308"height="84"layout="absolute"title="使用&lt;mx:stylesourcemx:stylesource=&quot;&quot;&gt;導入外部樣式"> 
</mx:Panel> 
<mx:TextInputxmx:TextInputx="326"y="10"text="使用了設計器"cornerRadius="7"width="98"backgroundColor="#8A64F8"/> 
 
</mx:Application> 
 

 【編輯推薦】

1. 解析Flex全屏模式設置方法
2. Flex樣式的添加和卸載
3. Flex及FlexBuilder2.0開發環境詳解
4. FlexBuilder3.0與Eclipse3.4的***結合
5. Flex內存泄露解決方法和內存釋放優化原則