学习笔记在Flex中如何使用CSS文件-css中flex用法

本文和大家重点讨论一下如何在Flex中使用CSS，主要包括使用<mx:Style>标签和使用CSS文件两部分内容，通过这两者的对比我们可以看出在Flex使用CSS的优越性。

在Flex中使用CSS

一.使用<mx:Style>标签

xml代码

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns: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:Buttonxmx:Buttonx="10"y="10"label="Button"/> 
<mx:LinkButtonstyleNamemx:LinkButtonstyleName="mylinkButton"label="LinkButton"  
x="10"y="40"/> 
 
</mx:Application> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

二.使用CSS文件

使用CSS文件和使用<mx:Style>标签基本一样。先创建一个CSS文件mystyle.CSS，并将上面的样式内容复制进去。

CSS代码

/*CSSfile*/  
Button{  
color:#ff0000;  
borderColor:#cccccc;  
themeColor:#00ff00;  
fontFamily:Arial;  
fontSize:12;  
fontWeight:normal;  
}  
.mylinkButton{  
rollOverColor:#00ff00;  
selectionColor:#00ff00;  
color:#ffff00;  
textRollOverColor:#0000ff;  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

再修改我们的主程序，使用<mx:Style>标签的source属性，指定CSS文件

xml代码

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
layout="absolute"> 
 
<mx:Stylesourcemx:Stylesource="CSS/mystyle.CSS"/> 
 
<mx:Buttonxmx:Buttonx="10"y="10"label="Button"/> 
<mx:LinkButtonstyleNamemx:LinkButtonstyleName="mylinkButton"label="LinkButton"
x="10"y="40"/> 
 
</mx:Application> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

三.使用编程方法

可以通过CSSStyleDeclaration对象，来设置CSS样式，也可以通过Flex显示对象的setStyle()来设置样式。

privatefunctioninit():void{  
myLinkBtn.setStyle("color","#ff0000");  
myLinkBtn.setStyle("rollOverColor","#ffff00");  
}  
1.
2.
3.
4.

【编辑推荐】

学习笔记 在Flex中如何使用CSS文件

学习笔记在Flex中如何使用CSS文件