Flex4下的CSS規則

發表於 2010年12月19日由 admin

在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 屬性來指向這個文件，這樣就可以實現結構和樣式分離的原則。如：