ActionScript 3.0 Language and Components Reference | All Packages | All Classes | Language Elements | Index | Appendixes | Conventions | Frames No Frames |
StyleSheet

Package | flash.text
Class | public dynamic class StyleSheet
Inheritance | StyleSheet EventDispatcher Object

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

The StyleSheet class lets you create a StyleSheet object that contains text formatting rules for font size, color, and other styles. You can then apply styles defined by a style sheet to a TextField object that contains HTML- or XML-formatted text. The text in the TextField object is automatically formatted according to the tag styles defined by the StyleSheet object. You can use text styles to define new formatting tags, redefine built-in HTML tags, or create style classes that you can apply to certain HTML tags.

To apply styles to a TextField object, assign the StyleSheet object to a TextField object's `styleSheet` property.

Note: A text field with a style sheet is not editable. In other words, a text field with the `type` property set to `TextFieldType.INPUT` applies the StyleSheet to the default text for the text field, but the content will no longer be editable by the user. Consider using the TextFormat class to assign styles to input text fields.

Flash Player supports a subset of properties in the original CSS1 specification (www.w3.org/TR/REC-CSS1). The following table shows the supported Cascading Style Sheet (CSS) properties and values, as well as their corresponding ActionScript property names. (Each ActionScript property name is derived from the corresponding CSS property name; if the name contains a hyphen, the hyphen is omitted and the subsequent character is capitalized.)

CSS property | ActionScript property | Usage and supported values
--- | --- | ---
`color` | `color` | Only hexadecimal color values are supported. Named colors (such as `blue`) are not supported. Colors are written in the following format: `#FF0000`.
`display` | `display` | Supported values are `inline`, `block`, and `none`.
`font-family` | `fontFamily` | A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. The following font conversions are available: `mono` is converted to `_typewriter`, `sans-serif` is converted to `_sans`, and `serif` is converted to `_serif`.
`font-size` | `fontSize` | Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`font-style` | `fontStyle` | Recognized values are `normal` and `italic`.
`font-weight` | `fontWeight` | Recognized values are `normal` and `bold`.
`kerning` | `kerning` | Recognized values are `true` and `false`. Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, do not support kerning. The kerning property is only supported in SWF files created in Windows, not in SWF files created on the Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning still applies.
`leading` | `leading` | The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`letter-spacing` | `letterSpacing` | The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`margin-left` | `marginLeft` | Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`margin-right` | `marginRight` | Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`text-align` | `textAlign` | Recognized values are `left`, `center`, `right`, and `justify`.
`text-decoration` | `textDecoration` | Recognized values are `none` and `underline`.
`text-indent` | `textIndent` | Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

View the examples

See also

flash.text.TextField

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | constructor : Object A reference to the class object or constructor function for a given object instance. | Object
|  | prototype : Object [static] A reference to the prototype object of a class or function object. | Object
|  | styleNames : Array [read-only] An array that contains the names (as strings) of all of the styles registered in this style sheet. | StyleSheet

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | StyleSheet() Creates a new StyleSheet object. | StyleSheet
|  | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event. | EventDispatcher
|  | clear():void Removes all styles from the style sheet object. | StyleSheet
|  | dispatchEvent(event:Event):Boolean Dispatches an event into the event flow. | EventDispatcher
|  | getStyle(styleName:String):Object Returns a copy of the style object associated with the style named styleName. | StyleSheet
|  | hasEventListener(type:String):Boolean Checks whether the EventDispatcher object has any listeners registered for a specific type of event. | EventDispatcher
|  | hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined. | Object
|  | isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter. | Object
|  | parseCSS(CSSText:String):void Parses the CSS in CSSText and loads the style sheet with it. | StyleSheet
|  | propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable. | Object
|  | removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void Removes a listener from the EventDispatcher object. | EventDispatcher
|  | setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations. | Object
|  | setStyle(styleName:String, styleObject:Object):void Adds a new style with the specified name to the style sheet object. | StyleSheet
|  | toString():String Returns the string representation of the specified object. | Object
|  | transform(formatObject:Object):TextFormat Extends the CSS parsing capability. | StyleSheet
|  | valueOf():Object Returns the primitive value of the specified object. | Object
|  | willTrigger(type:String):Boolean Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type. | EventDispatcher

Events
Hide Inherited Events
Show Inherited Events

| Event | Summary | Defined By
--- | --- | --- | ---
|  | activate | Dispatched when Flash Player gains operating system focus and becomes active. | EventDispatcher
|  | deactivate | Dispatched when Flash Player loses operating system focus and is becoming inactive. | EventDispatcher

Property Detail

styleNames | property

`styleNames:Array` [read-only]

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

An array that contains the names (as strings) of all of the styles registered in this style sheet.

Implementation
`public function get styleNames():Array`
Constructor Detail

StyleSheet | () | Constructor

`public function StyleSheet()`

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

Creates a new StyleSheet object.

See also

flash.text.StyleSheet.getStyle()
Method Detail

clear | () | method

`public function clear():void`

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

Removes all styles from the style sheet object.

getStyle | () | method |

`public function getStyle(styleName:String):Object`

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

Returns a copy of the style object associated with the style named `styleName`. If there is no style object associated with `styleName`, `null` is returned.

Parameters

| `styleName:String` — A string that specifies the name of the style to retrieve.

Returns

| `Object` — An object.

See also

flash.text.StyleSheet.setStyle()
Example
How to use examples
Please see the parseCSS() or transform() method's example for illustrations of how to use the `getStyle()` method.

parseCSS | () | method |

`public function parseCSS(CSSText:String):void`

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

Parses the CSS in `CSSText` and loads the style sheet with it. If a style in `CSSText` is already in `styleSheet`, the properties in `styleSheet` are retained, and only the ones in `CSSText` are added or changed in `styleSheet`.

To extend the native CSS parsing capability, you can override this method by creating a subclass of the StyleSheet class.

Parameters

| `CSSText:String` — The CSS text to parse (a string).

Example
In the following example, when a user clicks on the text file, CSS styles, loaded from a file, are applied to the content.

In the constructor, a multiline text field is created and its content is set to an HTML-formatted string. (The HTML heading and span tags are not rendered before CSS style is applied.) A `URLRequest` object is created to identify the location of the CSS file; for this example, the CSS file is in the same directory as the SWF file. The file is loaded with a `URLLoader` object. There are two event listeners added for the `loader` URLLoader object. If an IO error occurs, the `errorHandler()` method is invoked, which displays an error message in the text field. After all the data is received and placed in the data property of the `loader` URLLoader object, the `loaderCompleteHandler()` method is invoked. This method parses the CSS styles from the data loaded from the file and fills the `sheet` StyleSheet object with the style definitions.

When the user clicks on the text field, the `clickHandler()` method is called. The if statement in the `clickHandler()` method checks to make sure the file loading was finished before applying the style sheet to the text field. In order for the style sheet to take effect, the `htmlText` property must be reassigned with the content after the style sheet is assigned to the text field. The CSS `font-family` and the `color` property values for the heading tag also are appended to the content of the text field. (The values of these properties will be "undefined" if style sheet values are not in effect.)

The following is an example of a content of the CSS file that can be used with this example. Before running this example, create a text file, copy the following CSS content into it, then save it with the file name `test.css` and place it in the same directory as the SWF file.

       p {
          font-family: Times New Roman, Times, _serif;
          font-size: 14;
           font-Style: italic;
    	    margin-left: 10;
       }
       h1 {
          font-family: Arial, Helvetica, _sans;
          font-size: 20;
          font-weight: bold;
       }
       .bluetext {
          color: #0000CC;
       }

    package {
        import flash.display.Sprite;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import flash.text.StyleSheet;
        import flash.text.TextField;
        import flash.text.TextFieldAutoSize;
        import flash.events.IOErrorEvent;
        import flash.events.Event;
        import flash.events.MouseEvent;

        public class StyleSheet_parseCSSExample extends Sprite {
            private var loader:URLLoader = new URLLoader();
            private var field:TextField = new TextField();
            private var exampleText:String = "<h1>This is a headline</h1>"
                        + "<p>This is a line of text. <span class='bluetext'>"
                        + "This line of text is colored blue.</span></p>";
            private var sheet:StyleSheet = new StyleSheet();
            private var cssReady:Boolean = false;

            public function StyleSheet_parseCSSExample() {
                field.x = 10;
                field.y = 10;
                field.background = true;
                field.multiline = true;
                field.autoSize = TextFieldAutoSize.LEFT;
                field.htmlText = exampleText;

                field.addEventListener(MouseEvent.CLICK, clickHandler);

                addChild(field);

                var req:URLRequest = new URLRequest("test.css");
                loader.load(req);

                loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
                loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
            }

            public function errorHandler(e:IOErrorEvent):void {
                field.htmlText = "Couldn't load the style sheet file.";
            }

            public function loaderCompleteHandler(event:Event):void {
                sheet.parseCSS(loader.data);
                cssReady = true;
            }

            public function clickHandler(e:MouseEvent):void {

                if (cssReady) {
                    field.styleSheet = sheet;
                    field.htmlText = exampleText;

                    var style:Object = sheet.getStyle("h1");
                    field.htmlText += "<p>Headline font-family is: " + style.fontFamily + "</p>";
                    field.htmlText += "<p>Headline color is: " + style.color + "</p>";

                } else {
                    field.htmlText = "Couldn't apply the CSS styles.";
                }
            }
        }
    }

setStyle | () | method |

`public function setStyle(styleName:String, styleObject:Object):void`

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

Adds a new style with the specified name to the style sheet object. If the named style does not already exist in the style sheet, it is added. If the named style already exists in the style sheet, it is replaced. If the `styleObject` parameter is `null`, the named style is removed.

Flash Player creates a copy of the style object that you pass to this method.

For a list of supported styles, see the table in the description for the StyleSheet class.

Parameters

| `styleName:String` — A string that specifies the name of the style to add to the style sheet.
| `styleObject:Object` — An object that describes the style, or `null`.

transform | () | method |

`public function transform(formatObject:Object):TextFormat`

Language Version : | ActionScript 3.0

Player Version : | Flash Player 9

Extends the CSS parsing capability. Advanced developers can override this method by extending the StyleSheet class.

Parameters

| `formatObject:Object` — An object that describes the style, containing style rules as properties of the object, or `null`.

Returns

| `TextFormat` — A TextFormat object containing the result of the mapping of CSS rules to text format properties.

See also

flash.text.TextFormat
Example
This example uses the `transform()` method to apply a style from a CSS file to a TextFormat object for a text field.

CSS styles are used usually to format HTML content. However, by using `transform()` method of a StyleSheet object, specific CSS styles can be assigned to a TextFormat object and then applied to any text field.

The `URLRequest` and `URLLoader` objects are used to load the CSS file. An event listener is added for the `Event.COMPLETE` event, which occurs after all the data is received and placed in the data property of the `loader` URLLoader object. The `loaderCompleteHandler()` method then parses the CSS from the data loaded from the file and fills the `sheet` StyleSheet object with the styles. The `getStyle()` method of the style sheet retrieves the HTML paragraph styles, which are then assigned to the `cssFormat` TextFormat object by using style sheet's `transform()` method. Finally, the default text format of the `inputField` text field is set to the new `cssFormat` text format.

    package {
        import flash.display.Sprite;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import flash.text.StyleSheet;
        import flash.text.TextField;
        import flash.text.TextFormat;
        import flash.text.TextFieldType;
        import flash.events.IOErrorEvent;
        import flash.events.Event;

        public class StyleSheet_transformExample extends Sprite {
            private var loader:URLLoader = new URLLoader();
            private var inputField:TextField = new TextField();
            private var sheet:StyleSheet = new StyleSheet();

            public function StyleSheet_transformExample() {
                inputField.x = 10;
                inputField.y = 10;
                inputField.background = true;
                inputField.width = 300;
                inputField.height = 200;
                inputField.wordWrap = true;
                inputField.multiline = true;
                inputField.type = TextFieldType.INPUT;

                addChild(inputField);

                var req:URLRequest = new URLRequest("test.css");
                loader.load(req);

                loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
                loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
            }

            public function errorHandler(e:IOErrorEvent):void {
                inputField.htmlText = "Couldn't load the style sheet file.";
            }

            public function loaderCompleteHandler(event:Event):void {
                var cssFormat:TextFormat = new TextFormat();
                sheet.parseCSS(loader.data);
                var style:Object = sheet.getStyle("p");
                cssFormat = sheet.transform(style);
                inputField.defaultTextFormat = cssFormat;
            }
        }
    }

Examples How to use examples
StyleSheetExample.as
The following example creates a new style sheet and assigns bold and red font treatments to the heading style.

    package {
        import flash.display.Sprite;
        import flash.text.StyleSheet;
        import flash.text.TextField;
        import flash.text.TextFieldAutoSize;

        public class StyleSheetExample extends Sprite {

            public function StyleSheetExample() {
                var style:StyleSheet = new StyleSheet();

                var heading:Object = new Object();
                heading.fontWeight = "bold";
                heading.color = "#FF0000";

                var body:Object = new Object();
                body.fontStyle = "italic";

                style.setStyle(".heading", heading);
                style.setStyle("body", body);

                var label:TextField = new TextField();
                label.styleSheet = style;
                label.htmlText = "<body><span class='heading'>Hello </span>World...</body>";
                addChild(label);
            }
        }
    }

Submit Feedback on LiveDocs
© 2004-2008 Adobe Systems Incorporated. All rights reserved.
Tue May 20 2008, 04:02 AM -07:00