无痕客

落花无情,流水无痕……

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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

 

代码

 

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

Mxml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <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">   
  3.   <fx:Style source="global.css" />   
  4.      
  5.   <s:layout>   
  6.     <s:VerticalLayout />   
  7.   </s:layout>   
  8.      
  9.       <mx:Button label="Click me, I'm a Halo button !" id="haloButton" />   
  10.       <s:Button label="Click me, I'm a spark cool and funky button !" id="sparkButton" />   
  11.   <s:VGroup id="myBox">   
  12.     <mx:ProgressBar />   
  13.   </s:VGroup>   
  14. </s:Application>  

 

申明命名空间

 

 

Mxml代码 复制代码
  1. @namespace s "library://ns.adobe.com/flex/spark";   
  2. @namespace mx "library://ns.adobe.com/flex/halo";  

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

 

Java代码 复制代码
  1. @namespace "library://ns.adobe.com/flex/spark";  

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

 

 全局选择

Mxml代码 复制代码
  1. mx|Button   
  2. {   
  3.   color:#ffffff;   
  4. }   
  5.   
  6. s|Button    
  7. {   
  8.   color:#000000;   
  9. }  

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

Mxml代码 复制代码
  1. .myStyleClass {   
  2.   
  3. color:#ff0000;   
  4.   
  5. }  

 

 

选择我的ID

 

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

Mxml代码 复制代码
  1. #haloButton    
  2. {   
  3.   base-color:#0000ff;   
  4. }   
  5.   
  6. #sparkButton   
  7. {   
  8.   base-color:#ffffff;   
  9. }  

 

 

 

 

继承选择

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

Java代码 复制代码
  1. s|VGroup#myBox mx|ProgressBar   
  2. {   
  3.   color:#ff0000;   
  4. }  

 

 

状态选择

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

Mxml代码 复制代码
  1. s|VGroup#myBox mx|ProgressBar   
  2. {   
  3.   color:#ff0000;   
  4. }  

 

 

 

总结

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

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

posted on 2009-11-02 19:53  无痕客  阅读(2815)  评论(0编辑  收藏  举报