积少成多Flash(9) - Flex 3.0 布局控件, 样式(css), 皮肤(skin)
2009-11-16 00:00:00 来源:WEB开发网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>
- ››flash文件的压缩方法(swf文件压缩瘦身)
- ››Flash鼠绘教程:临摹徐悲鸿的骏马图
- ››Flash实例:AS3制作茶杯震动动画
- ››Flash AS 3.0实例教程:Main类打造发散效果
- ››Flash cs3仿真艺术设计3.6:运用遮罩打造焦点效果...
- ››Flash cs3仿真艺术设计4.1:阴影的基本运用
- ››Flash CS4教程:3d工具实例和骨骼工具
- ››flash加载外部文本文件的3种方法
- ››flash在有限的页面内制作大的地图
- ››Flash教程:AS代码制作计时器方法
- ››Flash AS教程:propertydata问题解决
- ››FlashFXP v4.0.0 Build 1486 RC2 [烈火汉化]
更多精彩
赞助商链接