• flex の style[转自百度空间]


    Flex中 style 样式使用基本说明
    2010-12-03 13:51

    样式的定义方式
    1. 外部样式表 <mx:Style source='/css/myStyle.css'/>
    Flex会调用全局样式表global.css,该全局样式表由flex-config.xml定义,
    如:<global-css-url>/WEB-INF/flex/global.css</global-css-url>
    系统默认的样式表文件global.css文件其实没有任何样式定义,我们可以手动添加全局样式,也可以更改默认的全局样式文件路径。
    如,把全局样式文件该为:
    <global-css-url>/css/styles.css</global-css-url>

    在这里顺便提一点,定义外部css文件的时候,颜色样式有四种定义方式:
    .myclass { fillColor: #6666CC } // 16进制颜色格式
    .myclass { borderColor: rgb(77%,22%,0%) } // RGB 颜色格式
    .myclass { errorColor: rgb(0,255,0) } // 10进制RGB颜色格式
    .myclass { color: Blue } // VGA 颜色名称格式

    2. 本地样式定义
    使用<mx:Style>标签来定义当前文件的样式
    <mx:Style>
    .myFontStyle { fontSize: 15 }
    </mx:Style>
    <mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >

    下面的样式则定义了所有Button组件的样式,使用该方式定义的样式在使用的时候不需要指定样式名。
    <mx:Style>
    Button { fontSize: 15 }
    </mx:Style>
    <mx:Button id='myButton' label='Click Here' >

    3. 内嵌样式定义
    对个别需要特殊处理的组件,可以使用下面的方式进行内嵌样式定义
    <mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>

    4. 使用脚本定义
    这种方法使用了Flash传统的AS脚本方式来定义样式,具有更强大的灵活性,并且可以使用StyleManager类以及getStyle() 和 setStyle() 方法,如下所示:
    <mx:Script>
    <![CDATA[
    //使用styleManger类
    mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold';
    //获取组件样式
    lb1.text=ip1.getStyle('fontSize');
    //设置组件样式
    lb1.text=ip1.setStyle('fontSize',newSize);
    ]]>
    </mx:Script>

    如果三种样式定义方式同时使用的话,优先级别从高到低依次为:
    内嵌式样式>本地样式定义(脚本样式定义)>外部样式定义

    5. 特殊样式定义

    全局样式定义
    global {
    fontSize:22;
    textDecoration: underline;
    }

    应用程序样式定义
    Application标记是Flex的根标记,Application样式用来定义未被定义的容器以及子容器的样式
    Application {
    marginLeft: 0px;
    marginRight: 0px;
    marginTop: 0px;
    marginBottom: 0px;
    horizontalAlign: 'left';
    }


    6. 字体的样式定义
    使用设备字体
    .myClass {
    fontFamily: Arial, Helvetica, '_sans';
    color: Red;
    fontSize: 22;
    fontWeight: bold;
    }
    使用移植字体
    <mx:Style>
    @font-face {
    src:url('akbar.ttf');
    fontFamily: myfont;
    }
    @font-face {
    src:url('akbar.ttf');
    fontWeight: bold;
    fontFamily: myfontBold;
    }
    </mx:Style>

    在定义了该字体样式后,就可以通过fontFamily来应用该字体样式,如:
    Accordion {
    fontFamily: myfont
    }

  • 相关阅读:
    并发编程(六)并发队列
    并发编程(五)原子类
    Java基础一篇过(九)面向对象之多态【向上转型与向下转型】
    ArrayList源码解析
    Redis5设计与源码分析读后感(四)压缩列表
    Redis5设计与源码分析读后感(三)跳跃表
    Python学习————CBV模型
    Python学习————Django
    Python学习————JS
    Python学习————SEO和SEC
  • 原文地址:https://www.cnblogs.com/avenxia/p/2471656.html
Copyright © 2020-2023  润新知