Flex中的CSS： （1）本质：CSS被编译器转换为AS代码

进入正文前，我们先温习下什么是“CSS选择器”？

CSS层叠样式表有很多种选择器，最基本的三种选择器：类选择器、类型选择器、ID选择器。

看几个例子：

?

（1-1）类选择器

????????????下例是为所有按钮类型定义CSS样式，所有按钮的文字大小都被约束为12像素。

????????????以某类型为对象来定义CSS样式，这个“Button” 就属于“类选择器”。

?????????? ?Button

??????????? {

?????????????????? font-size:12px;

???????????? }

?

（1-2）类别选择器

????????????下例定义了一组CSS样式，并为它起名为“.MyButton”。它并不能约束所有按钮的文字大小。

???????????它只能作用在显式地声明使用它的地方。例如在某个按钮的定义中加入：<s:Button styleName=".MyStyle"/>。

???????????这个“.MyStyle” 就属于“类别选择器”。

??????????? .MyStyle

??????????? {

?????????????????? font-size:12px;

???????????? }

（1-3）ID选择器

????????????下例定义了一组CSS样式，它作用在ID为“txtName”的组件上：<s:textInput id="txtName" width="100%" height="100%"/>

????????????这个“#txtName” 就属于“ID选择器”。

??????????? #txtName

??????????? {

?????????????????? font-size:12px;

???????????? }

?

Flex支持CSS层叠样式表。

在开发环境中定义CSS就像上面三个例子，语法非常简单。

但本质上，定义的CSS内容将被编译器转换为AS代码。

我们来证明它。

使用FlashBuilder建立Flex工程：test1。并增加编译器参数?-keep-generated-actionscript=true，以此保留编译器自动生成的中间AS代码。

?

test1.mxml

这是一个非常简单的程序，没有显式地定义任何CSS样式。

因为Flex框架底层定义了很多默认的CSS样式，这些样式会被编译器便已成为AS代码，我们通过下面的例子来看看这些默认的CSS的内容。

styleManager是Flex框架中专门用于管理CSS样式的单例类，通过它我们可以看到其中全部的“CSS选择器”。

<?xml version="1.0" encoding="utf-8"?>
<!-- styles/SelectorsTest.mxml -->
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:mx="library://ns.adobe.com/flex/mx" 
	xmlns:s="library://ns.adobe.com/flex/spark">    
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[

			public function showSelectors():void {            
				
				var selectors:Array = styleManager.selectors;
				msg.text = "所有的选择器列表如下(" + selectors.length + ")n";
				for (var i:int = 0; i < selectors.length; i++) {
					msg.text += "n" + selectors[i];      
				}
			}
		]]>
	</fx:Script>    
	<s:Button label="Show Selectors" click="showSelectors()"/>    
	<s:TextArea id="msg" width="100%" height="100%"/>
</s:Application>

?

程序运行结果显示一共有18个“CSS选择器”被使用了。是这样吗？如何证明曾经有这18个选择器被生成了？

?

我们看看编译器自动生成的AS代码中有无线索。

?

上图中左面generated文件夹的内容就是编译器自动生成的AS文件，其中_test1_Styles.as中定义了被使用的Flex框架默认CSS样式。其内容摘录如下：

分别定义了CursorManager的样式和ToolTip的样式。类似这样的定义共有18处，恰好和test1.mxml的运行结果一一完全对应。

        //
        // mx.managers.CursorManager
        //
        selector = null;
        conditions = null;
        conditions = null;
        selector = new CSSSelector(mx.managers.CursorManager,conditions,selector);
        mergedStyle = styleManager.getMergedStyleDeclaration("mx.managers.CursorManager");
        style = new CSSStyleDeclaration(selector,styleManager,mergedStyle == null);

        
省略。。。

        
        //
        // mx.controls.ToolTip
        //
        selector = null;
        conditions = null;
        conditions = null;
        selector = new CSSSelector(mx.controls.ToolTip,selector);
        mergedStyle = styleManager.getMergedStyleDeclaration("mx.controls.ToolTip");
        style = new CSSStyleDeclaration(selector,mergedStyle == null);