[冷枫]Flex精华摘要 5:使用样式和字体
来源:互联网 发布:g1 4内螺纹编程 编辑:程序博客网 时间:2024/04/28 07:38
Flex所支持的样式比Flash要丰富,样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。样式定义类型1. 外部样式表
<mx:Style source='/css/myStyle.css'/>
Flex会调用全局样式表global.css,该全局样式表由flex-config.xml定义,如:
<global-css-url>/WEB-INF/flex/global.css</global-css-url>
系统默认的样式表文件global.css文件其实没有任何样式定义,我们可以手动添加全局样式,也可以更改默认的全局样式文件路径。如,把全局样式文件该为:
<global-css-url>/css/styles.css</global-css-url>
在这里顺便提一点,定义外部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 颜色名称格式
2.本地样式定义使用<mx:Style>来定义当前文件的样式下面的例子定义了myFontStyle子类样式,要使用对应的样式可以在组件中使用styleName属性来应用样式。
<mx:Style>
2. .myFontStyle { fontSize: 15 }
3. </mx:Style>
4. <mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >
下面的样式则定义了所有Button组件的样式,使用该方式定义的样式在使用的时候不需要指定样式名。
<mx:Style>
2. Button { fontSize: 15 }
3. </mx:Style>
4. <mx:Button id='myButton' label='Click Here' >
3. 内嵌样式定义对个别需要特殊处理的组件,可以使用下面的方式进行内嵌样式定义
<mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>
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. }
2. 应用程序样式定义Application标记是Flex的根标记,Application样式用来定义未被定义的容器以及子容器的样式
Application {
2. marginLeft: 0px;
3. marginRight: 0px;
4. marginTop: 0px;
5. marginBottom: 0px;
6. horizontalAlign: 'left';
7. }
关于字体的样式定义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来应用该字体样式,如:
Accordion {
2. fontFamily: myfont
3. }
- [冷枫]Flex精华摘要 5:使用样式和字体
- Flex精华摘要 5:使用样式和字体
- Flex精华摘要 4:使用AS脚本
- Flex精华摘要--使用AS脚本
- Flex精华摘要--如何开始
- Flex精华摘要--基本语法
- Flex精华摘要 1:如何开始
- Flex精华摘要 2:基本MXML功能
- Flex精华摘要 3:基本语法
- Flex精华摘要--基本MXML功能
- flex中设置字体样式
- flex中使用设备和嵌入字体
- 精华摘要
- flex设置样式和使用css文件
- FLEX控件样式和使用在线Demo
- Button 同时使用图片样式和字体样式
- POI 字体和字体样式
- Flex 字体使用
- oracle 中关于当前的sysdate,sysstimestap,current_date,curent_timestamp 区别
- oracle 中关于当前的sysdate,sysstimestap,current_date,curent_timestamp 区别
- atoi和itoa的实现
- 关于datagridview的一些操作
- 以人为本,以什么人为本?
- [冷枫]Flex精华摘要 5:使用样式和字体
- 解决头文件相互包含问题的方法
- 在.Net中使用AnyChart的简单例子(上)
- 程序员-上路吧
- eclipse字符集设置问题
- Vim Shortcut
- 深入分析:怎样从一个对话框弹出单文档视图
- JAVA调用exe可执行文件
- 俞黎敏与JAVA脚本编程