- 浏览: 98818 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
chensong215:
无法获取到ProgressEvent中的bytesTotal
自定义DownloadProgressBar -
qq2464785999:
非常感谢。
测试后,发现要用相对路径的话,好像要这么写
va ...
Flex写XML文件
Flex 4新的CSS语法
1人收藏此文章, 我要收藏
发表于1年前 , 已有548次阅读 共0个评论
写在前面
今天在Adobe Develop Connection上有一篇关于如何使用Flex 4新的CSS语法的文章,顺便把它翻译过来。这是原文地址http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=15726#ionComHeading。
议题
CSS现在提供了高级选择,命名空间等许多特征,让我们看看如何使用它。
解决方案
我们在这里展示几个应用样式的方式:跟随命名空间的全局选择,ID选择,派生选择和状态选择。
详细介绍
我的应用
这个例子中,我使用了2个Button(1个是Halo主题,1个是spark主题)和1个在VGroup中的ProgressBar:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"> <fx:Style source="global.css" /> <s:layout> <s:VerticalLayout /> </s:layout> <mx:Button label="Click me, I'm a Halo button!" id="haloButton" /> <s:Button label="Click me, I'm a spark cool and funky button !" id="sparkButton" /> <s:VGroup id="myBox"> <mx:ProgressBar /> </s:VGroup> </s:Application>
命名空间声明
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
在这种情况下,如果我要为1个组件应用样式,我必须在选择子前面声明命名空间(例如,s|Button{style…})。如果你确定你的项目中基本上都是使用Spark组件,可以把Spark命名空间做为默认命名空间:
@namespace "library://ns.adobe.com/flex/spark";
这样,对于前一个例子,你就不需要额外声明”s|”
全局选择
mx|Button{ color:#ffffff; } s|Button { color:#000000; }
当然,也可以为组件声明一个stylename属性然后使用类选择器,语法如下:
.myStyleClass { color:#ff0000; }
ID选择
我只想特定的组件改变基础色,于是我用ID的方式来选择:
#haloButton { base-color:#0000ff; } #sparkButton{ base-color:#ffffff; }
派生选择
我想要VGroup中的ProgressBar的文字显示红色
s|VGroup#myBox mx|ProgressBar{ color:#ff0000; }
状态选择
我想要我的Spark Buttons的label在用户点击的时候(这是当前状态时”down”)显示绿色。
s|Button:down{ color:#33CC33; }
结论
假如在开发Flex之前,你有HTML/CSS的经验,那就知道以前的CSS功能十分有限。而现在新的语法会让组件换肤更加容易。
1人收藏此文章, 我要收藏
发表于1年前 , 已有548次阅读 共0个评论
写在前面
今天在Adobe Develop Connection上有一篇关于如何使用Flex 4新的CSS语法的文章,顺便把它翻译过来。这是原文地址http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=15726#ionComHeading。
议题
CSS现在提供了高级选择,命名空间等许多特征,让我们看看如何使用它。
解决方案
我们在这里展示几个应用样式的方式:跟随命名空间的全局选择,ID选择,派生选择和状态选择。
详细介绍
我的应用
这个例子中,我使用了2个Button(1个是Halo主题,1个是spark主题)和1个在VGroup中的ProgressBar:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"> <fx:Style source="global.css" /> <s:layout> <s:VerticalLayout /> </s:layout> <mx:Button label="Click me, I'm a Halo button!" id="haloButton" /> <s:Button label="Click me, I'm a spark cool and funky button !" id="sparkButton" /> <s:VGroup id="myBox"> <mx:ProgressBar /> </s:VGroup> </s:Application>
命名空间声明
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
在这种情况下,如果我要为1个组件应用样式,我必须在选择子前面声明命名空间(例如,s|Button{style…})。如果你确定你的项目中基本上都是使用Spark组件,可以把Spark命名空间做为默认命名空间:
@namespace "library://ns.adobe.com/flex/spark";
这样,对于前一个例子,你就不需要额外声明”s|”
全局选择
mx|Button{ color:#ffffff; } s|Button { color:#000000; }
当然,也可以为组件声明一个stylename属性然后使用类选择器,语法如下:
.myStyleClass { color:#ff0000; }
ID选择
我只想特定的组件改变基础色,于是我用ID的方式来选择:
#haloButton { base-color:#0000ff; } #sparkButton{ base-color:#ffffff; }
派生选择
我想要VGroup中的ProgressBar的文字显示红色
s|VGroup#myBox mx|ProgressBar{ color:#ff0000; }
状态选择
我想要我的Spark Buttons的label在用户点击的时候(这是当前状态时”down”)显示绿色。
s|Button:down{ color:#33CC33; }
结论
假如在开发Flex之前,你有HTML/CSS的经验,那就知道以前的CSS功能十分有限。而现在新的语法会让组件换肤更加容易。
发表评论
-
flex 自定义多个命名空间以及标签名
2013-01-22 15:21 1285flex 自定义多个命名空 ... -
FLEX中使用AS动态创建DataGrid
2013-01-09 16:24 894FLEX中使用AS动态创建DataGrid 2010年2月6日 ... -
flex与flash之间相互调用
2012-12-12 12:39 615http://www.cnblogs.com/kaixuan/ ... -
Flex与Flex创建的swf通信
2012-12-12 10:16 716加载子SWF的Flex程序代码 <?xml vers ... -
[AS3]加载视频(FLV)文件
2012-12-06 15:11 854[AS3]加载视频(FLV)文件 分类: FLEX/CS3-- ... -
通过FileReference打开本地图片崩溃的解决方法
2012-12-06 14:02 711通过FileReference打开本地图片崩溃的解决方法 最近 ... -
使用FileReference的load()方法加载本地图片
2012-12-06 13:56 9101、要想使用FileReference的load()方法和da ... -
[AS3]Bitmap序列化(将BitmapData保存为原生Binary/ByteArray)
2012-12-06 13:48 755[AS3]Bitmap序列化(将BitmapData保存为原生 ... -
as3 画五角星算法
2012-12-05 16:49 2606as3 画五角星算法 阅读:10次 时间:2012-03- ... -
flex嵌入完整html
2012-11-29 11:18 807有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTM ... -
flex4 textArea的htmlText属性
2012-11-29 11:13 3104它现在包含Text布局框架(Text Layout Frame ... -
Tooltip应用
2012-11-29 11:11 715创建ToolTip: var errorToolTip:To ... -
数据绑定显示问题
2012-10-27 12:11 645数据绑定实时变化。 XMLListCollection 可以变 ... -
待解决问题
2012-09-18 23:48 7011.仪表盘 2.渐变填充的使用 3.发光效果的完美运用 能在一 ... -
as3加载外部图片的两种方式
2012-09-09 11:46 1001package net.burchin.loading { ... -
公式as3
2012-09-06 18:13 0as3 1人收藏此文章, 我要收藏 发表于1年前(2011-0 ... -
Flex中多线程的实现
2012-09-06 10:49 3481破阵子_如是我闻 如是我闻。一时佛在舍卫国,祗树给孤独园.. ... -
自定义column renderer
2012-08-09 15:07 916<?xml version="1.0" ... -
drowshadowFilter
2012-08-09 15:05 655DropShadowFilter 类,在Flash中为各种对象 ... -
123123
2012-08-08 17:16 0http://www.oschina.net/code/sni ...
相关推荐
CSS现在提供了许多诸如高级选择或是命名空间的特性,让我们来看看如何使用。我们会展示一些方法来选择和应用一些样式到部件上:使用namespace的全局选择,使用ID的选择,继承和状态的选择。
Flex布局基本语法,各属性及其取值树状图整理
flex4很多种之前学习收集的各种文档(Adobe - Flex 快速入门基础 Flex 组件的定位和布局,Flex+Css完全手册,...CSS手册,Flex4权威指南-学习笔记,flex4之语法入门,Flex_LineChart三部曲,flex中RemoteObject与java的通信)
3.1 flex-direction属性 3.4 justify-content属性 3.6 align-content属性
3.0语法、Flex组件开发、CSS布局、美化界面、数据传输与交互、AIR平台应用和开发框架Cairngorm等。为了便于读者学习,本书最后两章分别对两个较综合的实例进行分析。详细讲解了Cairngorm开发框架的搭建、组件设计、...
5.3 FlexBuilder3中的新内容 5.3.1 新向导 5.3.2 设训,模式的增强 5.3.3 开发功能的增强 5.3.4 CS3套件的整合 5.4 本章小结 第Ⅱ部分 使用FIex3开发应用程序 第6章 使用FIexBuilder3 6.1 ...
Flex-layout-attributeFlex-layout-attribute 是基于 CSS flexbox 规范的 HTML 布局助手。示例内容分布在一行里并在容器居中: layout="row center-center"> <div>1 <div>2 <div>3 </div>DEMO特点专注于 ...
FlexLayout为高度优化的 flexbox实现添加了一个不错的Swift界面。 简洁,直观和可链接的语法。 Flexbox是对UIStackView的不可思议的改进。 它使用更简单,用途更广且性能惊人。 Yoga是一个多平台CSS Flexbox实现...
CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性。flex布局提供一种更加有效的方式来...
【05】Flex伸缩布局 【06】移动web开发 【07】 JavaScript 基础语法 【08】WebAPI编程 【09】jQuery快速开发 【10】JavaScript高级(含ES6) 【11】前后端交互 Node+Gulp 【12】前后端交互 MongoDB+Express 【13】...
之所以存在兼容性问题,是因为技术在不断的更新,有些旧的浏览器只支持旧语法的书写方式,所以就出现所谓的兼容性问题。 what? 那么新旧版本是什么? flex布局分为旧版本dispaly: box;,过渡版本dispaly: flex box;...
简单API基于 ,无需学习新语法。 使用自定义生成的组件样式 根据响应断点轻松更改网格设置 安装 yarn add react - flexa 用法 基本用法 import React from 'react' ; import { Row , Col } from 'react-flexa' ; ...
2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色...
scss-flex flexbox,移动端flex布局神器,兼容微信,UC,webview等移动端主流浏览器,可以通过bower和npm下载参考使用SASS语法编写,使用gulp前端打包工具进行打包针对flexbox布局方式的详细介绍:下载git clone ...
SCSS大师班(S)CSS布局大师班:Flexbox和网格Flexbox: 弹性方向 柔性包装 证明内容 对齐项目 对齐内容 订购 弹性成长 弯曲收缩 弹性基础 自我调整格: 网格模板列 网格模板行 网格模板区域 网格模板 网格列间隙 ...
FlexLayout为高度优化...Yoga是一个多平台CSS Flexbox实现(iOS / Android / ...)。 Yoga也是React Native的布局引擎。 要求iOS 8.0+ Xcode 8.0+ / Xcode 9.0+ Swift 3.0+ / Swift 4.0 Content简介示例FlexLayout原理
0 前端三件套 HTML CSS JavaScript ...1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS...16表格的增删改查 17移动端适配 18Flex弹性布局
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇,之前一篇以及为大家引入了CSS3...box-flex属性的基本语法: box-flex: 取值说明: 属性值是一个整数或者小数。当盒子中包含多个定义了box-flex属性的子元素时,浏览
在css上使用flex的语法 display: flex; /*按照需求加入各浏览器需求前缀*/ flex-direction(适用于父类容器元素) flex-direction:row; a b c flex-direction:row-reverse; a b c flex-direction:column; a ...