在Flex中使用CSS
日期:2008-12-18 阅读:329 分类:Flex~Flash
一.使用<mx:Style>标签
xml 代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Style>
Button {
color: #ff0000;
borderColor:
#cccccc;
themeColor: #00ff00;
fontFamily:
Arial;
fontSize: 12;
fontWeight: normal;
}
.mylinkButton {
rollOverColor:
#00ff00;
selectionColor: #00ff00;
color:
#ffff00;
}
</mx:Style>
<mx:Button x="10" y="10" label="Button"/>
<mx:LinkButton
styleName="mylinkButton" label="LinkButton" x="10" y="40"/>
</mx:Application>
二.使用css文件
使用css文件和使用<mx:Style>标签基本一样。先创建一个css文件mystyle.css,并将上面的样式内容复制进去。
css 代码
/* CSS file */
Button {
color:
#ff0000;
borderColor: #cccccc;
themeColor: #00ff00;
fontFamily: Arial;
fontSize: 12;
fontWeight:
normal;
}
.mylinkButton {
rollOverColor: #00ff00;
selectionColor: #00ff00;
color: #ffff00;
textRollOverColor: #0000ff;
}
再修改我们的主程序,使用<mx:Style>标签的source属性,指定css文件
xml 代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Style
source="css/mystyle.css"/>
<mx:Button x="10" y="10"
label="Button"/>
<mx:LinkButton styleName="mylinkButton"
label="LinkButton" x="10" y="40"/>
</mx:Application>
三.使用编程方法
可以通过CSSStyleDeclaration对象,来设置css样式,也可以通过flex显示对象的setStyle()来设置样式。
private function init():void
{
myLinkBtn.setStyle("color",
"#ff0000");
myLinkBtn.setStyle("rollOverColor", "#ffff00");
}
相关文章
- Flex添加事件监听 2008-12-18
- Flex编码的过程分析 2008-12-22
- 不错的flex资料站点 2008-11-02
- Flex简单开发环境 2008-11-01
- Flex的Event对象 2008-12-22
- 纯css+html制作的菜单 2008-07-06
- getElementsByClassName 2008-07-21
- 布局:div等高处理 2008-07-06
- xhtml+css 设计注意事项 2008-07-30
- 今天买了css蝉意花园 2008-07-26