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

开发 后端
你知道在Flex中如何使用CSS吗,本文就向大家简单介绍一下,希望本文的介绍能让你有所收获,欢迎大家一起来学习。

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

在Flex中使用CSS

一.使用<mx:Style>标签

xml代码 

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  3. layout="absolute"> 
  4.  
  5. <mx:Style> 
  6. Button{  
  7. color:#ff0000;  
  8. borderColor:#cccccc;  
  9. themeColor:#00ff00;  
  10. fontFamily:Arial;  
  11. fontSize:12;  
  12. fontWeight:normal;  
  13. }  
  14. .mylinkButton{  
  15. rollOverColor:#00ff00;  
  16. selectionColor:#00ff00;  
  17. color:#ffff00;  
  18. }  
  19. </mx:Style> 
  20.  
  21. <mx:Buttonxmx:Buttonx="10"y="10"label="Button"/> 
  22. <mx:LinkButtonstyleNamemx:LinkButtonstyleName="mylinkButton"label="LinkButton"  
  23. x="10"y="40"/> 
  24.  
  25. </mx:Application> 
  26.  

 二.使用CSS文件

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

CSS代码
 

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

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

xml代码
 

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

 三.使用编程方法

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

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

【编辑推荐】

  1. 技术分享 Flex提交到jsp页面出现乱码解决办法
  2. FlexBuilder4十大新特性闪亮登场
  3. Flex框架中Cairngorm和Mate的优点大比拼
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 解析Flex应用开发步骤 新特性和技术框架 

 


 

责任编辑:佚名 来源: javaeye.com
相关推荐

2010-08-06 14:36:39

CSS样式Flex

2010-08-09 15:30:00

Flex字体

2010-07-30 13:52:17

Flex组件

2010-08-10 16:30:05

Flex上传文件

2010-07-27 10:39:25

Flex组件

2010-08-10 16:41:54

FlexJSP

2010-08-04 09:26:27

Flex数据

2010-08-12 11:05:33

Flex数据绑定

2010-09-08 12:49:16

CSS斜线

2010-05-18 13:26:16

Subversion插

2010-07-27 11:08:12

Flex

2010-08-09 15:19:29

Flex滚动条

2010-08-10 15:26:38

Flex应用程序

2010-07-30 13:08:38

Flex调用JavaS

2010-08-31 16:35:59

CSS

2010-03-17 10:58:47

Python学习笔记

2021-03-11 16:34:57

css前端CSS 特效

2010-08-09 10:34:05

Flex背景

2010-08-05 15:46:13

Flex行为Flex效果

2010-07-30 09:28:09

Flex数据绑定
点赞
收藏

51CTO技术栈公众号