flashBuilder-css

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

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

創作者介紹

佳佳的窩

天秤女~佳佳 發表在 痞客邦 PIXNET 留言(0) 人氣()