1.global 選擇器將樣式應(yīng)用于所有控件

在 Flash Builder 中創(chuàng)建新MXML 文件并切換到設(shè)計(jì)模式

屬性視圖右側(cè)的外觀視圖可更改外觀

?

Flash Builder 自動(dòng)創(chuàng)建CSS 文件

CSS 文件有2 個(gè)命名空間：

§ s 指 Spark 組件

§ mx 指 MX 組件

1. Global 與Application 選擇器

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

Application 選擇器 § 應(yīng)用程序容器是Flex 應(yīng)用程序中最上面的容器

§ 應(yīng)用于 Application 容器的所有樣式也都應(yīng)用于其所有子容器和子類

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

§ 任何 Spark 樣式都可以使用Application 選擇器來(lái)應(yīng)用

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

§ 使用 Application 選擇器應(yīng)用可繼承的MX 樣式

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

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

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

@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.*";

通過(guò) CSS 應(yīng)用組件外觀

mx|Menu {

skin: ClassReference(null);/*把預(yù)設(shè)skin設(shè)為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; //設(shè)置投影

??? 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 數(shù)組中對(duì)應(yīng)顏色的 alpha 值數(shù)組

?? 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();

? }

?}

}

高級(jí)CSS 選擇器

派生選擇器

派生選擇器

支持派生的多選擇器

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

Panel Button { color: #CCCCCC; }

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

Panel ViewStack Label { fontSize: 12; }

id 選擇器

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

id 選擇器與組件的具體實(shí)例綁定

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

#submitButton { color: #CCCCCC; }

通過(guò)在特定組件上設(shè)置id 屬性滿足 id 條件

<s:Button id="submitButton" />

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

Panel Button#submitButton { color: #999999; }

具有id選擇器的id

Button#submitButton { color: #999999; }

類選擇器

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

在 CSS 中，首先創(chuàng)建類選擇器并定義其樣式

.header { color: #CCCCCC; }

然后使用styleName 屬性應(yīng)用樣式，無(wú)需對(duì)MXML 組件使用前導(dǎo)點(diǎn)

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

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

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

類選擇器可應(yīng)用于多個(gè)組件

偽選擇器

CSS 偽選擇器根據(jù)其它條件匹配組件

條件可以是動(dòng)態(tài)的

條件可能不能被文檔樹(shù)定義

只有在指定的狀態(tài)中，才能使用偽選擇器將樣式應(yīng)用于組件

@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; }

轉(zhuǎn)載于:https://www.cnblogs.com/ddw1997/p/3392270.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Flash Builder 创建CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。