我們將展示以下幾種例子:通過命名空間來定義全局CSS樣式;通過具體組件的ID來定義個別組件的樣式;通過類里面的組件ID來定義樣式;通過組件樣式定義樣式。
詳細說明:
首先讓我們新建一個application。如下。包含兩個按鈕(一個Halo按鈕和一個Spark按鈕)和一個包含在容器VGroup里面progressBar。代碼如下:
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/halo” minWidth=”1024″ minHeight=”768″>
<fx:Style source=”global.css” />
<s:layout>
<s:VerticalLayout />
</s:layout>
<mx:Button label=”Click me, I’m a Halo button!” id=”haloButton” />
<s:Button label=”Click me, I’m a spark cool and funkybutton !” id=”sparkButton” />
<s:VGroup id=”myBox”>
<mx:ProgressBar />
</s:VGroup>
</s:Application>
在CSS里面需要導入相應的命名空間,如:
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/halo”;
定制全局樣式
mx|Button
{
color:#ffffff;
}
s|Button
{
color:#000000;
}
當然也可在組件的屬性里面指定樣式類,然后在css中聲明相應的樣式類
.myStyleClass
{
color:#ff0000;
}
組件ID設置相應的組件樣式
#haloButton
{
base-color:#0000ff;
}
#sparkButton
{
base-color:#ffffff;
}
類里面的組件ID來定義樣式
s|VGroup#myBox mx|ProgressBar
{
color:#ff0000;
}
通過狀態定義樣式
s|Button:down
{
color:#33CC33;
}
總結:
通過這些語法,我們能夠更輕松的為組件制作樣式了。