【flex】CSS样式笔记

 

CSS样式笔记

CSS 支持使用内置的选择器，通过本地名称匹配组件实例：

s|Button {color: #CC0000; }

CSS 在styleName 属性中支持多个类选择器（使用空格分隔）：

s|Button.redText{color:#FF0000;} s|Button.fontType{font-family:"Courier"; } <s:Button label="Send Email" styleName="redText fontType"/>

CSS 支持具有相同名称和不同属性的多个选择器(如果选择器中没有重复的属性，则应用所有属性；如果选择器中有重复的属性，则应用后面的属性)：

s|Button {color:#FF0000; } s|Button {font-family:"Courier"; }

使用 skinClass 样式属性将外观应用于组件：

s|Button {skinClass:ClassReference("skin.RoundButtonSkin"); }

派生选择器，指定子容器的样式，支持派生的多个级别：

s|Panel s|Button { color: #CCCCCC; } s|Panel s|ViewStack s|Label { fontSize: 12; }

id选择器与组件的具体实例绑定，声明id条件的CSS语法使用#作为id的前缀：

注意：不可以将 id 选择器与其它选择器组合使用！如：Panel Button#submitButton、Button#submitButton。

#submitButton { color: #CCCCCC; } <s:Button id=”submitButton” />

类选择器定义样式（或类）集，可将它们应用于任何组件，然后使用styleName 属性应用样式，无需对MXML 组件使用前导点

.header { color: #CCCCCC; } 或s|Panel.header { color: #FF0000; } <s:Panel styleName="header"> <s:Label text="Employee Information"/> </s:Panel>

CSS 伪选择器根据其它条件匹配组件

s|Button:up { color: #00FF00; } s|Button:down { color: #CCCCCC; }