Flex中如何使用Flex样式

这篇文章给大家分享的是有关Flex中如何使用Flex样式的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

Flex中使用Flex样式

Flex所支持的Flex样式比Flash要丰富，Flex样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。

Flex样式定义类型

1.外部Flex样式表

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

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

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

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

<global-css-url>/css/styles.cssglobal-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样式定义

使用来定义当前文件的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样式定义

特殊Flex样式定义

在进行Flex样式定义的时候，我们需要注意几种Flex特殊的Flex样式定义

1.全局Flex样式定义

对所有未被定义的控制组件应用globalFlex样式

1.global{   2.fontSize:22;   3.textDecoration:underline;   4.}

2.应用程序Flex样式定义

Application标记是Flex的根标记，ApplicationFlex样式用来定义未被定义的容器以及子容器的Flex样式

1.Application{   2.marginLeft:0px;   3.marginRight:0px;   4.marginTop:0px;   5.marginBottom:0px;   6.horizontalAlign:'left';   7.}

感谢各位的阅读！关于“Flex中如何使用Flex样式”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！