How to use the new CSS syntax in Flex 4

[转] http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html

How to use the new CSS syntax in Flex 4

Problem

CSS now provides a lot of features such as advanced selection or namespaces. Let's see how to use it.

Solution

We'll show a few ways to select and apply styles to a component: global selection by namespace, selection by ID, Descendant selection and States selection.

Detailed explanation

My application

For this example, I'll use two Buttons (one from Halo, one from spark) and a progressBar contained in a VGroup container:

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

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

This way, if I want to apply some styles to a component, I'll have to specify the namespace before my selector (for example, s|Button { styles... }). If you're sure your project will mostly use Spark components, you can set the Spark namespace as default:

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

Then, with the previous example, you won't need to specify the "s|" anymore.

Global selection

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

Of course, it's still possible to use the class selection by setting a stylename attribute to a component, then use the following syntax:

.myStyleClass 
   {
   color:#ff0000;
   }

Selection my ID

I want only specifics components to be base-colored, so I'll use the selection by id syntax:

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

Descendant selection

I want the text of my progressbar contained in my VGroup to be colored in red:

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

States selection

I want my spark Buttons' label to be colored in green when the user clicks on it (which means when my button's current state is "down"):

s|Button:down
   {
   color:#33CC33;
   }

Conclusion

The previous CSS functionalities were such jokes and really frustrating if, before using Flex, you were developing HTML/CSS websites. With this new syntax, it'll be much easier to skin components.