如何在Flex 4 中使用新的CSS语法

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

导读：如何在Flex 4 中使用新的CSS语法文章分类:Flash编程 by Romain Pouclet on August 31,2009 Edited by: Ed Sullivan on September 9,2009 ? ? CSS现在提供了许多诸如高级选择或是命名空间的特性，让我们来看看如何使用。我们会展示一些方法来选择和应用一些

如何在Flex 4 中使用新的CSS语法

文章分类:Flash编程

by Romain Pouclet on August 31,2009
Edited by: Ed Sullivan on September 9,2009

CSS现在提供了许多诸如高级选择或是命名空间的特性，让我们来看看如何使用。我们会展示一些方法来选择和应用一些样式到部件上:使用namespace的全局选择，使用ID的选择，继承和状态的选择。

代码

在这个例子里，我会用到两个Button(一个属于Halo 一个来自Spark)和一个包含在VGroup里的progressBar

Mxml代码 ?

收藏代码

<?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>??

申明命名空间

Mxml代码 ?

收藏代码

@namespace?s? "library://ns.adobe.com/flex/spark" ;??
@namespace?mx?"library://ns.adobe.com/flex/halo" ;??

?像这样，如果我想应用某些style到一个部件上，我还要必须在我的选择符前边确定命名空间(就象这样,s|Button { styles... })。如果你能保证你的项目大部分都会使用Spark组件，你也可以将Spark命名空间设为默认。

Java代码 ?

收藏代码

@namespace ? "library://ns.adobe.com/flex/spark" ;??

?之后，在前边的例子里，你就不需要再附加上's|'了。

?全局选择

Mxml代码 ?

收藏代码

mx|Button??
{??
??color:#ffffff;??
}??
??
s|Button???
{??
??color:#000000 ;??
}??

?当然，你依然可以以设置组件的stylename属性的方式来使用类选择符，就像这样

Mxml代码 ?

收藏代码

.myStyleClass?{??
??
color:#ff0000;??
??
}??

选择我的ID

若我只是想设置某些组件的base-color，我会用到ID选择符

Mxml代码 ?

收藏代码

#haloButton???
{??
??base-color:#0000ff;??
}??
??
#sparkButton??
{??
??base-color:#ffffff;??
}??

继承选择

我想要包含在VGroup里的progressbar字体设置为红色

Java代码 ?

收藏代码

s|VGroup#myBox?mx|ProgressBar??
{??
??color:#ff0000;??
}??

状态选择

我想我的spark按钮的标签在被用户按下的时候(button的state为'down')字体变为绿色

Mxml代码 ?

收藏代码

s|button:down
{??
??color:#ff0000;??
}??

总结

以前的CSS功能实现有许多不合理的地方，而且如果你在使用Flex之前开发过HTML/CSS会让你相当沮丧。

现在有了新的语法，定制组件将变得容易许多。

（编辑：李大同）

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