关闭

Flex精华摘要 5:使用样式和字体

标签: flexstylesbuttonapplicationcssurl
4376人阅读 评论(0) 收藏 举报
分类:

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

<mx:Style source='/css/myStyle.css'/>

 

1.


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

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

 

1.


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

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

 

1.


在这里顺便提一点,定义外部css文件的时候,颜色样式有四种定义方式:

: .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 颜色名称格式

 

1



2.本地样式定义
使用<mx:Style>来定义当前文件的样式
下面的例子定义了myFontStyle子类样式,要使用对应的样式可以在组件中使用styleName属性来应用样式。

<mx:Style>

 

2. .myFontStyle {  fontSize: 15  }

3. </mx:Style>

4. <mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >

1.


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

<mx:Style>

 

2. Button {  fontSize: 15  }

3. </mx:Style>

4. <mx:Button id='myButton' label='Click Here' >

1.



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

<mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>

 

1.



4. 使用脚本样式定义
这种方法使用了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>

 



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

特殊样式定义
在进行样式定义的时候,我们需要注意几种Flex特殊的样式定义
1.
全局样式定义
对所有未被定义的控制组件应用global样式

global { 

 

2. fontSize:22;

3. textDecoration: underline;

4.  }

1.


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

Application { 

 

2. marginLeft: 0px;

3. marginRight: 0px;

4. marginTop: 0px;

5. marginBottom: 0px;

6. horizontalAlign: 'left';

7.  }

1.



关于字体的样式定义
1. 使用设备字体

.myClass { 

 

2. fontFamily: Arial, Helvetica, '_sans';

3. color: Red;

4. fontSize: 22;

5. fontWeight: bold;

6.  }

1.


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>

 


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

Accordion { 

 

2. fontFamily: myfont

3.  }

1.

 

0
0
查看评论

[冷枫]Flex精华摘要 5:使用样式和字体

Flex所支持的样式比Flash要丰富,样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。样式定义类型1. 外部样式表mx:Style source=/css/myStyle.css/>   1. Flex会调用全局样式表global...
  • BNickcour
  • BNickcour
  • 2008-06-19 09:48
  • 579

flex中设置字体样式

下面就把flex设置字体的方法大体列举几种,以供参考。   1.       引用外部字体库的方法: 双击代码全选 1 2 3 4 5 6 7 @font-face   {   ...
  • xingfeng0501
  • xingfeng0501
  • 2012-04-18 19:14
  • 3526

Flex精华摘要--使用AS脚本

在MXML文件中实现ActionScript逻辑的几种方法:最简单的方法,在一个MXML文件中通过组件的事件直接书写简单的逻辑控制,但是并不推荐。 注意其中的类型转换 第二种,在MXML文件中定义函数调用,比较适合简单的应用,如 <!--[CDATA[public functio...
  • terryzero
  • terryzero
  • 2009-08-12 22:38
  • 736

Flex样式-RadioButton篇

RadioButton { textIndent: 0; letterSpacing: 0; highlightAlphas: 0.46, 0.38; fillAlphas: 0.81, 0.82, 0.75, 0.65; fillColors: #cc0000, #f...
  • you23hai45
  • you23hai45
  • 2013-12-30 23:31
  • 1755

Flex精华摘要--基本语法

Flex基本语法绝大多数MXML标识符合AS3.0规范,MXML文件编译产生的SWF文件包含相应的AS对象。AS3.0是一种面向对象的语言,符合ECMAScript第4版规范。MXML文件的命名规范:1: 必须符合AS的命名规范,以字母或下划线开头;2 : 不得使用AS的类名、组件ID标识和命名空间...
  • terryzero
  • terryzero
  • 2009-08-11 22:00
  • 726

Flex 宋体、黑体、楷体、仿宋字体样式

s|Label { font-family: FangSong_GB2312; /*SimSun,SimHei,KaiTi_GB2312,FangSong_GB2312,*/ /*以上四种字体默认使用的是本地设备字体,无法开启抗锯齿功能,字体边缘有毛边*/ backgroundColor: #...
  • ljz9425
  • ljz9425
  • 2012-04-11 15:54
  • 4171

FLEX4 设置全局样式 的方法

结果:   Using the Flex 4 StyleManager: Getting Style Declarations December 6 As you may know, in Flex 4 you no longer call the StyleManager...
  • truelove12358
  • truelove12358
  • 2014-05-22 11:40
  • 1286

修改Latex默认摘要名称 xeCJK设置字体

\renewcommand{\abstractname}{新名称} \twocolumn[ \begin{@twocolumnfalse}%关闭两行 \maketitle % need full-width title \renewcommand{\abstractn...
  • whucv
  • whucv
  • 2012-09-08 17:38
  • 3635

在flex中如何使用嵌入字体

嵌入字体语法[Embed(source="C:/WINDOWS/Fonts/arial.ttf", fontName="Arial", mimeType="application/x-font")]private var ArialFont...
  • holybozo
  • holybozo
  • 2006-10-18 21:34
  • 6011

flex spark datagird 样式

如上图,是对datagrid的样式修改。包含:头部背景色及字体居中,单元格背景色设置,行字体颜色设置,复选框。基本都是基于渲染器的定义。1)头部背景色及字体居中:头部渲染器并没有直接的属性可用,需要自定义datagrid的皮肤。在自动生成的皮肤中,可以找到 <!--- Defines the ...
  • zhongyuan_1990
  • zhongyuan_1990
  • 2014-04-29 11:39
  • 1105
    个人资料
    • 访问:1095393次
    • 积分:14272
    • 等级:
    • 排名:第1027名
    • 原创:305篇
    • 转载:28篇
    • 译文:0篇
    • 评论:592条
    最新评论
    [╄ 冷枫]简介