Flex4 CSS Application

In the new spark component of flex4, there is no background attribute, and the style and theme are replaced.

For example

Inputtext. setstyle ("contentbackgroundcolor", 0xff0000 );

 

Set the background of textinput to red.

You can also use CSS to set the style of these components. This contentbackgroundcolor only takes effect for the spark component textinput.

<FX: style> <br/> @ namespace s "Library: // ns.adobe.com/flex/spark"; </P> <p> S | textinput {<br/> contentbackgroundcolor: # ffff99; <br/>}< br/> </FX: style>

 

To select multiple CSS styles, add the CSS name to the stylename of the control and apply them in the order of appearance.

<FX: style> </P> <p>. myfontstyle {</P> <p> fontsize: 22; </P> <p >}</P> <p>. mytherfontstyle {</P> <p> color: # 9933ff; </P> <p >}< br/> </FX> <br/> <s: button id = "mybutton" stylename = "myfontstyle myotherfontstyle" label = "Click me"/>

 

You can select a style based on the Space ID,

S | button # button3 {color: Blue ;}

<S: button id = "button3" label = "click"/>

 

 

Apply CSS styles globally. In Flex, a style named Global is applied to all controls unless explicitly specified by the control. You can also use

Stylemanager to set the global style.

<FX: style> <br/> global {<br/> fontsize: 22; <br/> textdecoration: underline; <br/>}< br/> </FX: style> </P> <p> stylemanager. getstyledeclaration ("Global "). setstyle ("fontsize", 22); <br/> stylemanager. getstyledeclaration ("Global "). setstyle ("textdecoration", "underline"); <br/> stylemanager. getstyledeclaration ("spark. components. button "). setstyle ("fontsize", 15); <br/> stylemanager. getstyledeclaration ("spark. components. button "). setstyle ("color", 0x9933ff );

 

Refer:

Http://www.dremsus.com/index.php/tag/getstyle/

Http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fee.html