本文和大家重點(diǎn)討論一下Flex如何使用層級(jí)樣式表（CSS），F(xiàn)lex使用層級(jí)樣式表標(biāo)準(zhǔn)來保證用戶界面的一致性，并使應(yīng)用更易于維護(hù)，就像在HTML中一樣，你可以在應(yīng)用中嵌入一個(gè)指向外部樣式表，或在特定的標(biāo)記元素下將某種風(fēng)格定義為其屬性。

Flex使用層級(jí)樣式表（CSS）

Flex使用層級(jí)樣式表標(biāo)準(zhǔn)來保證用戶界面的一致性，并使應(yīng)用更易于維護(hù)。就像在HTML中一樣，你可以在應(yīng)用中嵌入一個(gè)指向外部樣式表，或在特定的標(biāo)記元素下將某種風(fēng)格定義為其屬性。樣式表還允許定義字體。所需字體定義內(nèi)嵌于應(yīng)用的字節(jié)碼中，即使用戶的機(jī)器上沒有這樣的字體，也能被正確的渲染出來。

下面是一個(gè)名為main.css的外部樣式表。

@font-face{  
 
src:url("LucidaSansRegular.ttf");  
 
font-family:mainFont;  
 
}  
 
.error{  
 
color:#FF0000;  
 
font-size:12;  
 
}  
 
.title{  
 
font-family:mainFontBold;  
 
font-size:18;  
 
}  
　  
TextArea{  
 
backgroundColor:#EEF5EE;  
 
}  
 

 下面的例子通過使用<mx:style>標(biāo)簽聲明了一個(gè)外部樣式表，并對(duì)不同的控件使用了不同的樣式。

<?xmlversionxmlversion="1.0"encoding="iso-8859-1"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.macromedia.com/2003/mxml"> 
 
<mx:stylesrcmx:stylesrc="main.css"/> 
 
<mx:LabelstyleNamemx:LabelstyleName="error"text="Thisisanerror"/> 
 
<mx:LabelstyleNamemx:LabelstyleName="title"text="Thisisatitle"/> 
 
<mx:TextAreawidthmx:TextAreawidth="200"height="100"wordWrap="true"> 
 
ThisisaTextArea  
 
</mx:TextArea> 
 
</mx:Application> 
 

 圖5.使用外部樣式表的應(yīng)用

【編輯推薦】

1. 兩大方式實(shí)現(xiàn)Flex設(shè)置瀏覽器標(biāo)題 
2. FlexBuilder4十大新特性閃亮登場
3. FlexSDK4新特性中的主題 布局和樣式
4. 揭開Flex正則表達(dá)式的神秘面紗
5. 技術(shù)分享 在Flex中嵌入Flex字體的步驟