Flex3中应用CSS样式完全详解

开发 后端
你对Flex3中应用CSS是否比较熟悉,本文向大家简单介绍一下在Flex中使用样式方法,主要包括本地样式,外部样式,内联样式等内容。

本文和大家重点讨论一下Flex3中应用CSS完全详解,比如说使用本地样式定义,使用<mx:Style>标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定义。

Flex3中应用CSS完全详解

在Flex3中使用样式方法

一、使用本地样式定义

使用<mx:Style>标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定义。这些定义会应用到当前文档以及当前文档的子文档。

  1. <mx:style> 
  2.  
  3. .solidBorder{//类选择样式  
  4.  
  5. border-style:solid;  
  6.  
  7. }  
  8.  
  9. button{//组件定义样式  
  10.  
  11. border-style:solid;  
  12.  
  13. }  
  14. ....  
  15.  
  16. </mx:style> 
  17.  
  18. //应用到组件  
  19.  
  20. <mx:VBoxstyleNamemx:VBoxstyleName="solidBorder"/> 
  21.  
  22. <mx:button/>//文档中的button自动应用样式表中的样式  
  23.  

 二、使用外部样式表

Flex3支持外部CSS样式表。要应用一个样式表到当前文档和子文档,使用<mx:Style>标签中的source属性。

  1. <mx:Application...> 
  2.  
  3. <mx:Stylesourcemx:Stylesource="style/style.css"/>//载入外部样式表  
  4.  
  5. ...  
  6.  
  7. </mx:Application> 
  8.  

 style.css文件中的样式表定义与本地样式定义相同。

三、使用内联样式

可以像设定组件的属性一样在MXML标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。

  1. <mx:buttonborderStylemx:buttonborderStyle="solid">//设定样式属性 

四、使用setStyle()方法

可以在ActionScript中使用方法来操作组件的样式属性。使用setStyle()方法的优先级是***的。

  1. <mx:Application...> 
  2.  
  3. <mx:Script> 
  4.  
  5. <![CDATA[privatefunctiominitButton():void{myButton.setStyle("paddingTop",12);myButton.setStyle("paddingBottom",12);}]]> 
  6.  
  7. </mx:Script> 
  8.  
  9. <mx:Buttonidmx:Buttonid="myButton"initialize="initButton();">//组件初始化时调用设定样式的  
  10.  

【编辑推荐】

  1. 经验总结 解析Flex3与Flex4之间的区别
  2. Flex3学习之简单教程
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-02 10:50:55

Flex3

2010-08-06 14:36:39

CSS样式Flex

2010-08-06 14:52:35

FlexCSS层叠样式表

2010-08-12 15:10:17

Flex4

2010-08-02 10:18:06

Flex3教程

2010-07-27 09:37:44

Flex

2009-07-16 14:09:24

Flex3到Flex4

2010-08-09 12:47:00

Flex4beta

2010-08-02 12:44:01

Flex3Flex4

2010-08-02 10:41:06

Flex3教程

2010-08-11 13:08:36

Flex3

2010-08-02 10:35:19

Flex3教程

2010-08-26 11:01:00

ulliCSS

2010-08-06 14:28:55

Flex CSS样式

2010-08-09 15:19:29

Flex滚动条

2010-08-31 10:05:16

CSS Sprites

2013-01-30 15:59:29

adobeCSS3HTML5

2010-08-24 12:47:32

DIVCSS

2010-08-11 10:24:46

Flex开发

2010-08-31 12:42:22

CSS a标签
点赞
收藏

51CTO技术栈公众号