| Flex 2 Developer's Guide > Customizing the User Interface > Using Styles and Themes > About styles > Using Cascading Style Sheets | |||
|
|||
|
|||
|
|||
Cascading Style Sheets (CSS) are a standard mechanism for declaring text styles in HTML and most scripting languages. A style sheet is a collection of formatting rules for types of components or classes that include sets of components. Flex supports the use of CSS syntax and styles to apply styles to Flex components.
In CSS syntax, each declaration associates a style name, or selector, with one or more style properties and their values. You define multiple style properties in each selector by separating each property with a semicolon. For example, the following style defines a selector named myFontStyle:
<?xml version="1.0"?>
<!-- styles/ClassSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myFontStyle {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
</mx:Application>
In this example, myFontStyle defines a new class of styles, so it is called a class selector. In the markup, you can explicitly apply the myFontStyle style to a control or class of controls.
A type selector implicitly applies itself to all components of a particular type, as well as all subclasses of that type.
The following example defines a type selector named Button:
<?xml version="1.0"?>
<!-- styles/TypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Button id="myButton" label="Click Here"/>
</mx:Application>
Flex applies this style to all Button controls, and all subclasses of Button controls. If you define a type selector on a container, that style applies to all children of that container if the style is an inheriting style.
When determining styles for a new component instance, Flex examines all the parent classes looking for type selectors. Flex applies settings in all type selectors, not just the exact match. For example, suppose that class MyButton extends Button. For an instance of MyButton, Flex first checks for a MyButton type selector. Flex applies styles in the MyButton type selector, and then checks for a Button type selector. Flex applies styles in the Button selector, and then checks for a UIComponent type selector. Flex stops at UIComponent. Flex does not continue up the parent chain past UIComponent because Flex does not support type selectors for Sprite (the parent of UIComponent) or any of Sprite's parent classes, up to the base Object class.
|
NOTE |
|
The names of class selectors cannot include hyphens in Flex. If you use a hyphenated class selector name, such as my-class-selector, Flex ignores the style. |
You can programmatically define new class and type selectors using the StyleManager class. For more information, see Using the StyleManager class.
When applying style properties with CSS in a <mx:Style> block or in an external style sheet, the best practice is to use camel-case for the style property, as in fontWeight and fontFamily.
To make development easier, Flex supports both the camel-case and hyphenated syntax in style sheets, as the following example shows:
<?xml version="1.0"?>
<!-- styles/CamelCase.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myFontStyle {
fontSize: 15;
}
.myOtherFontStyle {
font-size: 15;
}
</mx:Style>
<mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
<mx:Button id="myButton2" styleName="myOtherFontStyle" label="Click Here"/>
<mx:Button id="myButton3" fontSize="15" label="Click Here"/>
</mx:Application>
In ActionScript or an MXML tag, you cannot use hyphenated style property names, so you must use the camel-case version of the style property. For the style name in a style sheet, you cannot use a hyphenated name, as the following example shows:
.myClass { ... } /* Valid style name */
.my-class { ... } /* Not a valid style name */
Some style properties are inherited. If you set an inheritable style property on a parent container, its children inherit that style property. For example, if you define fontFamily as Times for a Panel container, all children of that container will also use Times for fontFamily, unless they override that property. If you set a noninheritable style such as textDecoration on a parent container, only the parent container and not its children use that style. For more information on inheritable style properties, see About style inheritance.
In general, color and text styles are inheritable, regardless of how they are set (by using style sheets or the setStyle() method). All other styles are not inheritable unless otherwise noted.
The following are exceptions to the rules of inheritance:
global selector in a CSS style definition, Flex applies those style properties to all controls, regardless of whether the properties are inheritable. For more information about the global selector, see Using the global selector.There are some major differences in Flex between support of CSS and the CSS specification:
symbolColor and symbolBackgroundColor. For more information on themes, see About themes.Class selectors define a set of styles (or a class) that you can apply to any component. You define the style class, and then point to the style class using the styleName property of the component's MXML tag. All Flex components that are a subclass of the UIComponent class support the styleName property.
The following example defines a new style myFontStyle and applies that style to a Button component by assigning the Button to the myFontStyle style class:
<?xml version="1.0"?>
<!-- styles/ClassSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myFontStyle {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
</mx:Application>
Class selector names must start with a period when you access them with the getStyleDeclaration() method, as the following example shows:
<?xml version="1.0"?>
<!-- styles/ClassSelectorStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myFontStyle {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Script><![CDATA[
public function changeStyles(e:Event):void {
StyleManager.getStyleDeclaration('.myFontStyle').setStyle('color',0x3399CC);
}
]]></mx:Script>
<mx:Button id="myButton" label="Click Here" styleName="myFontStyle" click="changeStyles(event)"/>
</mx:Application>
You do not precede the class selector with a period when you use the styleName property for inline styles.
Type selectors assign styles to all components of a particular type. When you define a type selector, you are not required to explicitly apply that style. Instead, Flex applies the style to all classes of that type. Flex also applies the style properties defined by a type selector to all subclasses of that type.
The following example shows a type selector for Button controls:
<?xml version="1.0"?>
<!-- styles/TypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Button id="myButton" label="Click Here"/>
</mx:Application>
In this example, Flex applies the color style to all Button controls in the current document, and all Button controls in all the child documents. In addition, Flex applies the color style to all subclasses of Button.
You can set the same style declaration for multiple component types by using a comma-separated list of components. The following example defines style information for all Button, TextInput, and Label components:
<?xml version="1.0"?>
<!-- styles/MultipleTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button, TextInput, Label {
fontStyle: italic;
fontSize: 24;
}
</mx:Style>
<mx:Button id="myButton" label="Click Here"/>
<mx:Label id="l1" text="My Label"/>
<mx:TextInput id="ti1" text="Input text here"/>
</mx:Application>
You can use multiple type selectors of the same name at different levels to set different style properties. In an external CSS file, you can set all Label components to use the Blue color for the fonts, as the following example shows:
/* assets/SimpleTypeSelector.css */
Button {
fontStyle: italic;
color: #99FF00;
}
Then, in a local style declaration, you can set all Labels to use the font size 10, as the following example shows:
<?xml version="1.0"?>
<!-- styles/TypeSelectorWithExternalCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style source="../assets/SimpleTypeSelector.css"/>
<mx:Style>
Button {
fontSize: 15;
}
</mx:Style>
<mx:Button id="myButton" label="Click Here"/>
</mx:Application>
The local style declaration does not interfere with external style declarations. Flex applies only the style properties that you specified. The result of this example is that Label controls that are children of the current document use Blue for the color and 10 for the font size.
All styles are shared across all documents in an application and across all applications that are loaded inside the same application. For example, if you load two SWF files inside separate tabs in a TabNavigator container, both SWF files share the external style definitions.
You can mix class and type selectors to create a component that has styles based on compound style declarations. For example, you can define the color in a class selector and the font size in a type selector, and then apply both to the component:
<?xml version="1.0"?>
<!-- styles/CompoundSelectors.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Label {
fontSize: 10pt;
}
.myLabel {
color: Blue;
}
</mx:Style>
<mx:Label styleName="myLabel" text="This label is 10pt Blue"/>
</mx:Application>
If you later remove one of the selectors (for example, call the StyleManager's clearStyleDeclaration() method on the type or class selector), the other selector's style settings remain.
Class selectors take precedence over type selectors. In the following example, the text for the first button (with the class selector) is red, and the text of the second button (with the implicit type selector) is yellow:
<?xml version="1.0"?>
<!-- styles/SelectorPrecendence.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myclass {
color: Red;
}
Button {
fontSize: 10pt;
color: Yellow;
}
</mx:Style>
<mx:VBox width="500" height="200">
<mx:Button styleName="myclass" label="I am red"/>
<mx:Button label="I am yellow"/>
</mx:VBox>
</mx:Application>
The font size of both buttons is 10. When a class selector overrides a type selector, it does not override all values, just those that are explicitly defined.
Type selectors apply to a particular class, as well as its subclasses and child components. In the following example, the color property for a VBox control is blue. This means that the color property for the Button and Label controls, which are direct children of the VBox control, is blue.
<?xml version="1.0"?>
<!-- styles/BasicInheritance.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
VBox {
color:blue
}
</mx:Style>
<mx:VBox width="500" height="200">
<mx:Label text="This is a label"/>
<mx:Button label="Click Me"/>
</mx:VBox>
</mx:Application>
If the same style property is applied in multiple type selectors that apply to a class, the closest type to that class takes precedence. For example, the VBox class is a subclass of Box, which is a subclass of Container. If there were Box and Container type selectors rather than a VBox type selector, then the value of the VBox control's color property would come from the Box type selector rather than the Container type selector, as the following example shows:
<?xml version="1.0"?>
<!-- styles/ContainerInheritance.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Container {
color:red
}
Box {
color:green
}
</mx:Style>
<mx:VBox width="500" height="200">
<mx:Label text="This is a green label"/>
<mx:Button label="Click this green button"/>
</mx:VBox>
</mx:Application>
Not all style properties are inheritable. For more information, see About style inheritance.
Flex supports the following subset of the CSS style properties as defined by the CSS specification:
color fontFamily fontSize fontStyle fontWeight paddingBottompaddingLeft paddingRight paddingToptextAlign textDecoration textIndent Flex also supports properties that you can define by using CSS syntax and inheritance rules, but the properties are not part of the CSS property library. For a list of style properties for each control, view that control's entry in Adobe Flex 2 Language Reference.
You can use embedded resources in your <mx:Style> blocks. This is useful for style properties such as backgroundImage, which you can apply to an embedded resource such as an image file. The following example embeds an image as myImage. The style declaration references this resource:
<?xml version="1.0"?>
<!-- styles/EmbedInCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.style1 {
backgroundImage: Embed("../assets/bird.gif");
}
</mx:Style>
<mx:HBox>
<mx:TextArea width="200" height="200" styleName="style1"/>
</mx:HBox>
</mx:Application>
For graphical skins, you use the Embed statement directly in the style sheet, as the following example shows:
<?xml version="1.0"?>
<!-- skins/EmbedImagesCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button {
overSkin: Embed("../assets/orb_over_skin.gif");
upSkin: Embed("../assets/orb_up_skin.gif");
downSkin: Embed("../assets/orb_down_skin.gif");
}
</mx:Style>
<mx:Button id="b1" label="Click Me"/>
</mx:Application>
For programmatic skins, you use the ClassReference statement, as the following example shows:
<?xml version="1.0"?>
<!-- skins/ApplyButtonStatesSkin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button {
overSkin: ClassReference("ButtonStatesSkin");
upSkin: ClassReference("ButtonStatesSkin");
downSkin: ClassReference("ButtonStatesSkin");
}
</mx:Style>
<mx:Button id="b1" label="Click Me"/>
</mx:Application>
For more information about using Embed, see Embedding Assets. For more information about skinning, see Using Skins.
Flex 2.01
