我们将展示以下几种例子:通过命名空间来定义全局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;
}
总结:
通过这些语法,我们能够更轻松的为组件制作样式了。