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>
则运行结果一样
