Flex中使用Flex样式定义和字体

开发 后端
你对Flex中使用样式定义和字体的方式是否了解,Flex所支持的样式比Flash要丰富,Flex样式定义的方法也很多,这里和大家分享一下。

本文和大家重点讨论一下Flex中如何使用样式定义和字体,Flex样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。

Flex中使用样式和字体

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

Flex样式定义类型

1.外部样式表

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

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

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

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

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

在这里顺便提一点,定义外部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. 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.  

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

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

 3.内嵌Flex样式定义

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

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

4.使用脚本Flex样式定义

这种方法使用了Flash传统的AS脚本方式来定义样式,具有更强大的灵活性,并且可以使用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.//获取组件样式  
  10.  
  11. 6.lb1.text=ip1.getStyle('fontSize');  
  12.  
  13. 7.//设置组件样式  
  14.  
  15. 8.lb1.text=ip1.setStyle('fontSize',newSize);  
  16.  
  17. 9.]]> 
  18.  
  19. 10.</mx:Script> 
  20.  

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

特殊Flex样式定义

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

1.全局Flex样式定义

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

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

 
2.应用程序Flex样式定义

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

  1. 1.Application{  
  2.  
  3. 2.marginLeft:0px;  
  4.  
  5. 3.marginRight:0px;  
  6.  
  7. 4.marginTop:0px;  
  8.  
  9. 5.marginBottom:0px;  
  10.  
  11. 6.horizontalAlign:'left';  
  12.  
  13. 7.}  
  14.  

 #p#关于字体的Flex样式定义

1.使用设备字体 

  1. 1.myClass{  
  2.  
  3. 2.fontFamily:Arial,Helvetica,'_sans';  
  4.  
  5. 3.color:Red;  
  6.  
  7. 4.fontSize:22;  
  8.  
  9. 5.fontWeight:bold;  
  10.  
  11. 6.}  
  12.  

 
2.使用移植字体
 

  1. 1.<mx:Style> 
  2.  
  3. 2.@font-face{  
  4.  
  5. 3.src:url('akbar.ttf');  
  6.  
  7. 4.fontFamily:myfont;  
  8.  
  9. 5.}  
  10.  
  11. 6.@font-face{  
  12.  
  13. 7.src:url('akbar.ttf');  
  14.  
  15. 8.fontWeight:bold;  
  16.  
  17. 9.fontFamily:myfontBold;  
  18.  
  19. 10.}  
  20.  
  21. 11.</mx:Style> 
  22.  

 
◆在定义了该字体样式后,就可以通过fontFamily来应用该字体样式,如: 

  1. 1.Accordion{  
  2.  
  3. 2.fontFamily:myfont  
  4.  
  5. 3.}  

【编辑推荐】

  1. 特殊Flex样式定义揭秘
  2. 常见Flex样式定义类型
  3. 全面认识Flex应用程序的六大元素
  4. Flex样式定义类型剖析
  5. Flex数据绑定及其使用频繁的几种情况 

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-13 09:54:23

Flex字体

2010-08-13 09:30:37

Flex样式

2010-08-13 09:47:58

Flex样式定义

2010-08-13 09:38:09

Flex样式定义

2010-08-10 14:08:09

Flex嵌入字体

2010-08-09 15:52:28

2010-07-27 13:05:12

Flex

2010-07-29 13:34:36

Flex样式

2010-08-11 16:03:02

Flex DataGr

2010-08-09 15:30:00

Flex字体

2010-07-30 10:53:53

Flex数据绑定

2010-08-09 15:41:13

Flex字体

2010-08-03 09:54:20

Flex鼠标样式设置

2010-08-03 09:27:29

设置Flex样式

2010-08-05 13:07:11

FlexJson

2010-08-09 15:19:29

Flex滚动条

2010-08-09 16:01:37

Flex字体

2010-08-10 11:08:32

Flex外部样式表

2010-07-27 14:44:23

Flex Array

2009-08-27 11:55:33

ibmdwPHP
点赞
收藏

51CTO技术栈公众号