你对Flex样式定义类型是否了解,这里向大家简单描述一下,如果三种Flex样式定义方式同时使用的话,优先级别从高到低依次为:内嵌式Flex样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。
Flex样式定义类型
1.外部Flex样式表
- <mx:Stylesourcemx:Stylesource='/css/myStyle.css'/>
Flex会调用全局Flex样式表global.css,该全局Flex样式表由flex-config.xml定义,如:
- <global-css-url>/WEB-INF/flex/global.css</global-css-url>
系统默认的Flex样式表文件global.css文件其实没有任何Flex样式定义,我们可以手动添加全局Flex样式,也可以更改默认的全局Flex样式文件路径。如,把全局Flex样式文件该为:
- <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.<mx:Style>
- 2..myFontStyle{fontSize:15}
- 3.</mx:Style>
- 4.<mx:Buttonidmx:Buttonid='myButton'styleName='myFontStyle'label='ClickHere'>
下面的Flex样式则定义了所有Button组件的Flex样式,使用该方式定义的Flex样式在使用的时候不需要指定Flex样式名。
- 1.<mx:Style>
- 2.Button{fontSize:15}
- 3.</mx:Style>
- 4.<mx:Buttonidmx:Buttonid='myButton'label='ClickHere'>
3.内嵌Flex样式定义
对个别需要特殊处理的组件,可以使用下面的方式进行内嵌Flex样式定义
- <mx:Buttonidmx:Buttonid='myButton'fontSize='15'color='0x9966CC'label='MyButton'/>
4.使用脚本Flex样式定义
这种方法使用了Flash传统的AS脚本方式来定义Flex样式,具有更强大的灵活性,并且可以使用StyleManager类以及getStyle()和setStyle()方法,如下所示:
- 1.<mx:Script>
- 2.<![CDATA[
- 3.//使用styleManger类
- 4.mx.styles.StyleManager.styles.ToolTip.fontWeight='bold';
- 5.//获取组件Flex样式
- 6.lb1.text=ip1.getStyle('fontSize');
- 7.//设置组件Flex样式
- 8.lb1.text=ip1.setStyle('fontSize',newSize);
- 9.]]>
- 10.</mx:Script>
如果三种Flex样式定义方式同时使用的话,优先级别从高到低依次为:内嵌式Flex样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。
【编辑推荐】