如何使用Flex 4新的CSS语法,兼容halo组件

简介:

兼容halo组件,在css里把原来的Button.Ready改为 #btn_ready即可
前台

文章来源:http://www.colorhook.com/blog/?p=497

如何使用Flex 4新的CSS语法
ColorHook 发表评论 阅读评论
写在前面

今天在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"?>
命名空间声明

@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功能十分有限。而现在新的语法会让组件换肤更加容易。
本文转自jiahuafu博客园博客,原文链接http://www.cnblogs.com/jiahuafu/archive/2010/06/17/1759541.html如需转载请自行联系原作者

jiahuafu

相关文章
|
2月前
|
前端开发 JavaScript
|
5月前
|
前端开发
css的语法
【4月更文挑战第12天】css的语法
31 2
|
3月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
3月前
|
前端开发
CSS全部标签属性重置语法
每个浏览器默认的属性不同,像谷歌浏览器不设置的话,默认每个元素是有外边距margin的,有的浏览器列表还会带上序号,有的浏览器就没有。
38 6
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
循序渐进BootstrapVue,开发公司门户网站(2)--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果
|
3月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
108 2
|
3月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
40 1
|
3月前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
100 0
|
3月前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
28 0
|
3月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
29 0