常见Flex样式定义类型

开发 后端
本文向大家介绍一下Flex样式定义类型,主要包括外部样式表,本地FlexFlex样式定义,内嵌和脚本Flex样式定义等内容,欢迎大家一起来学习。

你对Flex样式定义类型是否了解,这里向大家简单描述一下,如果三种Flex样式定义方式同时使用的话,优先级别从高到低依次为:内嵌式Flex样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。

Flex样式定义类型

1.外部Flex样式表

  1. <mx:Stylesourcemx:Stylesource='/css/myStyle.css'/> 

Flex会调用全局Flex样式表global.css,该全局Flex样式表由flex-config.xml定义,如:

  1. <global-css-url>/WEB-INF/flex/global.css</global-css-url> 

系统默认的Flex样式表文件global.css文件其实没有任何Flex样式定义,我们可以手动添加全局Flex样式,也可以更改默认的全局Flex样式文件路径。如,把全局Flex样式文件该为:

  1. <global-css-url>/css/styles.css</global-css-url> 

在这里顺便提一点,定义外部css文件的时候,颜色Flex样式有四种定义方式:

1:.myclass{fillColor:#6666CC}//16进制颜色格式

2:.myclass{borderColor:rgb(77%,22%,0%)}//RGB颜色格式

3:.myclass{errorColor:rgb(0,255,0)}//10进制RGB颜色格式

4:.myclass{color:Blue}//VGA颜色名称格式

2.本地Flex样式定义

使用<mx:Style>来定义当前文件的Flex样式
下面的例子定义了myFontStyle子类Flex样式,要使用对应的Flex样式可以在组件中使用styleName属性来应用Flex样式。

  1. 1.<mx:Style> 
  2.  
  3. 2..myFontStyle{fontSize:15}  
  4.  
  5. 3.</mx:Style> 
  6.  
  7. 4.<mx:Buttonidmx:Buttonid='myButton'styleName='myFontStyle'label='ClickHere'> 
  8.  

 下面的Flex样式则定义了所有Button组件的Flex样式,使用该方式定义的Flex样式在使用的时候不需要指定Flex样式名。

  1. 1.<mx:Style> 
  2.  
  3. 2.Button{fontSize:15}  
  4.  
  5. 3.</mx:Style> 
  6.  
  7. 4.<mx:Buttonidmx:Buttonid='myButton'label='ClickHere'> 
  8.  

 3.内嵌Flex样式定义

对个别需要特殊处理的组件,可以使用下面的方式进行内嵌Flex样式定义

  1. <mx:Buttonidmx:Buttonid='myButton'fontSize='15'color='0x9966CC'label='MyButton'/> 

4.使用脚本Flex样式定义

这种方法使用了Flash传统的AS脚本方式来定义Flex样式,具有更强大的灵活性,并且可以使用StyleManager类以及getStyle()和setStyle()方法,如下所示:

  1. 1.<mx:Script> 
  2.  
  3. 2.<![CDATA[  
  4.  
  5. 3.//使用styleManger类  
  6.  
  7. 4.mx.styles.StyleManager.styles.ToolTip.fontWeight='bold';  
  8.  
  9. 5.//获取组件Flex样式  
  10.  
  11. 6.lb1.text=ip1.getStyle('fontSize');  
  12.  
  13. 7.//设置组件Flex样式  
  14.  
  15. 8.lb1.text=ip1.setStyle('fontSize',newSize);  
  16.  
  17. 9.]]> 
  18.  
  19. 10.</mx:Script> 
  20.  

 如果三种Flex样式定义方式同时使用的话,优先级别从高到低依次为:内嵌式Flex样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。

【编辑推荐】

  1. Flex样式定义类型剖析
  2. Flex主题创建及支持的样式设置方式
  3. 全面认识Flex应用程序的六大元素
  4. 揭开Flex正则表达式的神秘面纱
  5. Flex数据绑定及其使用频繁的几种情况 
责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-13 09:30:37

Flex样式

2010-08-13 09:47:58

Flex样式定义

2010-08-13 10:01:46

Flex样式定义

2010-08-13 09:54:23

Flex字体

2010-08-06 10:32:49

Flex数据类型

2010-08-11 16:03:02

Flex DataGr

2010-08-05 10:58:55

Flex组件

2010-08-03 09:27:29

设置Flex样式

2010-08-03 09:54:20

Flex鼠标样式设置

2010-08-12 09:25:35

Flex控件

2010-08-12 11:12:27

Flex误区

2010-07-29 13:34:36

Flex样式

2010-08-09 15:19:29

Flex滚动条

2010-08-05 10:16:14

Flex效果

2010-07-28 10:38:29

Flex开源框架

2010-08-04 11:04:58

Flex框架

2010-08-05 09:05:14

Flex Button

2010-07-29 14:18:57

Flex编译器参数

2010-07-29 17:00:36

Flex饼图

2010-08-11 14:47:54

Flex样式
点赞
收藏

51CTO技术栈公众号