FLEX3中應用CSS完全詳解手冊(上)

編輯完這個FLEX下的CSS說明後，我基本已經兵臨崩潰邊緣了。在些天在AIRIA下了不少好東西，今天終於有空，也發一個比較不錯的東西給大家，相信都比較需要這個FLEX下的CSS使用方法的詳細說明（好像我這份還不夠詳細，望大家補充）。

AIRIA真的是一個不錯的網站，很高興在這裡認識大家。


在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的樣式。