FLEX3中應用CSS

在FLEX中使用樣式方法



一、使用本機樣式定義

使用<mx:Style>標籤在MXML檔案中建立本地的樣式定義。這個標籤包含了符合CSS2.0文法的樣式表定

義。這些定義會應用到當前文檔以及當前文檔的子文檔。

<mx:style>

.solidBorder{//類選擇樣式

border-style:solid;

}

button{//組件定義樣式

border-style:solid;

}

....

</mx:style>

//應用到組件

<mx:VBoxstyleName="solidBorder"/>

<mx:button/>//文檔中的button自動應用樣式表中的樣式

二、使用外部樣式表

FLEX支援外部CSS樣式表。要應用一個樣式表到當前文檔和子文檔，使用<mx:Style>標籤中的source

屬性。

<mx:Application...>

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

...

</mx:Application>

style.css檔案中的樣式表定義與本機樣式定義相同。

三、使用內聯樣式

可以像設定組件的屬性一樣在MXML標籤中設定樣式屬性。內聯樣式的優先順序高於本機樣式和外部樣式

。

<mx:buttonborderStyle="solid">//設定樣式屬性

四、使用setStyle()方法

可以在ActionScript中使用方法來操作組件的樣式屬性。使用setStyle()方法的優先順序是最高的。

<mx:Application...>

<mx:Script>

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

</mx:Script>

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

五、指令碼方法

</mx:Application>各組件對應的樣式屬性

themeColor佈景主題色彩：如果對色彩樣式配置不想過多的去設定的話，themeColor是一個選擇。它可以讓你選擇一種基本色彩，然後組件的邊框，外觀等色彩將會以此色彩為基礎構成一組預設的樣式，組件均可使用此樣式屬性。



Application組件樣式屬性

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

backgroundColor背景色

backgroundGradientColors背景漸進色這個屬性要設定2個色彩，漸進起始色和

漸進結束色，中間以逗號分隔

backgroundGradientAlphas背景漸進色透明度這個屬性要設定2個透明度，對應漸進色

中的2種顏色值的範圍是0.00~1.00，中間以逗號分隔

panel組件樣式屬性

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

headerHeight標題頭高度panel標題頭的高度數值從0~50

dropShadowEnabled是否顯示投影true和false2個屬性

shadowDistance投影大小dropShadowEnabled為true時有效數

值從0~20

shadowDirection投影方向3個屬性leftrightcenter

dropShadowColor投影的顏色

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

textAlign文字對齊方向3個屬性leftrightcenter

backgroundColor背景色除title外有內容的部分背景色

backgroundAlpha背景透明度除title外有內容的部分背景透明度數值從0.00~1.00

borderColor邊框色包括外邊框和title與主體內容之間的邊框色

borderAlpha邊框透明度包括外邊框和title與主體內容之間的邊框透明度數值從0.00~1.00

borderStyle邊框樣式undefined，none，solid3種樣式：預設為undefined。當取值為none或
solid時，title與主體內容之間將無邊框間隔或是solid樣式。

borderThickness邊框厚度邊框樣式為solid時的邊框粗細程度，數值從0~20

headerColors標題頭背景漸層色這個屬性要設定2個色彩，漸進起始色和漸進結束色，中間以逗號分隔

footerColors底部背景漸層色這個屬性要設定2個色彩，漸進起始色和漸進結束色，中間以逗號分隔

highlightAlphas高光透明度只針對headerColors有效。有2個數值，中間以逗號分隔前一個為高光亮度，從0.00~1.00，為1時最亮，為白色後一個為高光透明度，從0.00~1.00，為1時最透明(可通過設定製作出水晶半透明效果)

color文本顏色

若想設定panel中title中的字型，外觀，背景等樣式，為了不與panel中樣式相衝突，需在樣式
表中定義一個引用的樣式。

panel{

...

titleStyleName:"myTitleStyle";

...

}

然後新定義一個myTitleStyle樣式來設定title的樣式。

TabNavigator組件樣式屬性

tabHeight每個Tab的高度數值從0~50

tabWidth每個Tab的寬度數值從0~200

cornerRadius邊角圓角度每個Tab中主體內容的邊角圓角度從0~20注意不是Tab的邊角

horizontalGap每個Tab之間的間隔寬度數值從-10~20當為負數時，Tab將會出現重疊

horizontalAlignTab的對齊方向leftcenterright

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

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

textAlign文本對齊方向每個Tab中主體內容中的文本對齊方向leftcenterright

textIndentTab標題位移度每個Tab中標題相對於置中位置的位移程度數值從0~20

backgroundColor背景色Tab和Tab中主體內容都會應用此背景色

backgroundAlpha背景色透明度只針對Tab中主體內容的背景色有效數值從0.00~1.00

borderStyle邊框樣式Tab中主體內容的邊框樣式

nonesolidinsetoutset四種樣式

borderColor邊框顏色Tab中主體內容的邊框顏色

borderThickness邊框粗細borderStyle為solid時有效數值從0~20

dropShadowEnabled是否顯示投影true和false2個屬性

shadowDistance投影大小dropShadowEnabled為true時有效數值從0~20

dropShadowColor投影的顏色

color主體內容的文本顏色

若想設定TabNavigator中tab中的樣式，為了不與TabNavigator中樣式相衝突，需在樣式表中定義

一個引用的樣式。

TabNavigator{

...

tabStyleName:"myTabs";

...

}

然後新定義一個myTabs樣式來設定tab的樣式。

myTabs中的設定

cornerRadiusTab邊角圓角度每個Tab的邊角圓角度從0~20注意不是Tab主體內容的邊角

fillColorsTab填滿漸層色未選中的Tab的填滿漸層色這個屬性要設定2個色彩，漸層起始色和漸層結束色，中間以逗號分隔

fillAlphasTab填充色透明度未選中的Tab的填充色透明度這個屬性要設定2個值，漸層起始色透明度和漸層結束色透明度，中間以逗號分隔，數值從0.00~1.00

backgroundColorTab背景色選中的Tab會應用上背景色

backgroundAlphaTab背景色透明度數值從0.00~1.00

borderColorTab邊框顏色

textRollOverColor滑鼠經過Tab時的Tab文字顏色

Accordion組件樣式屬性

headerHeight標籤頭高度Accordion組件中每個標籤頭的高度

dropShadowEnabled是否顯示投影true和false2個屬性

shadowDistance投影的大小從0~20

shadowDirection投影方向leftrightcenter

dropShadowColor投影的顏色

borderStyle邊框的樣式nonesolid

borderThickness邊框的粗細從0~20

backgroundColor背景色整個Accordion組件包括標籤頭和主體內容都會應用上背景色

fillColors未選中的標籤頭填充色這個屬性要設定4個色彩值：漸層起始色，漸層結束色，滑鼠經過時漸層起始色，滑鼠經過時漸層結束色

fillAlphas未選中的標籤頭填充色透明度對應於fillColors設定4個透明度數值從0.00~1.00

selectedFillColors選中的標籤頭填充色這個屬性要設定2個色彩值：漸層起始色，漸層結束色

color標籤頭文字的顏色

textRollOverColor滑鼠經過標籤頭時的文字顏色

textSelectedColor滑鼠點擊標籤頭時的文字顏色

textIndent標籤頭文字縮排距離的大小數值從0~100

openDuration開啟新標籤的速度數值從0~1000

LinkBar組件樣式屬性

horizontalGap水平方向各連結之間的間隔數值從0~20

separatorWidth間隔線的粗細各連結之間間隔線的粗細數值從0~20

separatorColor間隔線的顏色

borderStyleLinkBar的邊框樣式nonesolid

borderColor邊框顏色

borderThickness邊框粗細程度數值從0~20

cornerRadius邊框圓角度數值從0~20

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

shadowDistance投影大小數值從0~20

shadowDirection投影方向leftcenterright

dropShadowColor投影顏色

backgroundColor背景色

backgroundAlpha背景色透明度數值從0.00~1.00

color連結文字顏色

disabledColor選中的連結文字顏色

rollOverColor滑鼠經過未選中的連結時的背景色

textRollOverColor滑鼠經過未選中的連結時的文字色

selectionColor滑鼠點擊未選中的連結時的背景色

textSelectedColor滑鼠點擊未選中的連結時的文字色

ApplicationControlBar組件樣式屬性

cornerRadius邊框圓角度數值從0~20

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

shadowDistance投影大小數值從0~20

dropShadowColor投影顏色

borderStyle邊框樣式defaultnonesolid

borderColor邊框顏色

borderThickness邊框粗細數值從0~20

backgroundColor背景顏色

fillColors填滿漸層色這個屬性要設定2個色彩，漸層起始色和漸層結束色，中間以逗號分隔

fillAlphas填充色透明度這個屬性要設定2個透明度漸層起始色透明度和漸層結束色透明度

highlightAlphas高光透明度2個數值，中間以逗號分隔前一個為高光亮度，從0.00~1.00，為1時最亮，為白色後一個為高光透明度，從0.00~1.00，為1時最透明(可通過設定製作出水晶半透明效果)

backgroundColor背景色

List組件樣式屬性

backgroundColor背景色

backgroundAlpha背景色透明度數值從0.00~1.00

useRollOver是否使用滑鼠經過List每一項時產生效果truefalse

rollOverColor滑鼠經過每一項時的背景色useRollOver為true時有效

textRollOverColor滑鼠經過每一項時的文字顏色useRollOver為true時有效

alternatingItemColorsList中間隔背景色這個屬性要設定2個色彩，某一項的背景色和下一項的背景色color選項文本顏色

selectionColor被選中項的背景色

textSelectedColor被選中項的文字顏色

textIndent選項文本縮排距離

selectionDuration被選中項漸層速度被選中項背景色變為

selectionColor中的值的速度，設定可實現漸層效果數值從0~5000值越大，漸層速度越慢

 

 

borderStyle邊框樣式  none/solid/..


borderColor邊框顏色

borderThickness邊框粗細數值從0~20

dropShadowEnabled是否顯示投影true和false2個屬性

shadowDistance投影大小dropShadowEnabled為true時有效數值從0~20，shadowDirection投影方向3個屬性leftrightcenter

dropShadowColor投影的顏色

DataGrid組件樣式屬性

backgroundColor背景色

backgroundAlpha背景色透明度數值從0.00~1.00

alternatingItemColors間隔背景顏色間隔項的顏色這個屬性要設定2個色彩，某一項的背景色和下一項的背景色

headerColors標題頭背景漸層顏色這個屬性要設定2個色彩，標題頭背景漸層起始色和標題頭背景漸層結束色

horizontalGridLines是否顯示橫向分隔線是否顯示每一行之間的橫向分隔線truefalse

horizontalGridLineColor橫向分隔線顏色horizontalGridLines為true時有效

verticalGridLines是否顯示垂直方向分隔線是否顯示每一行之間的橫向分隔線truefalse此屬性只對內容中的分隔線有效，標題頭的分隔線是預設的

verticalGridLineColor垂直方向分隔線顏色verticalGridLineColor為true時有效

useRollOver是否實現滑鼠經過時的變化效果truefalse

rollOverColor滑鼠經過一行時的本行背景色useRollOver為true時有效

textRollOverColor滑鼠經過一行時的本行文字顏色useRollOver為true時有效（這個屬性好像無效?）

color文字顏色

textSelectedColor被選中行的文字顏色（這個屬性好像無效?）

selectionColor被選中行的背景顏色

textIndent每一行文字縮排距離數值從0~30

Tree組件樣式屬性

backgroundColor背景色

backgroundAlpha背景色透明度數值從0.00~1.00

alternatingItemColors間隔行的顏色這個屬性設定2個色彩，某一行的背景色和下一行的背景色depthColors樹級結構中每級的背景色這個屬性可設定多個色彩，中間以逗號分隔。對應從樹的頂級到最後一級每1級的背景色。設定此屬性會覆蓋alternatingItemColors中的設定

useRollOver是否使用滑鼠經過每一行時的效果truefalse

rollOverColor滑鼠經過每一行時的背景色useRollOver為true時有效

textRollOverColor滑鼠經過每一行時的文字顏色useRollOver為true時有效

borderThickness邊框的粗細數值從0~20

color文本顏色

selectionColor被選中行的背景色

textSelectedColor被選中行的文本顏色

textIndent文字縮排值文字相對於表徵圖的縮排值從0~50

indentation每一層級相對於上一層級的縮排值從0~50

openDuration開啟和關閉本層內容的速度從0~1000

selectionDuration被選中層級的背景色漸層速度從0~3000

TextInput組件樣式屬性

backgroundColor背景色

backgroundAlpha背景色透明度數值從0.00~1.00color文本顏色

borderStyle邊框樣式nonesolidinset outset

borderColor邊框顏色

borderThickness邊框粗細borderStyle為solid時有效數值從0~20

cornerRadius邊框圓角度borderStyle為solid時有效數值從0~20

textIndent輸入框中內容縮排值數值從0~20

dropShadowEnabled是否顯示投影truefalse

shadowDirection投影方向leftcenterright

shadowDistance投影大小數值從0~20

dropShadowColor投影顏色

NumericStepper組件樣式屬性

backgroundColor背景色

backgroundAlpha背景色透明度數值從0.00~1.00

borderStyle邊框樣式nonesolidinset



fillColors上翻和下拉鍵的漸層填充色這個屬性要設定4個色彩
值：漸層起始色，漸層結束色，滑鼠經過時漸層起始色，滑鼠經過時漸層結束色

fillAlphas填充色透明度針對fillColors屬性這個屬性要設定4個透明度漸層起始色透明度漸層結束色透明度滑鼠經過時漸層起始色透明度滑鼠經過時漸層結束色透明度數值從0.00~1.00

highlightAlphas高光透明度針對fillColors屬性

2個數值，中間以逗號分隔前一個為高光亮度，從0.00~1.00，為1時最亮，為白色後一個為高光透明度，從0.00~1.00，為1時最透明

dropShadowEnabled是否顯示投影truefalse

shadowDirection投影方向leftcenterright

shadowDistance投影大小數值從0~20

dropShadowColor投影顏色

ComboBox組件樣式屬性color所有選項中文本顏色

borderColor邊框顏色

cornerRadius邊框圓角度數值從0~20

fillColors被選擇項的漸層填充色這個屬性要設定4個色

彩值：漸層起始色，漸層結束色，滑鼠經過時漸層起始色，滑鼠經過時漸層結束色

fillAlphas填充色透明度針對fillColors屬性這個屬性要設定4個透明度漸層起始色透明度漸層結束色透明度滑鼠經過時漸層起始色透明度滑鼠經過時漸層結束色透明度數值從0.00~1.00

highlightAlphas高光透明度針對fillColors屬性2個數值，中間以逗號分隔前一個為高光亮度，從0.00~1.00，為1時最亮，為白色後一個為高光透明度，從0.00~1.00，為1時最透明(可通過設定製作出水晶半透明效果)

backgroundAlpha下拉框的背景透明度數值從0.00~1.00

alternatingItemColors下拉框中選項的間隔背景色這個屬性設定2個色彩，某一行的背景色和下一行的背景色

useRollOver下拉框中選項是否使用滑鼠經過時的效果truefalse

rollOverColor下拉框中選項滑鼠經過時的背景色useRollOver為true時有效

textRollOverColor下拉框中選項滑鼠經過時的文本顏色useRollOver為true時有效

selectionColor下拉框中點擊某一行選項時的此選項背景色

textSelectedColor下拉框中點擊某一行選項時的此選項文本顏色

openDuration開啟下拉框的速度數值從10~2000

closeDuration關閉下拉框的速度數值從10~2000

CheckBox組件樣式屬性（包含單選和多選）

borderColor邊框顏色

color文本顏色

textRollOverColor滑鼠經過選擇框時的文本顏色

textSelectedColor滑鼠點擊選擇框時的文本顏色

fillColors選擇框的背景填充色這個屬性要設定4個色彩值：漸層起始色，漸層結束色，滑鼠經過時漸層起始色，滑鼠經過時漸層結束色

fillAlphas填充色透明度針對fillColors屬性這個屬性要設定4個透明度漸層起始色透明度漸層結束色透明度滑鼠經過時漸層起始色透明度滑鼠經過時漸層結束色透明度數值從0.00~1.00

highlightAlphas高光透明度針對fillColors屬性2個數值，中間以逗號分隔前一個為高光亮度，從0.00~1.00，為1時最亮，為白色後一個為高光透明度，從0.00~1.00，為1時最透明(可通過設定製作出水晶半透明效果)

HSlider(類似於溫度刻度計的組件HSlider為橫向的)組件樣式屬性

labelOffset刻度值文字與刻度計之間的距離數值從-50~50負數時刻度值文字在刻度計下方正數時在上方

thumbOffset刻度計中的遊標與尺規之間的距離數值從-50~50負數時遊標在尺規下方

 

From:

http://bbs.airia.cn/Design/thread-2652-1-1.aspx