FLEX4 CSS

 

转载自 http://blog.chinaunix.net/uid-122937-id-2880824.html

与HTML相似，Flex允许在MXML标签中通过CSS样式来设置组件的外观。到flex4.5后已经基本上支持了HTML中的所有CSS的应用方式，这里主要来列举下flex4.5中CSS选择器的使用方法。
      CSS选择器可以包括，标签选择器、类别选择器、ID选择器、交集选择器、并集选择器、后代选择器、全局选择器、伪类等，这些样式应用都已经在flex得到支持。

1.标签选择器
      标签选择器是根据MXML文件中组件的类型来设置的，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace  mx "library://ns.adobe.com/flex/mx";
   

4.         s|TextInput{
   

5.              color: #FF0000;
   

6.         }
   

7.         s|Button{
   

8.             color: #FFFF00;
   

9.         }
   

10. </fx:Style>

11. <s:TextInput text="text input"/>

12. <s:Button label="button"/>

      上面二个控件的颜色会随之改变。

2.类别选择器
       类别选择器是以一个点开头，后面加上组件中通过styleName设置的样式名来表示的类别选择器，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace  mx "library://ns.adobe.com/flex/mx";
   

4.         .btn2{
   

5.             color: #FF0000;
   

6.         }
   

7. </fx:Style>
   

8. <s:Button label="button2" styleName="btn2"/>

3.ID选择器
       ID选择器是以#开头，后面加上组件中设置的ID名来表示的类别选择器，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace mx "library://ns.adobe.com/flex/mx";
   

4.         #btn1{
   

5.             color: #FF0000;
   

6.         }
   

7.         .btn2{
   

8.             color: #FF00FF;
   

9.         }
   

10. </fx:Style>
    

11. <s:Button id="btn1" label="button1"/>
    

12. <s:Button label="button2" styleName="btn2"/>

4.交集选择器
      交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace mx "library://ns.adobe.com/flex/mx";
   

4.         s|Button#btn1{
   

5.             color: #FF0000;
   

6.         }
   

7.         s|Button.btn2{
   

8.             color: #FF00FF;
   

9.         }
   

10. </fx:Style>
    

11. <s:Button id="btn1" label="button1"/>
    

12. <s:Button label="button2" styleName="btn2"/>
    

13. <s:Button label="button3"/>

5.并集选择器
       并集选择器是多个选择器通过逗号连接而成的，并集选择器同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace mx "library://ns.adobe.com/flex/mx";
   

4.         s|Button#btn1,s|Button.btn2{
   

5.             color: #FF0000;
   

6.         }
   

7. </fx:Style>
   

8. <s:Button id="btn1" label="button1"/>
   

9. <s:Button label="button2" styleName="btn2"/>
   

10. <s:Button label="button3"/>

6.后代选择器
      后代选择器也叫派生选择器，可以使用后代选择器给一个元素里的子元素定义样式，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace mx "library://ns.adobe.com/flex/mx";
   

4.         s|HGroup s|TextInput{
   

5.             color: #FF0000;
   

6.         }
   

7. </fx:Style>
   

8. <s:HGroup verticalAlign="middle">
   

9.       <s:Label text="Text Input 1"/>
   

10.       <s:TextInput text="sample"/>
    

11. </s:HGroup>
    

12. <s:TextInput text="sample"/>

7.全局选择器
       全局选择器global可以将样式应用到所有的组件，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace mx "library://ns.adobe.com/flex/mx";
   

4.         global{
   

5.             color: #FF0000;
   

6.         }
   

7. </fx:Style>
   

8. <s:Label text="label"/>
   

9. <s:TextInput text="text input"/>
   

10. <s:Button label="button"/>

8.伪类
       伪类是用来设置组件在不同状态下的样式，示例如下：

1. <fx:Style>
   

2.         @namespace s "library://ns.adobe.com/flex/spark";
   

3.         @namespace mx "library://ns.adobe.com/flex/mx";
   

4.         s|Button:up{
   

5.             color: #FF0000;
   

6.         }
   

7.         s|Button:down{
   

8.             color: #FF00FF;
   

9.         }
   

10.         s|Button:over{
    

11.             color: #0000FF;
    

12.         }
    

13. </fx:Style>
    

14. <s:Button label="button"/>

参考文献
1.flex4.5中CSS选择器的应用. http://www.iyoya.com/2011/06/26/css-advanced-selectors.html