解析Flex中外部样式表的使用

开发 后端
本文向大家简单介绍一下Flex使用层级样式表(CSS),Flex使用层级样式表就像在HTML中一样,你可以在应用中嵌入一个指向外部样式表。

本文和大家重点讨论一下Flex如何使用层级样式表(CSS),Flex使用层级样式表标准来保证用户界面的一致性,并使应用更易于维护,就像在HTML中一样,你可以在应用中嵌入一个指向外部样式表,或在特定的标记元素下将某种风格定义为其属性。

Flex使用层级样式表(CSS)

Flex使用层级样式表标准来保证用户界面的一致性,并使应用更易于维护。就像在HTML中一样,你可以在应用中嵌入一个指向外部样式表,或在特定的标记元素下将某种风格定义为其属性。样式表还允许定义字体。所需字体定义内嵌于应用的字节码中,即使用户的机器上没有这样的字体,也能被正确的渲染出来。

下面是一个名为main.css的外部样式表。

  1. @font-face{  
  2.  
  3. src:url("LucidaSansRegular.ttf");  
  4.  
  5. font-family:mainFont;  
  6.  
  7. }  
  8.  
  9. .error{  
  10.  
  11. color:#FF0000;  
  12.  
  13. font-size:12;  
  14.  
  15. }  
  16.  
  17. .title{  
  18.  
  19. font-family:mainFontBold;  
  20.  
  21. font-size:18;  
  22.  
  23. }  
  24.    
  25. TextArea{  
  26.  
  27. backgroundColor:#EEF5EE;  
  28.  
  29. }  
  30.  

 下面的例子通过使用<mx:style>标签声明了一个外部样式表,并对不同的控件使用了不同的样式。

  1. <?xmlversionxmlversion="1.0"encoding="iso-8859-1"?> 
  2.  
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.macromedia.com/2003/mxml"> 
  4.  
  5. <mx:stylesrcmx:stylesrc="main.css"/> 
  6.  
  7. <mx:LabelstyleNamemx:LabelstyleName="error"text="Thisisanerror"/> 
  8.  
  9. <mx:LabelstyleNamemx:LabelstyleName="title"text="Thisisatitle"/> 
  10.  
  11. <mx:TextAreawidthmx:TextAreawidth="200"height="100"wordWrap="true"> 
  12.  
  13. ThisisaTextArea  
  14.  
  15. </mx:TextArea> 
  16.  
  17. </mx:Application> 
  18.  

 图5.使用外部样式表的应用

 

【编辑推荐】

  1. 两大方式实现Flex设置浏览器标题 
  2. FlexBuilder4十大新特性闪亮登场
  3. FlexSDK4新特性中的主题 布局和样式
  4. 揭开Flex正则表达式的神秘面纱
  5. 技术分享 在Flex中嵌入Flex字体的步骤

 

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

2010-08-06 14:52:35

FlexCSS层叠样式表

2012-10-29 11:34:26

IBMdw

2010-08-13 11:21:31

Flex渲染器

2010-08-31 09:39:17

CSS样式表

2010-08-26 09:16:23

CSS样式表

2011-12-07 12:01:50

ibmdw

2010-09-14 11:11:09

DIV+CSS样式表

2010-08-26 11:19:31

CSS样式表

2010-08-13 09:38:09

Flex样式定义

2010-09-07 13:10:48

CSS样式表CSS

2010-09-06 14:11:32

CSS

2010-09-03 14:57:33

CSS样式表CSS

2010-08-13 10:01:46

Flex样式定义

2009-08-26 09:48:14

DIV+CSS样式表命

2020-04-07 09:44:51

黑暗模式可选样式表开发

2012-07-04 15:10:34

ibmdw

2010-09-06 16:09:58

CSS样式CSS

2010-08-11 13:28:46

Flex行为

2010-09-03 14:39:53

CSSCSS样式表

2012-07-09 10:11:58

ibmdw
点赞
收藏

51CTO技术栈公众号