Summary for css in flex4
In this chapter, I described the use of Cascading Style Sheets (CSS) to effect the visual presentation of Flex applications. You learned the following:
● CSS are implemented in the Flex SDK as the primary mechanism for controlling a Flex application’s visual appearance.
● You can declare styles with inline style declarations, and with embedded or external style sheets.
兩種基本方式
● Type selectors apply styles to all components that extend a certain component or set of components.
Type selector對某個組件或者容易的的繼承類(子類)同樣有效
● Flex 4 adds the use of CSS namespaces to distinguish style declarations for MX or Spark components.
● Style name (also known as class) selectors define styles that are applied to components through their styleName property.
css文件講某個style定義一個屬性
● The global selector applies styles to all components in the entire application.
定義缺省的style，全局有效，但是局部定義優先
● Styles can be manipulated programmatically with the setStyle() and getStyle() methods.
● You can compile external style sheets in SWF files that can be loaded at runtime.
這個參考原書，感覺用到的地方不多
下面給出一段示例代碼：
<?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" >
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
</s:layout>
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";
global {
font-family:Times New Roman, Times, serif;
color:purple;
}
s|Label
{
font-size:18;
font-style:italic;
}
//descendant selector，要完全符合這樣的層次纔能有效，見結果
s|HGroup s|Button s|Label
{
font-style:normal;
font-weight:bold;
}
//name selector
.redFont
{
color:#ff0000;
}
</fx:Style>
<s:VGroup>
<s:Label text="Hello World" styleName="redFont"/>
<s:Button label="Click me"/>
</s:VGroup>
<s:HGroup>
<s:Label text="Hello World"/>
<s:Button label="Click me"/>
</s:HGroup>
</s:Application>
運行結果爲：
==========================================
如果將style保存爲css文件：
//ExternalStyles.css
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global {
font-family:Times New Roman, Times, serif;
color:purple;
}
s|Label
{
font-size:18;
font-style:italic;
}
s|Button s|Label
{
font-style:normal;
font-weight:bold;
}
.redFont
{
color:#ff0000;
}
再修改mxml文件爲：
//ExternalStyles.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" >
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
</s:layout>
<fx:Style source="ExternalStyles.css"/>
<s:VGroup>
<s:Label text="Hello World" styleName="redFont"/>
<s:Button label="Click me"/>
</s:VGroup>
<s:HGroup>
<s:Label text="Hello World"/>
<s:Button label="Click me"/>
</s:HGroup>
</s:Application>
則運行結果一樣