本文和大家重點討論一下在Flex內應用CSS樣式，選擇用Flex實現CSS的方法必須基于環境和條件。如下的這些方法是用Flex實現CSS樣式時最為常用的。

在Flex內應用CSS樣式

選擇用Flex實現CSS的方法必須基于環境和條件。在考慮設計實現的可用選項時，最好是從較高的層次審視應用程序。如下的這些方法是用Flex實現CSS時最為常用的。

設置一個實例（內聯）上的樣式

擴展了FlexUIComponent基類的Flex組件允許作為內聯屬性設置常見樣式—換言之，即在MXML組件聲明標簽內（參見清單1）。一個顯示對象的布局屬性通常對該對象惟一，所以常常能夠看到某個組件被顯式地設置了如下這些屬性之一：x、y、height、width、top、right、left、bottom、horizontalCenter、verticalCenter、horizontalAlign和verticalAlign。

清單1.用MXML作為某個組件實例的屬性設置樣式    
 

<mx:Buttonidmx:Buttonid="volumeIcon"cornerRadius="0"alpha="0.9" 
 verticalCenter="0"enabled="true"toolTip="VolumeControl" 
 click="toggleVolumeControl();"/> 

清單1展示了設置樣式屬性的一個函數示例，這些屬性對id值為volumeIcon的Button組件的這個特定實例是惟一的。由于我知道它是惟一一個需要這些特定樣式值的按鈕，因此我已經顯式地設置了此特定按鈕的cornerRadius、alpha和verticalCenter。

設置MXML組件標簽上的樣式屬性的一條經驗是，只有在知道所設置的樣式值特定于該組件的情況下才以這種方式設置此屬性。比方說，您的應用程序要求一個容器能夠垂直堆疊顯示對象而不在其間留空隙。同時，您知道應用程序內的其他VBox容器則確實需要顯示對象之間有空隙。在這種情況下，您應該在VBox組件的該實例上顯式地設置verticalGap屬性，如清單2所示。

清單2.在VBox容器組件的這個實例上verticalGap被顯式地設為0    
 

<mx:VBoxidmx:VBoxid="myVBox"verticalGap="0"  
 x="15"y="15"width="100%"height="100%"> 
    
(...)  
    
</mx:VBox> 

 在MXML內嵌入CSS樣式

該方法所涉及到的是用<mx:Style/>標簽將樣式或資源直接嵌入到一個MXML文件內。出于實用的目的，現在需要在其中直接將樣式信息嵌入到MXML文件的實例很少。最重要的是要認識到如果應用程序包含很多被嵌入的CSS，那么隨著應用程序的增長，設計將越來越難以維護。認識到這一點，在使用這種方法時，要十分慎重，只有在需要的時候才使用它。清單3提供了嵌入樣式聲明的一個例子，該聲明應該保留在一個外部CSS文件內以便獲得更好的代碼可維護性。

清單3.將樣式直接嵌入到MXML應用程序文件內    
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 showFlexChrome="false" 
 borderStyle="none" 
 keyUp="{this.onKeyStrokeEvent(event);}"> 
   
   
 <mx:Style> 
  .bGroup{  
   borderSides:"left,bottom,right";  
   borderStyle:"solid";  
   borderColor:#6d6f71;  
   borderLeftThickness:3;  
   borderRightThickness:3;  
   borderBottomThickness:1;  
   dividerColor:#6d6f71;  
   dividerThickness:3;  
  }  
 </mx:Style> 
   
 <mx:Script> 
  <![CDATA[  
     
   (...)  

 不過，這并不是說它將永遠不會發生。清單4就是我基于FlexAplicationControlBar而為我的應用程序所構建的一個向下擴展（scaled-down）的組件。在所提供的設計內，控制欄內的每個按鈕實際上都是一個簡單的文本單詞，看上去更像是一個鏈接，而非按鈕。此外，所有這些單詞鏈接之間都有一個小的bullet分隔符。由于我已經有了整個應用程序的設計，因此我知道這種bullet分隔符是應用程序主控制欄所特有的，在任何其他地方都不會出現。最為重要的是，由于bullet在同一個組件內出現若干次，因此非常有必要將此圖像作為其自己的私有類嵌入到這個MXML文件內，以便我能從放置在這些鏈接之間的每個圖像控件中綁定它。否則，結果很有可能是正在創建的同一個圖像卻具有多個實例，這是對系統資源的一種浪費。

清單4.直接嵌入一個圖像    
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:ApplicationControlBarxmlns:mxmx:ApplicationControlBarxmlns:mx="http://www.adobe.com/  
2006/mxml"> 
 
<mx:Script> 
<![CDATA[  
   
[Embed(source="assets/bullet_black.png")]  
[Bindable]  
privatevarbullet:Class;  
 
]]> 
</mx:Script> 
 
 <mx:HBoxxmx:HBoxx="10"y="10"id="hbox"horizontalGap="10"  
width="350"> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Help"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="About"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Minimize"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Quit"styleName="appBarButton"/> 
 </mx:HBox> 
</mx:ApplicationControlBar> 
 

 外部CSS樣式表

一個Flex或AIR應用程序在其源代碼目錄的根部具有一個MXML文件，應用程序可以基于Application類（Flex）或WindowedApplication類（AIR）。這個文件就是默認的MXML應用程序文件，開始于<mx:Application/>或<mx:WindowedApplication/>。應用程序的樣式表源代碼應該立即出現在應用程序基類聲明之后（參見清單5）。

清單5.在除主應用程序MXML文件之外的任何文件內聲明樣式表都會導致錯誤    
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 showFlexChrome="false" 
 dropShadowEnabled="false" 
 borderStyle="none" 
 applicationComplete="{this.appInit(event);}" 
 > 
   
 <mx:Stylesourcemx:Stylesource="com/passalong/assets/RED_SKIN_MAIN.css"/> 
   
 <mx:Script> 
  <![CDATA[  
   ...  

 ◆保持應用程序樣式設置的最簡便也是最安全的方法是使用外部樣式表。實際上，從一個CSS文件就能合理保存一個大型應用程序的所有樣式。我選擇只使用一個CSS文件，出于兩個原因：第一個原因是我將始終知道到哪里可以找到我的樣式設置；第二個原因是在團隊開發情況下，其他開發人員也可以很容易找到樣式。此外，一種好的做法是很好地組織該文件，因為隨著應用程序的增長，CSS文件也必然會增長。

在構建您自己的主應用程序CSS文件時，通常一種好的做法是首先放置那些默認的組件樣式聲明。比如，若想要所有的工具提示在應用程序中都具有同樣的外觀，就可以使用ToolTip作為樣式名并將其放置在文件的開始。我趨向于將tooltip放置在應用程序的所有內容之前，以便讓我的應用程序盡量的保持用戶友好性。因此，tooltip組件在應用程序內出現的次數比其他任何組件都要多。由于默認組件樣式對應用程序的整體觀感具有巨大的影響，所以您需要能夠快速和容易地訪問到它們。這也是為什么要將這些樣式放在首位的原因了。

請注意在大多數應用程序內，為每個組件創建一個默認樣式并不意味著就完事大吉了。Button組件就是這樣一個例子。同樣地，要讓CSS代碼保持整齊，可以考慮對組件樣式子集進行分組。比如，三個稱為Button.musicPlayerPlay、Button.pageDown和Button.backToMenu的可選按鈕樣式將被一個挨一個地放置在樣式表內并被來自其他樣式組的注釋所分隔。

 【編輯推薦】

1. 四種聲明Flex CSS樣式的基本方法
2. FlexBuilder4十大新特性閃亮登場
3. 探索Flex和CSS的強大功能
4. FlexBuilder3.0與Eclipse3.4的完美結合
5. 解析Flex應用開發步驟 新特性和技術框架