开发学院图形图像Flash 积少成多Flash(9) - Flex 3.0 布局控件, 样式(css... 阅读

积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)

 2009-11-16 00:00:00 来源:WEB开发网   
核心提示: 2、样式的控制样式/**//**Flex也支持CSS中的类型选择符*此种类型选择符必须设置在外部,然后由具体的mxml引用,积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)(2),直接将其写在<mx:Style/>中无效*/Applica

2、样式的控制

样式

/**//* 
 * Flex 也支持 CSS 中的类型选择符
 * 此种类型选择符必须设置在外部,然后由具体的 mxml 引用,直接将其写在 <mx:Style /> 中无效
 */
Application
{}{
    font-size: 12px;
}
引用样式
<mx:Style source="style.css" />

css.mxml(Flex 中样式相关的演示)

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
    initialize="init();"
    title="CSS 的应用">
    
    <mx:Script>
        <![CDATA[
    
            // 重写已声明的样式
            // 其中样式 “italic” 已在 <mx:Style /> 中做了声明
            private function init():void
            {
                var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".italic");
                css.setStyle("fontStyle", "italic");
            }
            
            // 以编程方式指定样式
            private function setTextInputStyle():void
            {
                txt.setStyle("color", "Red");
            }
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        /* 在 Flex 中的做样式设置,基本与 CSS 相同 */
        
        .red 
        { 
            color: red;
        }
        .bold
        {
            font-weight: bold;
        }
        .italic
        {
            
        }
        
        .myClass
        {
            /* 使用内嵌图片做背景 */
            background-image:Embed("images/logo.png");
        }
    </mx:Style>       
    
    <!--以声明方式指定样式(可以一次指定多个样式)-->
    <mx:Label text="Label" x="10" y="10" styleName="red bold italic" />
    
    <!--以编程方式指定样式-->
      <mx:TextInput id="txt" text="TextInput" x="10" y="36" initialize="setTextInputStyle();" />
    <mx:VBox styleName="myClass" x="10" y="85">
        <mx:Label text="Label" color="yellow" fontSize="30" />
    </mx:VBox>   
  
</mx:Panel>

Tags:积少成多 Flash Flex

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接