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 选择器

派生选择器

  1. 派生选择器
  2. 支持派生的多选择器

在下列代码中,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的更多相关文章

  1. Flash Builder 4.7 注册机完美激活方法

    Flash Builder 4.7 破解注册方法目前较为通用的三种方法: 第一种:三步修改配置文件方法,这种有开发者反应这种方法在升级和创建纯 AS 项目时会存在问题,但我懒的去试这种方法的主要原因是 ...

  2. 使用 Flash Builder 的 Apple iOS 开发过程

    使用 Flash Builder 的 Apple iOS 开发过程   iOS 开发和部署过程概述 构建.调试或部署 iOS 应用程序前的准备工作 在测试.调试或安装 iOS 应用程序时选择的文件 将 ...

  3. 升级Flash Builder 4.6中的Flash Player版本

    测试有效 本人按此方法升级到了flash player 15 Adobe自发布Flash Builder 4.6后,就暂停了Flash Builder新版本的发布.但AIR和FlashPlayer版本 ...

  4. Apache Flex + Adobe Flash Builder环境配置

    在开始学习Flex之前,需要配置开发环境.Apache Flex SDK包含了你开发所需要的东西,当然除了集成开发环境(Integrated Development Environment,IDE). ...

  5. Adobe Flash Builder 4.7 新功能详解

    Adobe Flash Builder 4.7 Beta终于公开测试了.虽然版本号只增加了.1,增强的新功能可是一点也不含糊.我们一起来看看到底有什么新功能吧!   在我看来,最大的改变是终于提供64 ...

  6. Flash Builder 4的快捷方式和调试技巧

    Flash Builder 4的快捷方式和调试技巧 来自于flex开发人员中心:http://www.adobe.com/cn/devnet/flex/articles/flashbuilder_sh ...

  7. [转]升级Flash Builder 4.6中的Flash Player版本

    Adobe自发布Flash Builder 4.6后,就暂停了Flash Builder新版本的发布.但AIR和FlashPlayer版本仍然保持不断的更新.在下载新的AIRSDK并覆盖到Flash ...

  8. Adobe Flash builder破解方法

    Flash Builder 4 有许多新的特性,可以结合新的功能使用新的Flex 4框架创建出更炫的应用.基于用户的反馈,对以数据中心的开发也进行了优化:对类如配置从服务器返回的数据类型这样的任务,也 ...

  9. [转]使用 Xcode 5 和 Interface Builder创建 Hello World App

    转载地址:http://www.ithome.me/archives/581.html 使用 Xcode 5 和 Interface Builder创建 Hello World App 发表回复 当x ...

随机推荐

  1. dom4j解析器 基于dom4j的xpath技术 简单工厂设计模式 分层结构设计思想 SAX解析器 DOM编程

    *1 dom4j解析器   1)CRUD的含义:CreateReadUpdateDelete增删查改   2)XML解析器有二类,分别是DOM和SAX(simple Api for xml).     ...

  2. Git教程(1)官网及官方中文教程

    1,Git官网 http://www.git-scm.com/ 2,官方中文教程 http://git-scm.com/book/zh/v2

  3. WinAPI——Windows 消息

    消息 值  注释  WM_NULL $0000   WM_CREATE $0001   WM_DESTROY $0002   WM_MOVE $0003   WM_SIZE $0005   WM_AC ...

  4. Python爬虫和情感分析简介

    摘要 这篇短文的目的是分享我这几天里从头开始学习Python爬虫技术的经验,并展示对爬取的文本进行情感分析(文本分类)的一些挖掘结果. 不同于其他专注爬虫技术的介绍,这里首先阐述爬取网络数据动机,接着 ...

  5. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  6. Android 多种方式正确的加载图像,有效避免oom

    图像加载的方式: Android开发中消耗内存较多一般都是在图像上面,本文就主要介绍怎样正确的展现图像减少对内存的开销,有效的避免oom现象.首先我们知道我的获取图像的来源一般有三种源头:1.从网络加 ...

  7. CF GYM 100703A Tea-drinking

    题意:龙要制作n个茶,每个茶的配方是一个字符串,两个字符串之间有一个差值,这个差值为两个字符串每个对应字母之间差的绝对值的最大值,求制作所有茶时获得的所有差值中的最大值. 解法:克鲁斯卡尔.将茶的配方 ...

  8. HDU 5266 pog loves szh III

    题意:给出一棵树,1为根节点,求一段区间内所有点的最近公共祖先. 解法:用一棵线段树维护区间LCA.LCA是dp做法.dp[i][j]表示点i的第2^j个祖先是谁,转移方程为dp[i][j] = dp ...

  9. 如何获取android app的Activity

    方法一 如有你有待测项目的源码,那么直接查看源码就好.如果没有,那么请联系有源码的同学,这是推荐方法.   方法二 直接把apk后缀改为zip格式,打开压缩包后再打开AndroidManifest.x ...

  10. 常规页生命周期(class0620)

    常规页声明周期阶段 阶段                   说明 页请求 开始 页初始化 加载 验证 回发事件处理 卸载 生命周期事件 页事件               典型使用