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