Notes: CSS StyleSheets

Friday, January 16th, 2009 | Web Development | Gabriel Mariani

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.)

Example 1

var style:StyleSheet = new StyleSheet();

var link:Object = new Object();
link.color = "#FF0000";

var hover:Object = new Object();
hover.fontWeight = "bold";

var active:Object = new Object();
active.color = "#00FF00";

style.setStyle("a:link", link);
style.setStyle("a:hover", hover);
style.setStyle("a:active", active);

var txt:TextField = new TextField();
txt.width = 400;
txt.styleSheet = style;
txt.htmlText = "Visit: <a href='http://www.google.com' target='_blank'><u>Google.com</u></a>";
addChild(txt);

Example 2

var style:StyleSheet = new StyleSheet();
style.parseCSS("a:link { color: #FF0000; } a:hover { font-weight: bold; } a:active { color: #00FF00; }");

var txt:TextField = new TextField();
txt.width = 400;
txt.styleSheet = style;
txt.htmlText = "Visit: <a href='http://www.google.com' target='_blank'><u>Google.com</u></a>";
addChild(txt);

color (css: color)

Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.

display (css: display)

Supported values are inline, block, and none.

fontFamily (css: font-family)

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.

fontSize (css: font-size)

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

fontStyle (css: font-style)

Recognized values are normal and italic.

fontWeight (css: font-weight)

Recognized values are normal and bold.

kerning (css: 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 (css: 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.

letterSpacing (css: letter-spacing)

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.

marginLeft (css: margin-left)

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

marginRight (css: margin-right)

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

textAlign (css: text-align)

Recognized values are left, center, right, and justify.

textDecoration (css: text-decoration)

Recognized values are none and underline.

textIndent (css: text-indent)

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

Print Friendly

Tags: , , ,

Leave a comment

Please upgrade your Flash Player To submit a comment, you must have Flash Player 9.0.0 or higher installed. I use a flash form here to help prevent spam.

No comments yet.

Search

Ad