Using local style definitions

The <mx:Style> tag contains style sheet definitions that adhere to the CSS 2.0 syntax. These style sheets apply to the current document and all children of the current document. The <mx:Style> tag has the following syntax to define local styles:

<mx:Style>
   selector_name { 
      style_property: value;
      [...]
   }
</mx:Style>

The following example defines a class and a type selector in the <mx:Style> tag:

<mx:Style>
   .myclass { color: Red } /* class selector */
   Button { fontSize: 10pt; color: Yellow } /* type selector */
</mx:Style>

For ActionScript, the naming convention for property names is to use mixed case. For CSS properties, the convention is to use a hyphen. In style definitions, you can use either the ActionScript property name or the CSS property names, as the following example shows:

.myclass { fontStyle: italic } /* Valid property name */
.myclass { font-style: italic } /* Valid property name */
Button { fontSize: 14 } /* Valid property name */
Button { font-size: 14 } /* Valid property name */

However, for the style name itself, you cannot use a hyphenated name, as the following example shows:

.myClass { ... } /* Valid style name */
.my-class { ... } /* Not a valid style name */

Local style definitions support all four color formats, as the following example shows:

<mx:Style>
   .myClass   { color: #6666CC } // Hexadecimal format
   .yourClass { color: rgb(77%,22%,0%) } // RGB format
   .hisClass  { color: rgb(0,255,0) } // 8-bit octet RGB format
   .herClass  { color: Blue } // VGA color name
</mx:Style>

Version 1.5

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000556.htm