佳佳的窩

好的，今天早上又到了還債時間，
不囉說，趕快開始……..

Flex 4跟Flex 3有一點很大的不同(除了前面講的spark和mx系列外)，
那就在於Flex 4對CSS的支援程度了。

在Flex 4中除了之前所支援的Type Selector與Class Selector之外，
正式加入了ID Selector的觀念，接下來我用幾個簡單的例子寫給大家看：

Type Selector:
這段寫法與Flex 3有比較大的差別，
原因在於Flex 4中有spark與mx兩大系列，
所以必須在前方描述你所用的元件到底是哪個系列的內容。

@namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx";   s|Button{ 	color:red; }   mx|Button{ 	color:blue; }

Class Selector:
Class的寫法與Flex 3無異，
直接使用在HTML中CSS的描述方法即可，
同樣的要注意在Flex中是使用styleName屬性來指派，
而非用class屬性。

.myRedButton{ 	color:blue; }

ID Selector:
在Flex 4中加入了ID選擇器，
他與HTML CSS的寫法也完全一樣，
直接用#符號指派給特定的id名稱即可。

#myRedButton{ 	color:blue; }

其他Selector:
Flex 4也正式的加入了階層的寫法，
如以下例子為例，若是要找到所有Group中的Button就可以寫成這樣，
只要你有CSS的背景知識，相信你應該可以很容易上手。

@namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx";   s|Group s|Button{ 	color:blue; }

透過這些CSS的樣式設定方法，
你可以快速的改變Flex中元件的樣式內容，
最棒的是你只需要將原來CSS的概念給套用上來，
就可以建置初容易管理的Flex應用程式。

最後提醒一下，
Flex 4的CSS必盡還是跟HTML的CSS有本質上的不同，
因此千萬不能混為一談，
還是需要知道與了解Flex的特性才能運用自如，
舉個例子來說，在Flex 4的CSS中，
甚至還能設定skin-class或是up-skin等樣式，
而這些都是HTML CSS中所沒有的項目。

http://blog.riaproject.com/flex/1413.html