使用FLEX如何调用CSS样式文件

html-css015

使用FLEX如何调用CSS样式文件,第1张

在源文件夹中，放置css样式文件（最好放在css包中，以便管理），例如css/style.css

然后在mxml文件中，加入标签：<fx:Style source="css/style.css"/>即可完成调用

如同html有class选择器，mxml标签中的styleName属性也是起同样作用

如Alert弹出窗口的旋转特效

css中

@namespace

s

"library://ns.adobe.com/flex/spark"

@namespace

mx

"library://ns.adobe.com/flex/mx"

mx|Alert

{

fontFamily:

VerdanaEmbedded

creationCompleteEffect:

myEffect

}

mxml中

<fx:Style

source="css/style.css"

/>

<fx:Declarations>

<mx:Sequence

id="myEffect">

<mx:Parallel>

<mx:Zoom

/>

<mx:Fade

/>

</mx:Parallel>

<mx:Rotate

/>

</mx:Sequence>

</fx:Declarations>

这样弹出窗口时就有了旋转特效

如果只是改样式的话有以下几种

直接改写默认控件样式

mx|button{

……

}

对指定控件增加样式，#后为控件ID

mx|Button#check{

……

}

或直接指定ID

#haloButton

{

base-color:#0000ff

}

通过状态定义样式

s|Button:down

{

color:#33CC33

}

增加控件样式，用styleName+"样式名"的方式应用于控件

.myButton{

……

}

增加子样式

mx|TabNavigator{

firstTabStyleName:

"MyFirstTab"

}

.MyTabs

{

……

}