編輯完這個(gè)FLEX下的CSS說明后，我基本已經(jīng)兵臨崩潰邊緣了。在些天在AIRIA下了不少好東西，今天終于有空，也發(fā)一個(gè)比較不錯(cuò)的東西給大家，相信都比較需要這個(gè)FLEX下的CSS使用方法的詳細(xì)說明（好像我這份還不夠詳細(xì)，望大家補(bǔ)充）。

AIRIA真的是一個(gè)不錯(cuò)的網(wǎng)站，很高興在這里認(rèn)識(shí)大家。


在FLEX中使用樣式方法



一、使用本地樣式定義

使用<mx:Style>標(biāo)簽在MXML文件中創(chuàng)建本地的樣式定義。這個(gè)標(biāo)簽包含了符合CSS2.0語法的樣式表定

義。這些定義會(huì)應(yīng)用到當(dāng)前文檔以及當(dāng)前文檔的子文檔。

<mx:style>

.solidBorder{//類選擇樣式

border-style:solid;

}

button{//組件定義樣式

border-style:solid;

}

....

</mx:style>

//應(yīng)用到組件

<mx:VBoxstyleName="solidBorder"/>

<mx:button/>//文檔中的button自動(dòng)應(yīng)用樣式表中的樣式

二、使用外部樣式表

FLEX支持外部CSS樣式表。要應(yīng)用一個(gè)樣式表到當(dāng)前文檔和子文檔，使用<mx:Style>標(biāo)簽中的source

屬性。

<mx:Application...>

<mx:Stylesource="style/style.css"/>//載入外部樣式表

...

</mx:Application>

style.css文件中的樣式表定義與本地樣式定義相同。

三、使用內(nèi)聯(lián)樣式

可以像設(shè)定組件的屬性一樣在MXML標(biāo)簽中設(shè)定樣式屬性。內(nèi)聯(lián)樣式的優(yōu)先級(jí)高于本地樣式和外部樣式

。

<mx:buttonborderStyle="solid">//設(shè)定樣式屬性

四、使用setStyle()方法

可以在ActionScript中使用方法來操作組件的樣式屬性。使用setStyle()方法的優(yōu)先級(jí)是最高的。

<mx:Application...>

<mx:Script>

<![CDATA[privatefunctiominitButton():void{myButton.setStyle("paddingTop",12);myButton.setStyle("paddingBottom",12);}]]>

</mx:Script>

<mx:Buttonid="myButton"initialize="initButton();">//組件初始化時(shí)調(diào)用設(shè)定樣式的

五、腳本方法

</mx:Application>各組件對(duì)應(yīng)的樣式屬性

themeColor主題顏色：如果對(duì)色彩樣式配置不想過多的去設(shè)置的話，themeColor是一個(gè)選擇。它可以讓你選擇一種基本色彩，然后組件的邊框，外觀等色彩將會(huì)以此色彩為基礎(chǔ)構(gòu)成一組缺省的樣式，組件均可使用此樣式屬性。



Application組件樣式屬性

backgroundImage背景圖使用Embed(source="");來應(yīng)用

backgroundColor背景色

backgroundGradientColors背景漸進(jìn)色這個(gè)屬性要設(shè)置2個(gè)色彩，漸進(jìn)起始色和

漸進(jìn)結(jié)束色，中間以逗號(hào)分隔

backgroundGradientAlphas背景漸進(jìn)色透明度這個(gè)屬性要設(shè)置2個(gè)透明度，對(duì)應(yīng)漸進(jìn)色

中的2種顏色值的范圍是0.00~1.00，中間以逗號(hào)分隔

panel組件樣式屬性

cornerRadius邊角度數(shù)panel外框邊角度數(shù)數(shù)值從0~280時(shí)為直角，數(shù)值越大，圓角弧度越大

headerHeight標(biāo)題頭高度panel標(biāo)題頭的高度數(shù)值從0~50

dropShadowEnabled是否顯示投影true和false2個(gè)屬性

shadowDistance投影大小dropShadowEnabled為true時(shí)有效數(shù)

值從0~20

shadowDirection投影方向3個(gè)屬性leftrightcenter

dropShadowColor投影的顏色

roundedBottomCorners底部邊角是否為圓角true和false2個(gè)屬性若為false，則底部邊角為直角，cornerRadius對(duì)其無影響；若為true，cornerRadius對(duì)底部邊角才會(huì)起作用

textAlign文字對(duì)齊方向3個(gè)屬性leftrightcenter

backgroundColor背景色除title外有內(nèi)容的部分背景色

backgroundAlpha背景透明度除title外有內(nèi)容的部分背景透明度數(shù)值從0.00~1.00

borderColor邊框色包括外邊框和title與主體內(nèi)容之間的邊框色

borderAlpha邊框透明度包括外邊框和title與主體內(nèi)容之間的邊框透明度數(shù)值從0.00~1.00

borderStyle邊框樣式undefined，none，solid3種樣式：默認(rèn)為undefined。當(dāng)取值為none或
solid時(shí)，title與主體內(nèi)容之間將無邊框間隔或是solid樣式。

borderThickness邊框厚度邊框樣式為solid時(shí)的邊框粗細(xì)程度，數(shù)值從0~20

headerColors標(biāo)題頭背景漸變色這個(gè)屬性要設(shè)置2個(gè)色彩，漸進(jìn)起始色和漸進(jìn)結(jié)束色，中間以逗號(hào)分隔

footerColors底部背景漸變色這個(gè)屬性要設(shè)置2個(gè)色彩，漸進(jìn)起始色和漸進(jìn)結(jié)束色，中間以逗號(hào)分隔

highlightAlphas高光透明度只針對(duì)headerColors有效。有2個(gè)數(shù)值，中間以逗號(hào)分隔前一個(gè)為高光亮度，從0.00~1.00，為1時(shí)最亮，為白色后一個(gè)為高光透明度，從0.00~1.00，為1時(shí)最透明(可通過設(shè)置制作出水晶半透明效果)

color文本顏色

若想設(shè)置panel中title中的字體，外觀，背景等樣式，為了不與panel中樣式相沖突，需在樣式
表中定義一個(gè)引用的樣式。

panel{

...

titleStyleName:"myTitleStyle";

...

}

然后新定義一個(gè)myTitleStyle樣式來設(shè)置title的樣式。

TabNavigator組件樣式屬性

tabHeight每個(gè)Tab的高度數(shù)值從0~50

tabWidth每個(gè)Tab的寬度數(shù)值從0~200

cornerRadius邊角圓角度每個(gè)Tab中主體內(nèi)容的邊角圓角度從0~20注意不是Tab的邊角

horizontalGap每個(gè)Tab之間的間隔寬度數(shù)值從-10~20當(dāng)為負(fù)數(shù)時(shí)，Tab將會(huì)出現(xiàn)重疊

horizontalAlignTab的對(duì)齊方向leftcenterright

paddingLeft左填充距離整個(gè)一組Tab的左填充距離，數(shù)值從0~20.不是指每個(gè)Tab的填充距離

paddingRight右填充距離整個(gè)一組Tab的右填充距離，數(shù)值從0~20.不是指每個(gè)Tab的填充距離

textAlign文本對(duì)齊方向每個(gè)Tab中主體內(nèi)容中的文本對(duì)齊方向leftcenterright

textIndentTab標(biāo)題偏移度每個(gè)Tab中標(biāo)題相對(duì)于居中位置的偏移程度數(shù)值從0~20

backgroundColor背景色Tab和Tab中主體內(nèi)容都會(huì)應(yīng)用此背景色

backgroundAlpha背景色透明度只針對(duì)Tab中主體內(nèi)容的背景色有效數(shù)值從0.00~1.00

borderStyle邊框樣式Tab中主體內(nèi)容的邊框樣式

nonesolidinsetoutset四種樣式

borderColor邊框顏色Tab中主體內(nèi)容的邊框顏色

borderThickness邊框粗細(xì)borderStyle為solid時(shí)有效數(shù)值從0~20

dropShadowEnabled是否顯示投影true和false2個(gè)屬性

shadowDistance投影大小dropShadowEnabled為true時(shí)有效數(shù)值從0~20

dropShadowColor投影的顏色

color主體內(nèi)容的文本顏色

若想設(shè)置TabNavigator中tab中的樣式，為了不與TabNavigator中樣式相沖突，需在樣式表中定義

一個(gè)引用的樣式。

TabNavigator{

...

tabStyleName:"myTabs";

...

}

然后新定義一個(gè)myTabs樣式來設(shè)置tab的樣式。

myTabs中的設(shè)置

cornerRadiusTab邊角圓角度每個(gè)Tab的邊角圓角度從0~20注意不是Tab主體內(nèi)容的邊角

fillColorsTab填充漸變色未選中的Tab的填充漸變色這個(gè)屬性要設(shè)置2個(gè)色彩，漸變起始色和漸變結(jié)束色，中間以逗號(hào)分隔

fillAlphasTab填充色透明度未選中的Tab的填充色透明度這個(gè)屬性要設(shè)置2個(gè)值，漸變起始色透明度和漸變結(jié)束色透明度，中間以逗號(hào)分隔，數(shù)值從0.00~1.00

backgroundColorTab背景色選中的Tab會(huì)應(yīng)用上背景色

backgroundAlphaTab背景色透明度數(shù)值從0.00~1.00

borderColorTab邊框顏色

textRollOverColor鼠標(biāo)經(jīng)過Tab時(shí)的Tab文字顏色

Accordion組件樣式屬性

headerHeight標(biāo)簽頭高度Accordion組件中每個(gè)標(biāo)簽頭的高度

dropShadowEnabled是否顯示投影true和false2個(gè)屬性

shadowDistance投影的大小從0~20

shadowDirection投影方向leftrightcenter

dropShadowColor投影的顏色

borderStyle邊框的樣式nonesolid

borderThickness邊框的粗細(xì)從0~20

backgroundColor背景色整個(gè)Accordion組件包括標(biāo)簽頭和主體內(nèi)容都會(huì)應(yīng)用上背景色

fillColors未選中的標(biāo)簽頭填充色這個(gè)屬性要設(shè)置4個(gè)色彩值：漸變起始色，漸變結(jié)束色，鼠標(biāo)經(jīng)過時(shí)漸變起始色，鼠標(biāo)經(jīng)過時(shí)漸變結(jié)束色

fillAlphas未選中的標(biāo)簽頭填充色透明度對(duì)應(yīng)于fillColors設(shè)置4個(gè)透明度數(shù)值從0.00~1.00

selectedFillColors選中的標(biāo)簽頭填充色這個(gè)屬性要設(shè)置2個(gè)色彩值：漸變起始色，漸變結(jié)束色

color標(biāo)簽頭文字的顏色

textRollOverColor鼠標(biāo)經(jīng)過標(biāo)簽頭時(shí)的文字顏色

textSelectedColor鼠標(biāo)點(diǎn)擊標(biāo)簽頭時(shí)的文字顏色

textIndent標(biāo)簽頭文字縮進(jìn)距離的大小數(shù)值從0~100

openDuration打開新標(biāo)簽的速度數(shù)值從0~1000

LinkBar組件樣式屬性

horizontalGap水平方向各鏈接之間的間隔數(shù)值從0~20

separatorWidth間隔線的粗細(xì)各鏈接之間間隔線的粗細(xì)數(shù)值從0~20

separatorColor間隔線的顏色

borderStyleLinkBar的邊框樣式nonesolid

borderColor邊框顏色

borderThickness邊框粗細(xì)程度數(shù)值從0~20

cornerRadius邊框圓角度數(shù)值從0~20

dropShadowEnabled是否顯示邊框投影true和false

shadowDistance投影大小數(shù)值從0~20

shadowDirection投影方向leftcenterright

dropShadowColor投影顏色

backgroundColor背景色

backgroundAlpha背景色透明度數(shù)值從0.00~1.00

color鏈接文字顏色

disabledColor選中的鏈接文字顏色

rollOverColor鼠標(biāo)經(jīng)過未選中的鏈接時(shí)的背景色

textRollOverColor鼠標(biāo)經(jīng)過未選中的鏈接時(shí)的文字色

selectionColor鼠標(biāo)點(diǎn)擊未選中的鏈接時(shí)的背景色

textSelectedColor鼠標(biāo)點(diǎn)擊未選中的鏈接時(shí)的文字色

ApplicationControlBar組件樣式屬性

cornerRadius邊框圓角度數(shù)值從0~20

dropShadowEnabled是否顯示邊框投影true和false

shadowDistance投影大小數(shù)值從0~20

dropShadowColor投影顏色

borderStyle邊框樣式defaultnonesolid

borderColor邊框顏色

borderThickness邊框粗細(xì)數(shù)值從0~20

backgroundColor背景顏色

fillColors填充漸變色這個(gè)屬性要設(shè)置2個(gè)色彩，漸變起始色和漸變結(jié)束色，中間以逗號(hào)分隔

fillAlphas填充色透明度這個(gè)屬性要設(shè)置2個(gè)透明度漸變起始色透明度和漸變結(jié)束色透明度

highlightAlphas高光透明度2個(gè)數(shù)值，中間以逗號(hào)分隔前一個(gè)為高光亮度，從0.00~1.00，為1時(shí)最亮，為白色后一個(gè)為高光透明度，從0.00~1.00，為1時(shí)最透明(可通過設(shè)置制作出水晶半透明效果)

backgroundColor背景色

List組件樣式屬性

backgroundColor背景色

backgroundAlpha背景色透明度數(shù)值從0.00~1.00

useRollOver是否使用鼠標(biāo)經(jīng)過List每一項(xiàng)時(shí)產(chǎn)生效果truefalse

rollOverColor鼠標(biāo)經(jīng)過每一項(xiàng)時(shí)的背景色useRollOver為true時(shí)有效

textRollOverColor鼠標(biāo)經(jīng)過每一項(xiàng)時(shí)的文字顏色useRollOver為true時(shí)有效

alternatingItemColorsList中間隔背景色這個(gè)屬性要設(shè)置2個(gè)色彩，某一項(xiàng)的背景色和下一項(xiàng)的背景色color選項(xiàng)文本顏色

selectionColor被選中項(xiàng)的背景色

textSelectedColor被選中項(xiàng)的文字顏色

textIndent選項(xiàng)文本縮進(jìn)距離

selectionDuration被選中項(xiàng)漸變速度被選中項(xiàng)背景色變?yōu)?br />
selectionColor中的值的速度，設(shè)置可實(shí)現(xiàn)漸變效果數(shù)值從0~5000值越大，漸變速度越慢