Flex的各种资料中对CSS没有深入地介绍。
Flex是开发Web应用展示层的利器。所谓“展示”就是可以看到的部分,作为控制外观(看到的部分)的CSS,其实大有学问。
CSS涉水太深,很难用通俗易懂的语言完整地说明CSS的方方面面。
当FlashPlayer显示列表中的某个显示元素寻找属于自己的样式的时候,它会按照如下顺序进行寻找:
1。自己的内联属性中是否直接设置了样式,如果是就采用之。
如: <s:Button x="55" y="191" label="Button" color="red"/>
2。如果没有设置内联属性,则看CSS中有没有匹配的ID选择器,如果有则采用之。
如: <s:Button x="55" y="191" label="Button" id="myButton"/>
CSS定义:
#myButton{
fontStyle:italic;
}
3。如果没有ID选择器,则看CSS中有没有匹配的类选择器,如果有则采用之。
如: <s:Button x="55" y="191" label="Button" styleName="myButton"/>
CSS定义:
.myButton{
fontStyle:italic;
}
4。如果没有类选择器,则看CSS中有没有匹配的类型选择器,如果有则采用之。
如: <s:Button x="55" y="191" label="Button" />
CSS定义:
Button{
fontStyle:italic;
}
5。如果没有类型选择器,则看需要匹配的该样式是否是可继承的,如果是,则查找其父类中是否有该样式的指定,如果有则采用之。如果没有,则继续在父类的父类中找寻,直到找到为止。如果最终没有找到,则采用全局样式(或默认样式)。
如: <s:Button x="55" y="191" label="Button" />
CSS定义:
*{
fontStyle:italic;
}
=================================================================
以上的内容为了叙述基本的思路,对CSS的复杂性作了相当的简化。
比如下面的多个CSS样式可能都作用于同一个显示元素上( <s:Button id="myButton" styleName=".buttonStyle" label="Button" />)。
S|Group #myButton ------为某个Group中的ID为myButton的显示元素设置样式
S|VGroup S|Group #myButton ------为某个VGroup中的Group中的ID为myButton的显示元素设置样式
.buttonStyle ------为指定styleName=".buttonStyle"的显示元素设置样式
Button ------为全部按钮设置样式
* ------为所有显示元素设置样式
CSS提供了灵活的定义的同时,带来了解析的复杂性
CSS的优先级定义以及为了解决优先级的问题,提出的“特性值(specificity)”方法。。。。。
如果用浏览器解析CSS做类比,则说明Flex中的CSS原理,无异于说明浏览器内核解析CSS的原理(虽然Flex和浏览器不同。事实上说明Flex中的CSS要稍微容易一些)
限制CSS定义的时候形式上的多样性,会降低解析的复杂性,我认为常规的定义形式足以满足绝大多数的功能要求。