潔靜精微

在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代码了，但在每个样式前面也要加上命名空间名称，子选择符也要加上。如：

继续阅读 →