Flex之組建樣式CSS（3全部可用4可用一部分）3

flex中的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();"& gt;//組件初始化時調用設定樣式的

腳本方法

</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邊框樣式nonesolidinset

outset

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.00

color文本顏色

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

outset

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負數

時遊標在標尺下方正數時在上方

?dataTipOffset

tickLength 刻度線的長度