FLEX中的CSS样式
来源:互联网 发布:windows账户登录 编辑:程序博客网 时间:2024/06/05 05:43
Flex所支持的样式比Flash要丰富,样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。
样式定义类型
2.本地样式定义
使用<mx:Style>来定义当前文件的样式
内嵌式样式>本地样式定义(脚本样式定义)>外部样式定义
特殊样式定义
在进行样式定义的时候,我们需要注意几种Flex特殊的样式定义
1. 全局样式定义
样式定义类型
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进制颜色格式 .myclass { borderColor: rgb(77%,22%,0%) } // RGB 颜色格式 .myclass { errorColor: rgb(0,255,0) } // 10进制RGB颜色格式 .myclass { color: Blue } // VGA 颜色名称格式
2.本地样式定义
使用<mx:Style>来定义当前文件的样式
下面的例子定义了myFontStyle子类样式,要使用对应的样式可以在组件中使用styleName属性来应用样式。
<mx:Style> .myFontStyle { fontSize: 15 } </mx:Style> <mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >
下面的样式则定义了所有Button组件的样式,使用该方式定义的样式在使用的时候不需要指定样式名。
<mx:Style> Button { fontSize: 15 } </mx:Style> <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() 方法,如下所示:
<mx:Script> <![CDATA[ //使用styleManger类 mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold'; //获取组件样式 lb1.text=ip1.getStyle('fontSize'); //设置组件样式 lb1.text=ip1.setStyle('fontSize',newSize); ]]> </mx:Script>如果三种样式定义方式同时使用的话,优先级别从高到低依次为:
内嵌式样式>本地样式定义(脚本样式定义)>外部样式定义
特殊样式定义
在进行样式定义的时候,我们需要注意几种Flex特殊的样式定义
1. 全局样式定义
对所有未被定义的控制组件应用global样式
global { fontSize:22; textDecoration: underline; }2. 应用程序样式定义
Application标记是Flex的根标记,Application样式用来定义未被定义的容器以及子容器的样式
Application { marginLeft: 0px; marginRight: 0px; marginTop: 0px; marginBottom: 0px; horizontalAlign: 'left'; }关于字体的样式定义
1. 使用设备字体
.myClass { fontFamily: Arial, Helvetica, '_sans'; color: Red; fontSize: 22; fontWeight: bold; }
2. 使用移植字体
<mx:Style> @font-face { src:url('akbar.ttf'); fontFamily: myfont; }
@font-face { src:url('akbar.ttf'); fontWeight: bold; fontFamily: myfontBold; } </mx:Style>
在定义了该字体样式后,就可以通过fontFamily来应用该字体样式,如:
Accordion { fontFamily: myfont }
- FLEX中的CSS样式
- Flex中的样式(CSS)
- 【flex】CSS样式笔记
- Flex CSS 样式控制
- 【flex中的小问题累积】-button的css样式
- Flex中的CSS: (9)可继承/不可继承样式的定义 以及Flex中的实现方法
- Flex中的样式属性
- Flex中的CSS: (8)Flex框架保存样式信息的时机
- Flex样式表自定义 .css
- Flex中的CSS: (9)可继承/不可继承样式的定义 以及Flex中的实现方法 1
- flex中的css应用
- Flex 4中的 CSS
- css中的flex用法
- Flex arcgis中的Navigation样式
- CSS中的Img样式
- CSS中的Img样式
- CSS中的样式简写
- XHTML中的CSS样式
- KeyValuePair结构
- 好的网站
- linux查看系统信息命令大全
- ubuntu中的ntsysv工具: sysv-rc-conf
- IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法
- FLEX中的CSS样式
- 以图搜图新体验:图片谷歌和百度识图
- 基于 Android NDK 的学习之旅-----序言
- ListBox增加横向滚动条
- geek(努力吧)
- 从数据库读图片并在页面中显示
- Linux环境进程间通信(二): 信号(上)
- BSP 概念解析
- Linux下定时的实现