- 浏览: 33031 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
qwe1234567890:
,破解文件挺好用的
Adobe Flash Builder 4.7破解方法 -
hujintao:
没用啊,亲
Adobe Flash Builder 4.7破解方法
转载自 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文件中组件的类型来设置的,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|TextInput{
- color: #FF0000;
- }
- s|Button{
- color: #FFFF00;
- }
- </fx:Style>
- <s:TextInput text="text input"/>
- <s:Button label="button"/>
上面二个控件的颜色会随之改变。
2.类别选择器
类别选择器是以一个点开头,后面加上组件中通过styleName设置的样式名来表示的类别选择器,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- .btn2{
- color: #FF0000;
- }
-
</fx:Style>
- <s:Button label="button2" styleName="btn2"/>
3.ID选择器
ID选择器是以#开头,后面加上组件中设置的ID名来表示的类别选择器,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- #btn1{
- color: #FF0000;
- }
- .btn2{
- color: #FF00FF;
- }
-
</fx:Style>
-
<s:Button id="btn1" label="button1"/>
- <s:Button label="button2" styleName="btn2"/>
4.交集选择器
交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Button#btn1{
- color: #FF0000;
- }
- s|Button.btn2{
- color: #FF00FF;
- }
-
</fx:Style>
-
<s:Button id="btn1" label="button1"/>
-
<s:Button label="button2" styleName="btn2"/>
- <s:Button label="button3"/>
5.并集选择器
并集选择器是多个选择器通过逗号连接而成的,并集选择器同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Button#btn1,s|Button.btn2{
- color: #FF0000;
- }
-
</fx:Style>
-
<s:Button id="btn1" label="button1"/>
-
<s:Button label="button2" styleName="btn2"/>
- <s:Button label="button3"/>
6.后代选择器
后代选择器也叫派生选择器,可以使用后代选择器给一个元素里的子元素定义样式,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|HGroup s|TextInput{
- color: #FF0000;
- }
-
</fx:Style>
-
<s:HGroup verticalAlign="middle">
- <s:Label text="Text Input 1"/>
- <s:TextInput text="sample"/>
-
</s:HGroup>
- <s:TextInput text="sample"/>
7.全局选择器
全局选择器global可以将样式应用到所有的组件,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- global{
- color: #FF0000;
- }
-
</fx:Style>
-
<s:Label text="label"/>
-
<s:TextInput text="text input"/>
- <s:Button label="button"/>
8.伪类
伪类是用来设置组件在不同状态下的样式,示例如下:
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- s|Button:up{
- color: #FF0000;
- }
- s|Button:down{
- color: #FF00FF;
- }
- s|Button:over{
- color: #0000FF;
- }
-
</fx:Style>
- <s:Button label="button"/>
参考文献
1.flex4.5中CSS选择器的应用. http://www.iyoya.com/2011/06/26/css-advanced-selectors.html
发表评论
-
Flex sdk 4.6 for UFT testing
2015-12-14 12:06 712Flex sdk 4.6 for UFT testing ... -
使用 apache flex mavenizer 将flex sdk 4.6 maven化
2015-10-19 22:00 457apache 官网最新的mavenizer代码已经不支持f ... -
SparkTree_AdvancedDataGrid
2014-05-21 20:56 530SparkTree_AdvancedDataGrid -
flexmojos api
2013-10-16 22:30 593flexmojos api -
fxgEditor
2013-08-27 22:43 542fxgEditor -
photoshop flex plugin
2013-06-30 22:32 659photoshop flex plugin -
flexPMD 用法
2013-03-11 00:34 1201Adobe Technical Services 发布了一 ... -
irregular shaped button
2013-02-17 10:57 692You can create a custom Butto ... -
Adobe Flash Builder 4.7破解方法
2013-01-22 09:58 3892转自 http://blog.sina.com.cn/s/bl ... -
flex 插件
2012-12-01 14:27 672visualSVN -
visualSVN
2012-12-01 14:27 817visualSVN -
spark datefield datechooser
2012-11-16 00:01 682spark datefield datechooser -
amchart swc
2012-11-07 14:28 823amchart swc -
Introducing Adobe Flex 4.5 SDK
2012-09-23 01:20 1281Note: Flash Builder 4.5 ... -
flex4.6 new components
2012-09-21 16:58 659flex4.6 new components -
flex3_4 lifecycle
2012-09-14 00:23 601flex3_4 lifecycle -
flex_4_features and migration
2012-09-09 01:28 626flex_4_features and migration
相关推荐
在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...
D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全...
flex,css帮助 Flex_Css完全手册。。。。。。。flex,css帮助 Flex_Css完全手册。。。。。。
NULL 博文链接:https://demojava.iteye.com/blog/1199379
关于flex 的样式css。。。可以自定义控件样式。。css源码。
Flex3 css样式代码自动生成 Flex3StyleExplorer
Flex_Css完全手册.pdf
这个就相当于flex的CSS2.0帮助文档 详细的告诉你flex中每个样式的使用方法
Flex动态CSS,设定整个application的CSS样式
Flex中的CSS样式 详尽的讲解
关于flex和CSS以及Skin的用法,有现 成的例子只要导入就可以直接运行看到效果!
flex css 设计器,flex css 设计器,flex css 设计器flex css 设计器,flex css 设计器,flex css 设计器flex css 设计器,flex css 设计器,flex css 设计器flex css 设计器,flex css 设计器,flex css 设计器
flex css 模版经典,免除你设计css的烦恼!
flex的css样式设置,介绍有关flex的各类css样式设置,比如application,panel,hbox等
可视化编辑样式,Flex 3 CSS style 设计器Flex 3 CSS style 设计器
一个flash文件 可以对flex控件进行css可视化设计 非常的好用
flex css Aeon flex css Aeon
flex 动态加载css文件方法总结,增加flex的界面美化效果。简单易懂,易操作。
WindowsClassic flex 皮肤 css 使用很方便,直接拷贝黏贴,style调用即可。
Flex4_CSS手册