How to use the new CSS syntax in flex 4

CSS now provides many features such as advanced options or namespaces. Let's take a look at how to use them. We will show some methods to select and apply some styles to the components: Using namespace for global selection, using ID selection, inheritance, and status selection.

 

Code

 

In this example, I will use two buttons (one belongs to halo and one from SPARK) and one progressbar CONTAINED IN THE vgroup.

Mxml code

2. <? XML version ="1.0"Encoding ="UTF-8"?>
4. <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">
6. <FX: style source ="Global.css"/>
10. <S: layout>
12. <S: verticallayout/>
14. </S: layout>
18. <Mx: button label ="Click me, I'm a halo button! "Id ="Halobutton"/>
20. <S: button label ="Click me, I'm a spark cool and funky button! "Id ="Sparkbutton"/>
22. <S: vgroup id ="Mybox">
24. <Mx: progressbar/>
26. </S: vgroup>
28. </S: Application>

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

 

Declare namespace

 

 

Mxml code

1. @ Namespace s"Library: // ns.adobe.com/flex/spark";
2. @ Namespace MX"Library: // ns.adobe.com/flex/halo";

 
@ Namespace s "Library: // ns.adobe.com/flex/spark"; @ namespace MX "Library: // ns.adobe.com/flex/halo ";
 

In this way, if I want to apply some styles to a part, I also need to determine the namespace before my selection operator (like this, S | button {styles ...}). If you can ensure that most of your projects use the spark component, you can also set the spark namespace as the default.

 

Java code

1. @ Namespace "Library: // ns.adobe.com/flex/spark";

 
@ Namespace "Library: // ns.adobe.com/flex/spark ";
 

In the example above, you do not need to append the's |.

 

Global Selection

Mxml code

1. MX | button
2. {
3. Color: # ffffff;
4. }
6. S | button
7. {
8. Color :#000000;
9. }

 
MX | button {color: # ffffff;} s | button {color: #000000 ;}
 

Of course, you can still use the class selector by setting the stylename attribute of the component, just like this

Mxml code

1. . Mystyleclass {
3. Color: # ff0000;
5. }

 
. Mystyleclass {color: # ff0000 ;}
 

 

 

Select My ID

 

If I only want to set the base-color of some components, I will use the ID selector.

Mxml code

1. # Halobutton
2. {
3. Base-color: # 0000ff;
4. }
6. # Sparkbutton
7. {
8. Base-color: # ffffff;
9. }

 
# Halobutton {base-color: # 0000ff ;}# sparkbutton {base-color: # ffffff ;}
 

 

 

 

 

Inheritance Selection

Set the progressbar font in the vgroup to red.

Java code

1. S | vgroup # mybox MX | progressbar
2. {
3. Color: # ff0000;
4. }

 
S | vgroup # mybox MX | progressbar {color: # ff0000 ;}
 

 

 

Select status

I think when the tag of my spark button is pressed by the user (the button state is 'low'), the font turns green.

Mxml code

1. S | vgroup # mybox MX | progressbar
2. {
3. Color: # ff0000;
4. }

S | vgroup # mybox MX | progressbar {color: # ff0000 ;}
 

 

 

 

Summary

There are a lot of unreasonable implementations of previous CSS functions, and if you have developed html/CSS before using Flex, it will make you quite frustrated.

Now with the new syntax, it is much easier to customize components.