Flex 4新的CSS语法

发布时间：2020-12-15 01:35:55 所属栏目：百科来源：网络整理

导读：写在前面今天在Adobe Develop Connection上有一篇关于如何使用Flex 4新的CSS语法的文章，顺便把它翻译过来。这是原文地址http://cookbooks.adobe.com/index.cfm?event=showdetailspostId=15726#ionComHeading。议题 CSS现在提供了高级选择，命名空间等许多

写在前面

今天在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功能十分有限。而现在新的语法会让组件换肤更加容易。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!