by Romain Pouclet on August 31, 2009
Edited by: Ed Sullivan on September 9, 2009
CSS现在提供了许多诸如高级选择或是命名空间的特性,让我们来看看如何使用。我们会展示一些方法来选择和应用一些样式到部件上:使用namespace的全局选择,使用ID的选择,继承和状态的选择。
代码
在这个例子里,我会用到两个Button(一个属于Halo 一个来自Spark)和一个包含在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";
像这样,如果我想应用某些style到一个部件上,我还要必须在我的选择符前边确定命名空间(就象这样 ,s|Button { styles... })。如果你能保证你的项目大部分都会使用Spark组件,你也可以将Spark命名空间设为默认。
@namespace "library://ns.adobe.com/flex/spark";
之后,在前边的例子里,你就不需要再附加上's|'了。
全局选择
mx|Button
{
color:#ffffff;
}
s|Button
{
color:#000000;
}
当然,你依然可以以设置组件的stylename属性的方式来使用类选择符,就像这样
.myStyleClass {
color:#ff0000;
}
选择我的ID
若我只是想设置某些组件的base-color,我会用到ID选择符
#haloButton
{
base-color:#0000ff;
}
#sparkButton
{
base-color:#ffffff;
}
继承选择
我想要包含在VGroup里的progressbar字体设置为红色
s|VGroup#myBox mx|ProgressBar
{
color:#ff0000;
}
状态选择
我想我的spark按钮的标签在被用户按下的时候(button的state为'down')字体变为绿色
s|VGroup#myBox mx|ProgressBar
{
color:#ff0000;
}
总结
以前的CSS功能实现有许多不合理的地方,而且如果你在使用Flex之前开发过HTML/CSS会让你相当沮丧。
现在有了新的语法,定制组件将变得容易许多。
分享到:
相关推荐
CSS现在提供了许多诸如高级选择或是命名空间的特性,让我们来看看如何使用。我们会展示一些方法来选择和应用一些样式到部件上:使用namespace的全局选择,使用ID的选择,继承和状态的选择。
Flex布局基本语法,各属性及其取值树状图整理
flex4很多种之前学习收集的各种文档(Adobe - Flex 快速入门基础 Flex 组件的定位和布局,Flex+Css完全手册,...CSS手册,Flex4权威指南-学习笔记,flex4之语法入门,Flex_LineChart三部曲,flex中RemoteObject与java的通信)
5.3 FlexBuilder3中的新内容 5.3.1 新向导 5.3.2 设训,模式的增强 5.3.3 开发功能的增强 5.3.4 CS3套件的整合 5.4 本章小结 第Ⅱ部分 使用FIex3开发应用程序 第6章 使用FIexBuilder3 6.1 ...
3.0语法、Flex组件开发、CSS布局、美化界面、数据传输与交互、AIR平台应用和开发框架Cairngorm等。为了便于读者学习,本书最后两章分别对两个较综合的实例进行分析。详细讲解了Cairngorm开发框架的搭建、组件设计、...
</div>DEMO特点专注于 HTML 属性 -- 独立的布局标记,语义化和简洁的语法不仅是栅格(网格) -- 比例之间的关联,基于比例的元素尺寸快速制作原型 -- 在浏览器中进行设计以及快速迭代,不再需要为布局编写 CSS基础...
3.1 flex-direction属性 3.4 justify-content属性 3.6 align-content属性
scss-flex flexbox,移动端flex布局神器,兼容微信,UC,webview等移动端主流浏览器,可以通过bower和npm下载参考使用SASS语法编写,使用gulp前端打包工具进行打包针对flexbox布局方式的详细介绍:下载git clone ...
FlexLayout为高度优化的 flexbox实现添加了一个不错的Swift界面。 简洁,直观和可链接的语法。 Flexbox是对UIStackView的不可思议... 可以使用FlexLayout和/或PinLayout布局视图! PinLayout可以布局任何内容,但是在
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
Angular模块,用于在基于挠曲的砌体布局中显示项目,而没有任何第三方依赖性。 网格布局仅使用css flexbox功能。 与众所周知的砌体布局一样,此模块中无需绝对定位。 使用简单的转换语法(translateY位置)计算距离...
在Flash中使用ContainerMovieClip创建Flex容器 21.3节.导入FlashCS3的组件 21.4节.认识Cairngorm小型结构 21.5节.创建Cairngorm视图、事件和模型 21.6节.创建Cairngorm命令和事务代理类 21.7节.创建...
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
简单API基于 ,无需学习新语法。 使用自定义生成的组件样式 根据响应断点轻松更改网格设置 安装 yarn add react - flexa 用法 基本用法 import React from 'react' ; import { Row , Col } from 'react-flexa' ; ...
之所以存在兼容性问题,是因为技术在不断的更新,有些旧的浏览器只支持旧语法的书写方式,所以就出现所谓的兼容性问题。 what? 那么新旧版本是什么? flex布局分为旧版本dispaly: box;,过渡版本dispaly: flex box;...
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】...
它使用起来更简单,很多FlexLayout为高度优化的Yoga flexbox实现添加了漂亮的Swift界面。 简洁,直观和可链接的语法。 Flexbox是对UIStackView的不可思议的改进。 它使用更简单,用途更广且性能惊人。 Yoga是一个多...
SCSS大师班(S)CSS布局大师班:Flexbox和网格Flexbox: 弹性方向 柔性包装 证明内容 对齐项目 对齐内容 订购 弹性成长 弯曲收缩 弹性基础 自我调整格: 网格模板列 网格模板行 网格模板区域 网格模板 网格列间隙 ...
5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM 4.综合练习 16表格的增删改查 17移动端适配 18Flex弹性布局