資源描述：
《flex4組件：自定義外觀》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第13章Flex4組件：自定義外觀13.1樣式13.2皮膚13.1樣式13.1.1FlexCSS簡介CSS（CasscadingStyleSheet）是層疊樣式表的簡稱，它是描述文檔怎樣被呈現(xiàn)的語言，由W3C指定為規(guī)范。CSS標(biāo)準(zhǔn)最早應(yīng)用于Web開發(fā)中，使得程序開發(fā)和界面開發(fā)分離，可以對網(wǎng)頁獲得更好的控制和更高的靈活性。Flex中的樣式也支持CSS標(biāo)準(zhǔn)，即Flex應(yīng)用程序也可以使用CSS呈現(xiàn)。由于CSS的簡單、方便等優(yōu)點，逐漸成為了Flex應(yīng)用程序美化界面的最重要的方法，在Flex中的應(yīng)用前景越來越廣泛。13.1.1FlexCSS簡介1．樣式名（1）自定義
2、樣式名。自定義樣式名以“.”開頭，后接一個自定義的名稱，表示此樣式為自定義樣式名，例如以下代碼定義了一個自定義樣式myStytle：.myStytle{fontSize:15;color:#000fff;}13.1.1FlexCSS簡介（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簡介（3）組件id作為樣式名。將組件的id值作為樣式名，在組件的id值前面加上“#”，可以直接對某一個組件設(shè)置樣式，例如：#okButton{fontSize:15;color:#ffffff;}組件代碼如下所示：13.1.1FlexCSS簡介（4）分組樣式名。分組樣式名用于定義幾種內(nèi)容完全相同的樣式，不同的樣式名之間使用逗號“,”隔開，從而使CSS代碼更簡潔。例如：.myStyle,s
6、Button{fontSi
7、ze:15;color:#000fff;}（5）全局選擇器。使用global關(guān)鍵字作為樣式名將定義一個全局樣式，這樣就可以將該樣式應(yīng)用到程序中的所有組件中，除非組件重寫某個組件的樣式。例如：global{fontSize:15;color:#ff00ff;}13.1.1FlexCSS簡介2．屬性Flex中的樣式屬性既可以在樣式中定義，也可以直接在組件屬性中設(shè)置。以下根據(jù)功能的不同具體介紹在Flex4中可以應(yīng)用的常用樣式屬性。（1）字體。Flex4中的字體類屬性主要用于定義組件中字體的樣式，常用的字體屬性如表13.1所示。屬性名說明fontFamily要使用
8、的字體名稱或用逗號分隔的字體名稱列表。Flash運行時使用列表中的第一個可用字體呈現(xiàn)該元素fontLookup要使用的字體查找，有效值為device（系統(tǒng)字體）或embedded_cff（嵌入字體）fontSize字體大小，默認(rèn)單位為像素fontStyle是否使用斜體，值為normal時用于純文本，值為italic時用于斜體fontWeight字體是否粗細(xì)，有效值為normal（正常）或bold（加粗）color字體顏色13.1.1FlexCSS簡介以下代碼定義字體的樣式：.test{fontFamily:黑體;fontSize:18;fontStyle:
9、italic;fontWeight:bold;color:blue;}應(yīng)用樣式后的效果如圖所示。13.1.1FlexCSS簡介（2）文本。Flex4中的文本類屬性主要用于定義文本的樣式，常用的文本屬性如表13.2所示。以下代碼定義了文本樣式：.test{textAlign:right;textAlpha:0.5}設(shè)置文本樣式后的結(jié)果如圖所示。13.1.1FlexCSS簡介（3）定位。定位樣式屬性用于組件的定位，常用的定位屬性如表13.3所示。屬性名說明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簡介（4）背景。Flex4中的背景類樣式屬性用于設(shè)置組件的背景樣式，常用的
11、屬性如表13.4所示。屬性名說明backgroundColor組件
