Flash Builder 創建CSS

1.global 選擇器將樣式應用于所有控件

在 Flash Builder 中創建新MXML 文件并切換到設計模式

屬性視圖右側的外觀視圖可更改外觀

?

Flash Builder 自動創建CSS 文件

CSS 文件有2 個命名空間：

§ s 指 Spark 組件

§ mx 指 MX 組件

1. Global 與Application 選擇器

global {color: #009900; fontSize: 12; }

Application 選擇器 § 應用程序容器是Flex 應用程序中最上面的容器

§ 應用于 Application 容器的所有樣式也都應用于其所有子容器和子類

§ 所有 Spark 樣式都是可繼承的

§ 任何 Spark 樣式都可以使用Application 選擇器來應用

§ 一些 MX 樣式是不可繼承的

§ 使用 Application 選擇器應用可繼承的MX 樣式

s|Application {color: #FFFF00; fontWeight: bold; fontFamily: Arial; fontSize: 22; }

mx|Application {color: #FF0000; fontWeight: bold; fontFamily: Verdana; fontSize: 18; }2.定義組件的外觀和樣式

CSS 在styleName 屬性中支持多個類選擇器類選擇器列表使用空格分隔

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/halo";

s|Button.redText {color:#FF0000; }

s|Button.fontType {font-family:"Courier"; }

<s:Button label="Send Email" styleName="redText fontType"/>

3.自定義組件選擇器

CSS 支持自定義命名空間(其中com.mycompany為自定義組件的包路徑)

@namespace comp "com.mycompany.*";

通過 CSS 應用組件外觀

mx|Menu {

skin: ClassReference(null);/*把預設skin設為null*/

skinClass:ClassReference("com.MenuStyle"); }

package com

{

import flash.display.GradientType;

?import flash.display.SpreadMethod;

?import flash.filters.DropShadowFilter;

?import flash.geom.Matrix;

?

?import mx.skins.halo.HaloBorder;

?

?public class MenuStyle extends HaloBorder

?{

? public function MenuStyle()

? {

?? super();

? }?

? override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

? {

?? super.updateDisplayList(unscaledWidth,unscaledHeight);

?? var dropShadow:DropShadowFilter = new DropShadowFilter();

??? dropShadow.color=0x000000; //設置投影

??? dropShadow.alpha=0.25; //陰影顏色的 Alpha 透明度值。

??? dropShadow.blurX=0; //水平模糊量。

??? dropShadow.blurY=10; //重置模糊量

??? dropShadow.angle=90; //陰影的角度。

??? dropShadow.distance=4; //陰影的偏移距離，以像素為單位。

??? filters=[dropShadow];

???

?? var w:Number = this.width;

?? var h:Number = this.height;

?? var fillType:String = GradientType.LINEAR; //漸變類型--直線

?? var color:Array = [0xE2E2E3,0xFFFFFF]; //漸變顏色

?? var alphas:Array = [80,100]; //colors 數組中對應顏色的 alpha 值數組

?? var ratios:Array = [0xE2, 0xFF];

?? var matr:Matrix = new Matrix();

?? matr.createGradientBox(22,22,0,0,0);

?? var spreadMethod:String = SpreadMethod.PAD;

?? graphics.beginGradientFill(fillType,color,alphas,ratios,matr,spreadMethod);

?? graphics.drawRect(0,0,w,h);

?? graphics.endFill();

? }

?}

}

高級CSS 選擇器

派生選擇器

1. 派生選擇器
2. 支持派生的多選擇器

在下列代碼中，color 屬性將僅影響Panel 容器中的 Button 控件

Panel Button { color: #CCCCCC; }

在下列代碼中，fontSize 屬性將僅影響ViewStack 容器（位于Panel 容器中）中的Label 控件

Panel ViewStack Label { fontSize: 12; }

id 選擇器

CSS id 選擇器匹配滿足一種id 條件的組件

id 選擇器與組件的具體實例綁定

聲明 id 條件的 CSS 語法使用# 作為 id 的前綴

#submitButton { color: #CCCCCC; }

通過在特定組件上設置id 屬性滿足 id 條件

<s:Button id="submitButton" />

不可以將id選擇器與其他選擇器組合使用

Panel Button#submitButton { color: #999999; }

具有id選擇器的id

Button#submitButton { color: #999999; }

類選擇器

類選擇器定義樣式（或類）集，可將它們應用于任何組件

在 CSS 中，首先創建類選擇器并定義其樣式

.header { color: #CCCCCC; }

然后使用styleName 屬性應用樣式，無需對MXML 組件使用前導點

<s:Panel styleName="header"> <s:Label text="Employee Information" /> </s:Panel>

類選擇器可與組件選擇器組合使用

s|Panel.header { color: #FF0000; }

類選擇器可應用于多個組件

偽選擇器

CSS 偽選擇器根據其它條件匹配組件

條件可以是動態的

條件可能不能被文檔樹定義

只有在指定的狀態中，才能使用偽選擇器將樣式應用于組件

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/halo";

s|Button:up { color: #FFFFFF; chromeColor: #555555; }

可以定義通用的偽選擇器

:up { color:#FF9933; }

s|Button:up { color: #FFFFFF; chromeColor: #555555; }

s|Button:over { color: #000000; chromeColor: #D9E028; }

s|Button:down { color:white; chromeColor: black; }