四種聲明Flex CSS樣式的基本方法
本文和大家重點學(xué)習(xí)一下Flex CSS樣式的屬性，在開始創(chuàng)建Flex CSS樣式表之前，我建議您首先考慮您想要如何實現(xiàn)樣式。出于簡單性的考慮，我向您展示了四種聲明樣式的基本方法。
Flex內(nèi)的CSS
首先，對于具有Web設(shè)計背景的人，最為重要的是要理解Flex CSS樣式并不遵循與W3CCSS規(guī)定相同的約定。在W3CCSS版本2.0中被用來分離單詞的連字符（-）并未用作Flex實現(xiàn)內(nèi)的代碼約定的一部分。相反，CSS的Flex實現(xiàn)使用了駝峰式大小寫。比如，W3CCSS2規(guī)范內(nèi)的vertical-center對等于FlexCSS內(nèi)的verticalCenter。
如果您已經(jīng)在使用了駝峰式大小寫的編程語言內(nèi)進行過編程，那么，這非常容易習(xí)慣。好的消息是CSS2.0規(guī)范內(nèi)可用的大部分內(nèi)容在FlexCSS實現(xiàn)內(nèi)也可用。并且，CSS的Flex實現(xiàn)是在CSS2.0W3C標準上的顯著擴展，提供了額外的、對Flex組件惟一的樣式屬性。
維護樣式：組件與Flex CSS樣式屬性
在開始創(chuàng)建Flex CSS樣式表之前，我建議您首先考慮您想要如何實現(xiàn)樣式。出于簡單性的考慮，我向您展示了四種聲明樣式的基本方法：
◆通過組件的類名。通過將組件的類名作為樣式名來設(shè)置組件的樣式：
- TitleWindow{
- borderColor:#f7f7f7;
- borderAlpha:1;
- borderThicknessLeft:0;
- borderThicknessTop:0;
- borderThicknessBottom:0;
- borderThicknessRight:0;
- cornerRadius:0;
- headerHeight:0;
- highlightAlphas:1,1;
- headerColors:#f7f7f7,#f7f7f7;
- footerColors:#f7f7f7,#f7f7f7;
- backgroundColor:#f7f7f7;
- dropShadowEnabled:true;
- }
◆通過一個惟一的樣式名。通過使用一個惟一的Flex CSS樣式名來聲明樣式。請確保在名字之前使用一個句點并使用駝峰式大小寫約定：
.altText
- {
- fontFamily:TVNordEFCEOP-RegularCon;
- fontSize:18;
- color:#FFFFFF;
- }
◆通過一個組件外加一個樣式名。當同一個組件需要有多種設(shè)計時（這對于具有多個視圖狀態(tài)的應(yīng)用程序很常見），可以設(shè)置組件的樣式名。這種方法還確保了只有特定的組件才可以分配到特定的樣式：
- Text.bigYellowText
- {
- color:#EFB526;
- fontSize:36;
- fontWeight:Bold;
- }
◆通過全局選擇器。全局選擇器是一種特殊的選擇器，它能夠影響包含屬性集的應(yīng)用程序內(nèi)的每一個組件。比如，我可以將包含有cornerRadius樣式屬性的所有顯示對象組件的cornerRadius樣式屬性設(shè)置為4，如下所示：
- global
- {
- cornerRadius:4;
- }
Flex CSS樣式優(yōu)先權(quán)
雖然全局選擇器基本上設(shè)置的是一個屬性的默認值，該值很容易被覆蓋。比如，如果我在內(nèi)聯(lián)（inline）或在我的CSS文件內(nèi)將Button組件的cornerRadius屬性設(shè)置為0，它將優(yōu)于我已經(jīng)指定的4這一全局默認設(shè)置；因此，所有我的Button組件都將包含一個值為0的cornerRadius屬性。而且，我將通過創(chuàng)建一個額外的樣式來覆蓋4這一全局設(shè)置和0這一Button設(shè)置：
- Button.altCornersButton
- {
- cornerRadius:8;
- }
【編輯推薦】
- 學(xué)習(xí)筆記 在Flex中如何使用CSS文件
- 探索Flex和CSS的強大功能
- Flex框架中Cairngorm和Mate的優(yōu)點大比拼
- FlexBuilder3.0與Eclipse3.4的***結(jié)合
- 解析Flex應(yīng)用開發(fā)步驟 新特性和技術(shù)框架
