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

发布时间:2021-08-27 14:06:27 作者:chen
来源:亿速云 阅读:128

本篇内容主要讲解“Flex中如何使用Flex样式定义和字体”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Flex中如何使用Flex样式定义和字体”吧!

Flex中使用样式和字体

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

Flex样式定义类型

1.外部样式表

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

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

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

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

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


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'>


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

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脚本方式来定义样式,具有更强大的灵活性,并且可以使用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样式定义方式同时使用的话,优先级别从高到低依次为:内嵌式样式>本地Flex样式定义(脚本Flex样式定义)>外部Flex样式定义。

特殊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.}

关于字体的Flex样式定义

1.使用设备字体

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


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来应用该字体样式,如:

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

到此,相信大家对“Flex中如何使用Flex样式定义和字体”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Oracle Flex ASM和Flex集群
  2. Flex中定义和使用渲染器的方式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flex

上一篇:PHP中include/require/include_once/require_once怎么用

下一篇:shell脚本实现自动化下载并检测ftp文件备份

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》