Flex4下的CSS规则

在Flex4 中提供了两套样式，一个是经典的Halo ，另外就是新加的Spark 。新的Spark 组件比Halo 更容易自定义样式，这对设计者来说是非常有益的，他们不必再为实现一个样式而写大量的代码了。下面来看一个实例，如有以下代码的一个mxml 文件：

<?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/mx"

>


	<fx:Style
>

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

		s|Button {
			color: #0000FF;
		}

		mx|Button {
			color: #FF0000;
		}

		.myStyle{
			font-style: italic;
		}
		#myId{
			font-size: 18;
		}
	</fx:Style
>


	<s:Panel
 title="JuLabs.me Flex4 CSS Demo"

 styleName="myStyle"

 width="100%"

 height="100%"

>


		<s:layout
>

			<s:VerticalLayout
 />

		</s:layout
>


		<s:Button
 label="蓝色 spark 18号"

 id="myId"

 />


		<mx:Button
 label="红色 halo 斜体"

 styleName="myStyle"

 />


	</s:Panel
>


</s:Application
>

在此例中CSS 代码写在fx:Style 标签里，CSS 代码首先要申明命名空间，如下：

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

上面的代码把s 指向了Spark ，把mx 指向了Halo 。然后就可以写相应的CSS 代码了，但在每个样式前面也要加上命名空间名称，子选择符也要加上。如：

s
|Button
 {
	color
: #0000FF

;

}

mx|Button
 {
	color
: #FF0000

;

}

上面的代码一个定义了Spark 样式的蓝色Button ，第二个定义了Halo 样式的红色Button 。如果在项目中只使用一种样式，那么也可以将这个样式定为默认样式。比如要将Spark 定为默认样式，可以用下面的语句：

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

这样，在写CSS 样式时就不用在每个选择符前面加s| 了。

如果是自定义的组件，可以用下面的语句：

@namespace theme “me.julabs
.theme
.*”;
theme|Button
 {
	padding-left
: 20

;

}

上面的代码把theme 指向自己定义的组件，这样就可以用theme| 引用自定义的组件了。

也完全可以使用组件的styleName 和id 属性来设置它们的样式，这样也不需要在选择符前面加s| 之类的命名空间名称。如下：

.myStyle
{
	font-style
: italic
;

}

#myId
{
	font-size
: 18

;

}

这个例子里的CSS 代码都是直接写在mxml 文件中的fx:Style 标签里的，这其实不符合大项目应用的。可以直接把CSS 代码单独保存为一个文件，比如：style.css ，用fx:Style 的source 属性来指向这个文件，这样就可以实现结构和样式分离的原则。如：

<fx:Style
 source="style.css"

 />