看例子。
这些区别有助于我们归纳编译器对不同形式CSS的编译规则。
内部样式:
<?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" minWidth="955" minHeight="600">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button{
color:"16711935"
}
</fx:Style>
<s:VGroup>
<s:Button label="button"/>
</s:VGroup>
</s:Application>
内联样式:
<?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" minWidth="955" minHeight="600">
<s:VGroup>
<s:Button label="button" color="16711935"/>
</s:VGroup>
</s:Application>
内部样式被编译后的AS代码:
mx_internal function _test1_StylesInit():void
{
// only add our style defs to the style manager once
if (mx_internal::_test1_StylesInit_done)
return;
else
mx_internal::_test1_StylesInit_done = true;
var style:CSSStyleDeclaration;
var effects:Array;
var conditions:Array;
var condition:CSSCondition;
var selector:CSSSelector;
selector = null;
conditions = null;
conditions = null;
selector = new CSSSelector("spark.components.Button", conditions, selector);
// spark.components.Button
style = styleManager.getStyleDeclaration("spark.components.Button");
if (!style)
{
style = new CSSStyleDeclaration(selector, styleManager);
}
if (style.factory == null)
{
style.factory = function():void
{
this.color = "16711935";
};
}
内联样式被编译后的AS代码:
private function _test1_Button1_c() : spark.components.Button
{
var temp : spark.components.Button = new spark.components.Button();
temp.label = "button";
temp.setStyle("color", 16711935);
if (!temp.document) temp.document = this;
return temp;
}