`

flex使用样式

    博客分类:
  • flex
阅读更多

关于样式

 
你可以通过样式属性来修改 Flex 组件的外观,这此属性可以定义一个 Label 控件的字体大小,或者是 Tree 控件的背景颜色。在 Flex 中,一些样式属性是从父容器继承到子控件的,如样式类型和类。这意味着你只需定义一次样式,然后你可以将此样式应用到单个控件和列表控件,此外,你还可以在本地覆盖每个控件的单独样式属性。组件级别和全局级别的样式将给你控制应用程序的外观以很大的灵活性。
本节向你介绍将样式应用到控件,也介绍了 CSS (层叠样式)的基础知识,样式属性值的基本格式( Length,Color ,Time )以及样式的继承。本节的子节介绍了在 Flex 中,应用样式的不同方法。
Flex 不提供使用 CSS 控制组件布局的所有属性方面,像 x,y,width height UIComponent 的属性,所以不能用 CSS 来定义。其他属性,比如 left,right,top bottom 是样式属性,通常用来在容器中操作组织件的定位。
 
一、            Flex 中使用样式
 
Flex 中有使用样式的很多方法。一些提供了更细粒度和可编程的控制,另外一些不是很灵活,但是可运算量很小。在 Flex 中将样式应用到控件有几种方法。
当应用样式的时候,你必须留心你的主题支持哪些属性。 Flex 中的并不支持所有的样式属性。更多的信息,请查看“关于支持的样式”
二、            外部样式表
使用 CSS 应用样式到文档或者整个应用程序。你可以不调用 ActionScript 程序指定一个样式表。这是应用样式的最简单方法,但是这不是最灵活的方法。样式表可以定义被所有控件继承的全局样式 , 也可以定义应用到某一控件的单独样式类。
下面的例子 , 在当前的文档应用了一个外部样式表 myStyle.css.
<mx:Style source=”myStyle.css”/>
更多关于应用外部样式表的信息,请参看 应用外部样式表 ”P617
Flex framework.swc 文件中包括了一个全局样式表 (default.css) 。这个文件包含全局样式类选择器的定义,以及大多数 Flex 组件的类型选择器。关于 default.css 更多信息 , 请参看“关于默认样式表部分”( P618
Flex 还包括一些其他的样式表,他们有统一的外观。更多信息,参看 关于包括主题文件 ”P631
 
三、            本地样式定义
使用 <mx:Style> 标签定义应用到当前文档和其子组件的样式,你使在 <mx:Style> 标签中应用 CSS 语法定义样式,此样式可以应用到某个控件和单独的控件的实便。下面的例子定义了一个新的样式并且将它应用到 myButton 控件。
<mx:Style>
       .myFontStyle { fontSize:15}
</mx:Style>
<mx:Button id=”myButton” styleName=”myFontStyle” label=”Click Here”/>
下面的例子定义了一个新的样式并且应用到一个按钮控件上。
更多的关于使用本地样式定的信息,请参看 使用本地样式定义 ”p619
 
四 样式管理器类 (StyleManager )
使用样式管理器类( StyleManager )应用样式到所有的类,或者应用到所有的指定类的实例。下面的例子设定了所有的 TextArea 控件的字体大小( fongSize )为 15 像素。
StyleManager.getStyleDeclaration(“TextArea”).setStyle(“fongSize”,15);
你也可以使用 CSSStyleDeclaration 对象去构建一个运行时样式表,并且使用 StyleManager 类的 setStyleDeclaration() 方法运用这些样式 .
使用 StyleManager 类的更多信息,请参考 运用样式管理器类 (StyleManager)”.
 
getStyle() setStyle() 方法的使用
使用 setStyle() getStyle() 方法操作控件实例的样式属性。使用这些方法运用样式比使用样式表需要客户端大量的处理资源,但是担供了更细粒度的应用。
 
下面的例子设定了 Button 控件的实例 myButton 的字体大小为 15 像素 .
myButton.setStyle(“fontSize”,15);
关于 getStyle() setStyle() 方法的更多信息,请参看 使用 getStyle() setStyle() 方法节 ”p623
 
五 内联样式
使用 MXML 标签应用样式属性。这些属性仅被除应用到控件的实例。这是应用实例属性的最简便的方法,因为没有 ActionScript 代码块和方法调用。
下面的例子设定了 Button 控件的实例 myButton 的字体大小为 15 像素
<:Button id="myButton" fontSize="15" label="My Button"/>
 
在一个 MXML 标签里,你必须使用样式属性名称的驼峰表示法。例如,前一个例子,你必须写成“ fongSize” 而不是“ font-size(CSS 方式 ). 更多的样式属性名,请参考“关于属性和选择器名称节” p607.
你可以给内联样式属性绑定值。
关于内联样式的更多信息,请参看 使用内联样式 ”.
 
六 设定全局样式
大多数文本和颜色样式,比如 fontSize color 属性,是可继承的。当你应用一个可继承的样式到一个容器,此容器的所有子组件会继承此样式属性的值。如果你设定一个面板( Panel )容器的颜色( color )属性为绿色( green , 所有在此容器中的按钮都将是绿色,除非这些按钮覆盖了颜色( color )属性。
然后一些样式并不是可继承的。如果你应用这些样式属性到父容器,那么只有父容器应用了此样式,此容器的子控件没有使用此不可继承的样式属性的值。
运用全局样式,你可以应用不可继承的样式到所有的控件而不需要显示的覆盖此样式。 Flex 提供以下方法应用全局样式:
A. StyleManager 样式管理器全局样式
B. CSS 全局选择器。
样式管理器让你将全局样式应用到所有的控件。更多的关于应用样式管理器的信息,请参考“使用样式管理器类 StyleManager
在你的 CSS 样式定义中应用 global 选择器应用全局样式,这些可以在外部的样式表中定义也可在 <mx:Style> 标签中定义。更多信息,参看“使用全局选项择器( global )”
分享到:
评论

相关推荐

    Flex样式生成工具(定制各种Flex按钮网页css样式)

    使用Flex样式生成工具,开发者可以自定义这些Flex元素的样式,包括但不限于按钮的尺寸、颜色、边框、阴影、字体、间距等属性。 在这款工具中,你可以选择预设的按钮样式作为基础,然后通过拖动滑块或输入数值来调整...

    flex移动布局,极简公共样式包,附demo

    这个“flex移动布局,极简公共样式包”正是为了方便开发者快速构建适应不同屏幕尺寸的移动端应用而设计的。让我们深入探讨Flex布局的原理、优势以及如何利用这个公共样式包来提升开发效率。 1. **Flex布局简介** ...

    应用flash制作flex样式

    使用Flash制作Flex样式的优势在于Flash的强大图形编辑功能。Flash提供了丰富的绘图工具,可以创建自定义矢量图形,这些图形可以作为Flex组件的皮肤。通过将Flash中的设计导出为SWF或SVG格式,然后在Flex项目中导入,...

    FLEX界面样式表工具

    标题中的"FLEX界面样式表工具"指的是用于设计和管理Adobe Flex应用中用户界面样式的工具。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。这些工具帮助开发者通过图形化的方式...

    Flex样式生成工具

    Flex样式生成工具是一种专为Adobe Flex应用程序设计的实用工具,旨在简化和优化用户界面的样式定制过程。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它基于ActionScript和MXML,提供了丰富的图形和交互...

    flex特效 不错的flex样式生成器

    这个“flex特效 不错的flex样式生成器”是一个工具,可以帮助开发者更轻松地生成适用于Flex布局的CSS样式。通过图形化的界面,用户可以直观地调整各种属性,以实现所需的布局效果。 首先,让我们深入理解Flex布局的...

    Flex3样式设计工具4IN1Flex3样式设计工具4in1.rar

    这个"Flex3样式设计工具4in1.rar"是一个压缩包,包含了多个与Flex3样式设计相关的工具和资源,帮助开发者更有效地管理及定制应用的外观。 1. **Flex3 Component Explorer**:这是一个组件浏览器,允许开发者查看和...

    Flex ColumnChart 样式设置

    Flex ColumnChart 样式设置,详细设置。

    Flex\Flex关于样式专题

    3. **CSS语法**:Flex样式系统基于CSS,因此理解基本的CSS语法至关重要。包括选择器、属性和值,以及规则集的组织方式。例如,`.myButton { color: #FF0000; font-size: 14px; }`。 4. **MXML样式**:除了使用CSS,...

    Flex样式范例网站

    在"Flex样式范例网站"中,我们可以期待看到一系列关于如何使用Flexbox进行网页设计的实例。 Flexbox的主要目标是为容器内的子元素提供更灵活的布局控制,包括水平或垂直对齐、自动换行、自适应大小分配等。在传统...

    flex3 样式设计器

    Flex3样式设计器是一款专为Adobe Flex 3开发者设计的强大工具,它允许用户直观地创建、编辑和预览Flex应用程序中的CSS样式。这个工具极大地简化了Flex应用的界面定制过程,提高了开发效率。Flex3是Adobe Flex框架的...

    flex样式设计器

    在本“Flex样式设计器”中,我们可以方便地对元素进行布局设计,实现灵活多变的界面效果。 1. **Flex容器(Container)**:Flex布局中的主体是Flex容器,它可以包含一个或多个Flex项目。容器通过设置`display`属性...

    Flex 组件样式

    ### Flex组件样式详解 在Flex开发中,合理运用组件样式可以使界面更加美观、统一且易于维护。本文将根据提供的信息,详细介绍几个常见的Flex组件样式及其属性。 #### ThemeColor 主题颜色 - **简介**:ThemeColor...

    flex 样式选择器

    Flex样式选择器是Adobe Flex框架中的一个重要组成部分,用于在Flex应用程序中定义和管理用户界面元素的外观。这个选择器允许开发者以声明式的方式定制控件的样式,从而实现丰富的视觉效果和交互体验。Flex框架是基于...

    Flex样式设计工具

    Flex样式设计工具是一种用于开发Adobe Flex应用程序的辅助软件,它帮助开发者更轻松地管理与定制Flex组件的外观和样式。Flex是一种开源框架,主要用于构建富互联网应用程序(RIA),尤其是在使用ActionScript和MXML...

    flex 样式浏览器生成器

    Flex样式浏览器生成器是一款强大的工具,专为前端开发者设计,旨在简化使用Flex布局时的CSS编写过程。这个工具提供了一个可视化的界面,允许用户通过直观地拖拽和调整元素来生成相应的CSS代码,极大地提高了开发效率...

    Flex中的CSS样式

    本文将深入探讨Flex中的CSS样式使用方式,包括本地样式定义、外部样式表、内联样式以及通过ActionScript动态设置样式的方法。 #### 一、使用本地样式定义 本地样式是在MXML文件中直接定义的样式,使用`&lt;mx:Style&gt;`...

    Flex3 样式生成查看器

    使用Flex3 样式生成查看器,用户可以: 1. **选择预设样式**:预置的样式模板可以快速改变组件的外观,提供基础设计灵感。 2. **自定义样式**:自由调整各种样式属性,观察实时效果。 3. **保存和导出**:将创建的...

    在FLEX中使用CSS样式方法

    在Flex中使用CSS样式方法是构建富互联网应用程序(RIA)的关键技术之一。Flex是一个基于ActionScript和Flash Player的开源框架,用于开发交互式、数据驱动的Web应用。它允许开发者利用CSS来控制组件的外观和布局,...

    flex样式代码生成器

    使用Flex样式代码生成器,开发者可以高效地创建符合项目需求的定制化UI,而无需手动编写大量的样式代码,大大提高了开发效率。对于新手开发者来说,这也是一种学习Flex样式系统的好方法,因为它通过可视化的方式展示...

Global site tag (gtag.js) - Google Analytics