Flash Builder 创建CSS
1.global 选择器将样式应用于所有控件
在 Flash Builder 中创建新MXML 文件并切换到设计模式
属性视图右侧的外观视图可更改外观
Flash Builder 自动创建CSS 文件
CSS 文件有2 个命名空间:
§ s 指 Spark 组件
§ mx 指 MX 组件
1. Global 与Application 选择器
global {color: #009900; fontSize: 12; }
Application 选择器 § 应用程序容器是Flex 应用程序中最上面的容器
§ 应用于 Application 容器的所有样式也都应用于其所有子容器和子类
§ 所有 Spark 样式都是可继承的
§ 任何 Spark 样式都可以使用Application 选择器来应用
§ 一些 MX 样式是不可继承的
§ 使用 Application 选择器应用可继承的MX 样式
s|Application {color: #FFFF00; fontWeight: bold; fontFamily: Arial; fontSize: 22; }
mx|Application {color: #FF0000; fontWeight: bold; fontFamily: Verdana; fontSize: 18; }2.定义组件的外观和样式
CSS 在styleName 属性中支持多个类选择器类选择器列表使用空格分隔
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button.redText {color:#FF0000; }
s|Button.fontType {font-family:"Courier"; }
<s:Button label="Send Email" styleName="redText fontType"/>
3.自定义组件选择器
CSS 支持自定义命名空间(其中com.mycompany为自定义组件的包路径)
@namespace comp "com.mycompany.*";
通过 CSS 应用组件外观
mx|Menu {
skin: ClassReference(null);/*把預設skin設為null*/
skinClass:ClassReference("com.MenuStyle"); }
package com
{
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.filters.DropShadowFilter;
import flash.geom.Matrix;
import mx.skins.halo.HaloBorder;
public class MenuStyle extends HaloBorder
{
public function MenuStyle()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
var dropShadow:DropShadowFilter = new DropShadowFilter();
dropShadow.color=0x000000; //设置投影
dropShadow.alpha=0.25; //阴影颜色的 Alpha 透明度值。
dropShadow.blurX=0; //水平模糊量。
dropShadow.blurY=10; //重置模糊量
dropShadow.angle=90; //阴影的角度。
dropShadow.distance=4; //阴影的偏移距离,以像素为单位。
filters=[dropShadow];
var w:Number = this.width;
var h:Number = this.height;
var fillType:String = GradientType.LINEAR; //渐变类型--直线
var color:Array = [0xE2E2E3,0xFFFFFF]; //渐变颜色
var alphas:Array = [80,100]; //colors 数组中对应颜色的 alpha 值数组
var ratios:Array = [0xE2, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(22,22,0,0,0);
var spreadMethod:String = SpreadMethod.PAD;
graphics.beginGradientFill(fillType,color,alphas,ratios,matr,spreadMethod);
graphics.drawRect(0,0,w,h);
graphics.endFill();
}
}
}
高级CSS 选择器
派生选择器
- 派生选择器
- 支持派生的多选择器
在下列代码中,color 属性将仅影响Panel 容器中的 Button 控件
Panel Button { color: #CCCCCC; }
在下列代码中,fontSize 属性将仅影响ViewStack 容器(位于Panel 容器中)中的Label 控件
Panel ViewStack Label { fontSize: 12; }
id 选择器
CSS id 选择器匹配满足一种id 条件的组件
id 选择器与组件的具体实例绑定
声明 id 条件的 CSS 语法使用# 作为 id 的前缀
#submitButton { color: #CCCCCC; }
通过在特定组件上设置id 属性满足 id 条件
<s:Button id="submitButton" />
不可以将id选择器与其他选择器组合使用
Panel Button#submitButton { color: #999999; }
具有id选择器的id
Button#submitButton { color: #999999; }
类选择器
类选择器定义样式(或类)集,可将它们应用于任何组件
在 CSS 中,首先创建类选择器并定义其样式
.header { color: #CCCCCC; }
然后使用styleName 属性应用样式,无需对MXML 组件使用前导点
<s:Panel styleName="header"> <s:Label text="Employee Information" /> </s:Panel>
类选择器可与组件选择器组合使用
s|Panel.header { color: #FF0000; }
类选择器可应用于多个组件
伪选择器
CSS 伪选择器根据其它条件匹配组件
条件可以是动态的
条件可能不能被文档树定义
只有在指定的状态中,才能使用伪选择器将样式应用于组件
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button:up { color: #FFFFFF; chromeColor: #555555; }
可以定义通用的伪选择器
:up { color:#FF9933; }
s|Button:up { color: #FFFFFF; chromeColor: #555555; }
s|Button:over { color: #000000; chromeColor: #D9E028; }
s|Button:down { color:white; chromeColor: black; }
Flash Builder 创建CSS的更多相关文章
- Flash Builder 4.7 注册机完美激活方法
Flash Builder 4.7 破解注册方法目前较为通用的三种方法: 第一种:三步修改配置文件方法,这种有开发者反应这种方法在升级和创建纯 AS 项目时会存在问题,但我懒的去试这种方法的主要原因是 ...
- 使用 Flash Builder 的 Apple iOS 开发过程
使用 Flash Builder 的 Apple iOS 开发过程 iOS 开发和部署过程概述 构建.调试或部署 iOS 应用程序前的准备工作 在测试.调试或安装 iOS 应用程序时选择的文件 将 ...
- 升级Flash Builder 4.6中的Flash Player版本
测试有效 本人按此方法升级到了flash player 15 Adobe自发布Flash Builder 4.6后,就暂停了Flash Builder新版本的发布.但AIR和FlashPlayer版本 ...
- Apache Flex + Adobe Flash Builder环境配置
在开始学习Flex之前,需要配置开发环境.Apache Flex SDK包含了你开发所需要的东西,当然除了集成开发环境(Integrated Development Environment,IDE). ...
- Adobe Flash Builder 4.7 新功能详解
Adobe Flash Builder 4.7 Beta终于公开测试了.虽然版本号只增加了.1,增强的新功能可是一点也不含糊.我们一起来看看到底有什么新功能吧! 在我看来,最大的改变是终于提供64 ...
- Flash Builder 4的快捷方式和调试技巧
Flash Builder 4的快捷方式和调试技巧 来自于flex开发人员中心:http://www.adobe.com/cn/devnet/flex/articles/flashbuilder_sh ...
- [转]升级Flash Builder 4.6中的Flash Player版本
Adobe自发布Flash Builder 4.6后,就暂停了Flash Builder新版本的发布.但AIR和FlashPlayer版本仍然保持不断的更新.在下载新的AIRSDK并覆盖到Flash ...
- Adobe Flash builder破解方法
Flash Builder 4 有许多新的特性,可以结合新的功能使用新的Flex 4框架创建出更炫的应用.基于用户的反馈,对以数据中心的开发也进行了优化:对类如配置从服务器返回的数据类型这样的任务,也 ...
- [转]使用 Xcode 5 和 Interface Builder创建 Hello World App
转载地址:http://www.ithome.me/archives/581.html 使用 Xcode 5 和 Interface Builder创建 Hello World App 发表回复 当x ...
随机推荐
- wsse:InvalidSecurity Error When Testing FND_PROFILE Web Service in Oracle Applications R 12.1.2 from SOAP UI (Doc ID 1314946.1)
wsse:InvalidSecurity Error When Testing FND_PROFILE Web Service in Oracle Applications R 12.1.2 from ...
- MAX-HEAPIFY(2/3n的疑惑)
Q: In CLRS, third Edition, on page 155, it is given that in MAX-HEAPIFY, The children’s subtrees eac ...
- 中国海洋大学第四届朗讯杯高级组 A 2718 Rocky(模拟)
题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2718 题意:优先直走,右 左 后.... ...
- mysql 共享锁-排它锁
转 InnoDB 行级锁 http://www.cnblogs.com/dongqingswt/archive/2013/03/28/2987367.html InnoDB 行级锁 分类: 数据库2 ...
- [转]jBoss事务控制
转自:http://blog.csdn.net/trendgrucee/article/details/8545512 一.基础知识 1.JTA,即Java Transaction API,译为J ...
- poj1062
经典的图论建模题: 先拿开的等级问题不看: 每个物品本身的价格就是有一个自定义源点到这个点距离: 有了A物品B物品优惠为W就代表由B到A的有向路权值为W: 最后的最小花费就是源点的点1的最短路径(酋长 ...
- HAOI2007 理想的正方形
1047: [HAOI2007]理想的正方形 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1402 Solved: 738[Submit][Sta ...
- vijos1049送给圣诞夜的礼品
这题犯了两个sb错误,写下来,为以后做个警告 一.mul过程中将k作为了循环变量 二.看错了题…… 题目中说是数到k行,而我却以为数k遍…… 做矩阵乘法,只要记住一句话:置换一定可以写成矩阵的形式! ...
- oracle 字段上下两条记录的相减
SELECT T.ID ,BALANCE,nvl(lag (BALANCE,1) over (order by T.ID ) ,0) FROM AN T ORDER BY T.ID [转]orac ...
- word2010中莫名出现灰色中括号解决方案
灰色中括号[]是文中书签,解决方案: word 文件-选项-高级,在“显示文档内容”部分,去掉“显示书签”前面的勾选.