flex4組件：自定義外觀

《flex4組件：自定義外觀》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第13章Flex4組件：自定義外觀13.1樣式13.2皮膚13.1樣式13.1.1FlexCSS簡(jiǎn)介CSS（CasscadingStyleSheet）是層疊樣式表的簡(jiǎn)稱，它是描述文檔怎樣被呈現(xiàn)的語(yǔ)言，由W3C指定為規(guī)范。CSS標(biāo)準(zhǔn)最早應(yīng)用于Web開(kāi)發(fā)中，使得程序開(kāi)發(fā)和界面開(kāi)發(fā)分離，可以對(duì)網(wǎng)頁(yè)獲得更好的控制和更高的靈活性。Flex中的樣式也支持CSS標(biāo)準(zhǔn)，即Flex應(yīng)用程序也可以使用CSS呈現(xiàn)。由于CSS的簡(jiǎn)單、方便等優(yōu)點(diǎn)，逐漸成為了Flex應(yīng)用程序美化界面的最重要的方法，在Flex中的應(yīng)用前景越來(lái)越廣泛。13.1.1FlexCSS簡(jiǎn)介1．樣式名（1）自定義

2、樣式名。自定義樣式名以“.”開(kāi)頭，后接一個(gè)自定義的名稱，表示此樣式為自定義樣式名，例如以下代碼定義了一個(gè)自定義樣式myStytle：.myStytle{fontSize:15;color:#000fff;}13.1.1FlexCSS簡(jiǎn)介（2）組件名作為樣式名。例如以下代碼：@namespaces"library://ns.adobe.com/flex/spark";@namespacemx"library://ns.adobe.com/flex/halo";s

3、Button{color:#ff0000;}mx

4、Button{color:

5、#000000;}13.1.1FlexCSS簡(jiǎn)介（3）組件id作為樣式名。將組件的id值作為樣式名，在組件的id值前面加上“#”，可以直接對(duì)某一個(gè)組件設(shè)置樣式，例如：#okButton{fontSize:15;color:#ffffff;}組件代碼如下所示：13.1.1FlexCSS簡(jiǎn)介（4）分組樣式名。分組樣式名用于定義幾種內(nèi)容完全相同的樣式，不同的樣式名之間使用逗號(hào)“,”隔開(kāi)，從而使CSS代碼更簡(jiǎn)潔。例如：.myStyle,s

6、Button{fontSi

7、ze:15;color:#000fff;}（5）全局選擇器。使用global關(guān)鍵字作為樣式名將定義一個(gè)全局樣式，這樣就可以將該樣式應(yīng)用到程序中的所有組件中，除非組件重寫某個(gè)組件的樣式。例如：global{fontSize:15;color:#ff00ff;}13.1.1FlexCSS簡(jiǎn)介2．屬性Flex中的樣式屬性既可以在樣式中定義，也可以直接在組件屬性中設(shè)置。以下根據(jù)功能的不同具體介紹在Flex4中可以應(yīng)用的常用樣式屬性。（1）字體。Flex4中的字體類屬性主要用于定義組件中字體的樣式，常用的字體屬性如表13.1所示。屬性名說(shuō)明fontFamily要使用

8、的字體名稱或用逗號(hào)分隔的字體名稱列表。Flash運(yùn)行時(shí)使用列表中的第一個(gè)可用字體呈現(xiàn)該元素fontLookup要使用的字體查找，有效值為device（系統(tǒng)字體）或embedded_cff（嵌入字體）fontSize字體大小，默認(rèn)單位為像素fontStyle是否使用斜體，值為normal時(shí)用于純文本，值為italic時(shí)用于斜體fontWeight字體是否粗細(xì)，有效值為normal（正常）或bold（加粗）color字體顏色13.1.1FlexCSS簡(jiǎn)介以下代碼定義字體的樣式：.test{fontFamily:黑體;fontSize:18;fontStyle:

9、italic;fontWeight:bold;color:blue;}應(yīng)用樣式后的效果如圖所示。13.1.1FlexCSS簡(jiǎn)介（2）文本。Flex4中的文本類屬性主要用于定義文本的樣式，常用的文本屬性如表13.2所示。以下代碼定義了文本樣式：.test{textAlign:right;textAlpha:0.5}設(shè)置文本樣式后的結(jié)果如圖所示。13.1.1FlexCSS簡(jiǎn)介（3）定位。定位樣式屬性用于組件的定位，常用的定位屬性如表13.3所示。屬性名說(shuō)明left從組件左邊到其父容器的內(nèi)容區(qū)域左邊之間的水平距離right從組件右邊到其父容器的內(nèi)容區(qū)域右邊之間的

10、水平距離top從組件頂邊到其父容器的內(nèi)容區(qū)域頂邊之間的垂直距離bottom從組件底邊到其父容器的內(nèi)容區(qū)域底邊之間的垂直距離paddingLeft容器左邊緣與文本之間的空間paddingRight容器右邊緣與文本之間的空間paddingBottom容器底部邊緣與文本之間的空間paddingTop容器頂部邊緣與文本之間的空間horizontalCenter從組件內(nèi)容區(qū)域的中心到組件中心的水平距離verticalCenter從組件內(nèi)容區(qū)域的中心到組件中心的垂直距離13.1.1FlexCSS簡(jiǎn)介（4）背景。Flex4中的背景類樣式屬性用于設(shè)置組件的背景樣式，常用的

11、屬性如表13.4所示。屬性名說(shuō)明backgroundColor組件