免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1740 | 回复: 0

FLEX4 CSS [复制链接]

论坛徽章:
0
发表于 2011-12-23 02:42 |显示全部楼层
      与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
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

SACC2021中国系统架构师大会

【数字转型 架构重塑】2021年5月20日-22日第十三届中国系统架构师大会将在云端进行网络直播。

大会为期3天的议程,涉及20+专场,近120个主题,完整迁移到线上进行网络直播对会议组织来说绝非易事;但考虑到云端会议的直播形式可以实现全国各地技术爱好者的参与,也使ITPUB作为技术共享交流平台得到更好的普及,我们决定迎难而上。
http://sacc.it168.com/


大会官网>>
  

北京盛拓优讯信息技术有限公司. 版权所有 16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP