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

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

创新互联公司的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括网站建设、网站设计、电商网站开发、微信营销、系统平台开发。

Flex中使用样式和字体

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

Flex样式定义类型

1.外部样式表

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

 
 
 

  
  
  
/WEB-INF/flex/global.css 
 
 
 

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

 
 
 

  
  
  
/css/styles.css 
 
 
 

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

使用来定义当前文件的样式

下面的例子定义了myFontStyle子类样式，要使用对应的样式可以在组件中使用styleName属性来应用样式。

 
 
 

  
  
  
1. 
  
  
  
 
  
  
  
2..myFontStyle{fontSize:15}  
  
  
  
 
  
  
  
3. 
  
  
  
 
  
  
  
4. 
  
  
  
 
 
 
 

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

 
 
 

  
  
  
1. 
  
  
  
 
  
  
  
2.Button{fontSize:15}  
  
  
  
 
  
  
  
3. 
  
  
  
 
  
  
  
4. 
 
 
 

 3.内嵌 Flex样式定义

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

4.使用脚本Flex样式定义

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

 
 
 

  
  
  
1. 
  
  
  
 
  
  
  
2.
  
  
  
 
  
  
  
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. 
  
  
  
 
 
 
 

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

特殊Flex样式定义

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

1.全局Flex样式定义

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

 
 
 

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

 
2.应用程序Flex样式定义

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

 
 
 

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

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

1.使用设备字体 

 
 
 

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

 
2.使用移植字体 

 
 
 

  
  
  
1. 
  
  
  
 
  
  
  
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. 
  
  
  
 
 
 
 

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

 
 
 

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

【编辑推荐】

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

本文名称：Flex中使用Flex样式定义和字体
当前链接：http://www.gawzjz.com/qtweb2/news41/3191.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联