本文和大家重点讨论一下Flex中如何使用样式定义和字体，Flex样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。
Flex中使用样式和字体
Flex所支持的样式比Flash要丰富，Flex样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。
Flex样式定义类型
1.外部样式表
<mx:Stylesourcemx:Stylesource='/css/myStyle.css'/>
- 1.
Flex会调用全局样式表global.css，该全局样式表由flex-config.xml定义，如：
<global-css-url>/WEB-INF/flex/global.css</global-css-url>
- 1.
系统默认的样式表文件global.css文件其实没有任何Flex样式定义，我们可以手动添加全局样式，也可以更改默认的全局样式文件路径。如，把全局样式文件该为：
<global-css-url>/css/styles.css</global-css-url>
- 1.
在这里顺便提一点，定义外部css文件的时候，颜色样式有四种定义方式：
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颜色名称格式 #p#
2.本地Flex样式定义
使用<mx:Style>来定义当前文件的样式
下面的例子定义了myFontStyle子类样式，要使用对应的样式可以在组件中使用styleName属性来应用样式。
1.<mx:Style>
2..myFontStyle{fontSize:15}
3.</mx:Style>
4.<mx:Buttonidmx:Buttonid='myButton'styleName='myFontStyle'label='ClickHere'>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
下面的样式则定义了所有Button组件的样式，使用该方式定义的样式在使用的时候不需要指定样式名。
1.<mx:Style>
2.Button{fontSize:15}
3.</mx:Style>
4.<mx:Buttonidmx:Buttonid='myButton'label='ClickHere'>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
3.内嵌Flex样式定义
对个别需要特殊处理的组件，可以使用下面的方式进行内嵌Flex样式定义
<mx:Buttonidmx:Buttonid='myButton'fontSize='15'color='0x9966CC'label='MyButton'/>
- 1.
4.使用脚本Flex样式定义
这种方法使用了Flash传统的AS脚本方式来定义样式，具有更强大的灵活性，并且可以使用StyleManager类以及getStyle()和setStyle()方法，如下所示：
1.<mx:Script>
2.<![CDATA[
3.//使用styleManger类
4.mx.styles.StyleManager.styles.ToolTip.fontWeight='bold';
5.//获取组件样式
6.lb1.text=ip1.getStyle('fontSize');
7.//设置组件样式
8.lb1.text=ip1.setStyle('fontSize',newSize);
9.]]>
10.</mx:Script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
如果三种Flex样式定义方式同时使用的话，优先级别从高到低依次为：内嵌式样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。#p#
特殊Flex样式定义
在进行Flex样式定义的时候，我们需要注意几种Flex特殊的Flex样式定义。
1.全局Flex样式定义
对所有未被定义的控制组件应用global样式
global{
2.fontSize:22;
3.textDecoration:underline;
4.}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
2.应用程序Flex样式定义
Application标记是Flex的根标记，Application样式用来定义未被定义的容器以及子容器的样式
1.Application{
2.marginLeft:0px;
3.marginRight:0px;
4.marginTop:0px;
5.marginBottom:0px;
6.horizontalAlign:'left';
7.}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
#p#关于字体的Flex样式定义
1.使用设备字体
1.myClass{
2.fontFamily:Arial,Helvetica,'_sans';
3.color:Red;
4.fontSize:22;
5.fontWeight:bold;
6.}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
2.使用移植字体
1.<mx:Style>
2.@font-face{
3.src:url('akbar.ttf');
4.fontFamily:myfont;
5.}
6.@font-face{
7.src:url('akbar.ttf');
8.fontWeight:bold;
9.fontFamily:myfontBold;
10.}
11.</mx:Style>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
◆在定义了该字体样式后，就可以通过fontFamily来应用该字体样式，如：
1.Accordion{
2.fontFamily:myfont
3.}
- 1.
- 2.
- 3.
- 4.
- 5.
【编辑推荐】
