`
chengxianju
  • 浏览: 256465 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Flex中CSS三种表达方式和区别

    博客分类:
  • Flex
阅读更多

Flex中的CSS不同于Web中的CSS,只有一部分是相似的,而且不能有连字符,其表现形式有三种:
1、在组件标签中写,如:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
其中fontSize="12"就是一个CSS。
2、在应用文件中写,可以写在应用程序的Style标签中:
     <mx:Style>
           Button{
                  fontSize:12;
                  fontFamily:Arial;
          }
     </mx:Style>
这是通用样式的写法,这样写所有的Button都会是这个样式,如果想单独定义样式,可以用下面的方法:
     <mx:Style>
           .myButton{
                  fontSize:12;
                  fontFamily:Arial;
          }
     </mx:Style>
然后在组件中这样使用该样式
    <mx:Button styleName="myButton"/>
3、在外部CSS文件中写:
    <mx:Style source = "CSS文件路径"/>

第一种方式效率最高,但是会造成代码比较混乱,组建的属性和样式都混在一起了,也不便于维护。所以一般情况下建议把样式写在外部。
CSS有继承性,容器组建自动继承父容器中的CSS样式,如在Application标签中设置了fontSize = “12” 则里面的大部分组建都会继承这一样式;Flex中的组件支持多继承,可以同时拥有多重不冲突的CSS样式,如下面的例子中:
<mx:Style>
      Button{
         fontSize:12;
         fontFamily:Arial;
      }
      .mybutton{
         color:#FF000C;
      }
</mx:Style>
<mx:Button label="test" styleName="mybutton" />
在上述例子中,button组建既有color:#FF000C;样式,又继承了通用Button样式。
在flex 3 中不支持不同样式的组合应用,而在网页中的CSS却可以组合应用,如在网页中可以有如下的定义:
<li  class = "style1 style2"></li>
但是在flex 3 中一个组件的styleName只能学一个样式名称,不过在flex 4中开始支持不同样式的组合使用

Adobe从flex2就开始推出flex style exploer(样式设计器)了,我们可以方便的设计出自己所需要的样式来,
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

分享到:
评论

相关推荐

    Flex_Css完全手册.doc

    《Flex_Css完全手册》是一本详尽阐述CSS布局技术和Flex布局模式的专业指南。文档旨在为开发者提供关于Flex和CSS的全面理解,帮助他们更好地掌握网页和应用的现代布局技巧。 Flex布局,全称为Flexible Box布局,是...

    关于flex 的css样式表

    Flex布局,全称为“Flexible Box”,也被称为Flexbox,是一种用于网页布局的CSS3模块,旨在提供更加灵活、响应式的布局方案。它允许开发者轻松地调整元素在容器内的排列方式,适应不同屏幕尺寸和设备类型。在现代...

    Flex动态CSS改变整个application

    在Flex开发中,CSS(Cascading Style Sheets)是一种强大的工具,用于定义用户界面的外观和布局。通过动态地改变CSS样式,我们可以实现应用程序界面的实时更新,为用户提供更丰富的交互体验。本篇文章将深入探讨如何...

    WindowsClassic flex 皮肤 css

    在IT领域,WindowsClassic flex 皮肤 CSS是一种设计样式,它为使用Adobe Flex框架开发的用户界面提供了类似Windows经典风格的外观。Flex是一个用于构建富互联网应用程序(RIA)的开源框架,它允许开发者使用...

    css3_flex使用示例

    它提供了一种更为灵活的方式来控制元素的排列、对齐和分配空间,尤其在响应式设计中表现突出。本资源“css3_flex使用示例”包含了一些关于CSS3 Flexbox的实际应用案例,帮助开发者深入理解和掌握这一强大的布局工具...

    flex的css部分。

    在给定的部分内容中,虽然主要讲述的是Flex与MXML和ActionScript的结合使用,但这里我们将专注于纯CSS Flexbox的应用示例。假设我们有一个包含三个项目的容器,我们希望它们在一行中均匀分布,并在屏幕变小时自动...

    flex 各组件对应的css样式属性大全

    Flex布局,全称为“Flexible Box”,是CSS3中一种用于处理网页或应用程序中灵活、响应式的布局模式。它使得在不同设备和屏幕尺寸下,元素的排列和对齐变得更为简单。本文将深入探讨Flex组件及其相关的CSS样式属性,...

    flex css iCandySource

    标题中的“flex css iCandySource”提示我们讨论的主题与使用Flex框架和CSS技术来设计一个名为“iCandy”的项目有关。Flex是Adobe开发的一个开源SDK,主要用于构建富互联网应用程序(RIA),尤其是基于Flash Player...

    CSS3样式表-定位之Flex布局.pptx

    Flex布局,全称为Flexible Box布局,是CSS3中一种强大的页面布局工具,旨在提供更为灵活、响应式的网页设计。自2009年由W3C提出以来,它已获得了所有主流浏览器的广泛支持,成为现代网页开发的标准。通过Flex布局,...

    css.rar_css VC_css bison_flex

    在CSS解析过程中,Flex的角色是识别和提取CSS中的关键字、标识符、数值、单位等基本元素,将它们转化为可供Bison进一步处理的token流。 项目中的"css.rar"很可能包含了以下内容: 1. **源代码**:Bison和Flex的源...

    flex css shadow

    它旨在提供一种更灵活、更直观的方式来控制元素的对齐、分布和大小调整,特别是在响应式设计中。以下是一些核心概念: 1. **容器(Container)**:Flexbox布局中的容器使用`display: flex;`或`display: inline-flex...

    css两种布局模式flex、grid

    CSS布局模式中的Flex布局和Grid布局是现代网页设计中非常重要的两种技术,它们提供了强大的灵活性和控制力,使得页面元素的排列和定位更加便捷。 **Flex布局** Flex布局,全称Flexible Box,是一种用于容器内子...

    Flex中背景平铺的做法

    这里,我们使用了`backgroundRepeat`属性来指定背景图像的重复方式,值`repeat`表示图像将在水平和垂直方向上重复显示。 #### 四、总结 通过上述介绍可以看出,在Flex 3中实现背景平铺需要编写自定义类来完成,而...

    flex css FlexraysGrey

    在与 CSS Flexbox 结合的场景下,这可能表示项目结合了传统 Flex 平台和现代浏览器的 Flexbox 布局。 3. `.project`:通常是一个 Eclipse 或其他 IDE 的项目配置文件,它定义了项目的结构和设置。这个文件可以帮助...

    浅谈CSS3中display属性的Flex布局 - 三里屯柯南 - 博客园1

    在CSS3中,`display`属性的`flex`布局是一种强大的布局模式,旨在解决传统CSS布局方式在处理复杂和动态内容时的局限性。通过使用`display: flex`,我们可以轻松地创建响应式和灵活的网页布局。在本文中,我们将深入...

    flex组件,功能强大的下拉框

    Flex布局,全称为Flexible Box,是CSS3中的一种布局模式,旨在解决传统盒模型在处理复杂布局时的局限性。通过Flexbox,我们可以轻松地调整元素的大小、顺序和对齐方式,以适应不同的屏幕尺寸和方向。 2. **下拉框...

    Flex布局学习资料

    Flex布局,全称为“Flexible Box”,也称作柔性盒布局,是CSS3中的一种布局模式,旨在提供一种更加有效和灵活的方式来控制Web页面元素的排列和对齐方式。这种布局方式特别适合处理需要动态调整的界面,比如响应式...

    CSS样式表示列

    3. **Flexbox布局** - CSS Flexible Box布局模块(简称Flexbox)提供了一种更灵活、强大的方式来创建一维布局(行或列)。通过设置父元素的`display`属性为`flex`,可以轻松地调整子元素的大小和顺序。例如: ```...

    flex组件详细介绍

    Flex布局,全称为Flexible Box,是CSS3中一种强大的布局模型,旨在提供更灵活的盒状元素排列方式,尤其适用于响应式设计。本篇将详细阐述Flex组件的使用及其核心概念,结合示例代码和组件效果图,帮助你快速上手。 ...

    flex 样式选择器

    Flex样式包括内联样式、全局样式和主题样式三种类型。内联样式直接应用于组件,而全局样式则通过`&lt;Style&gt;`标签在MXML文件中定义,可以影响整个应用程序。主题样式是最具影响力的一种,它们定义在一个或多个CSS文件中...

Global site tag (gtag.js) - Google Analytics