FLEX3 Application of CSS fully detailed

Using style methods in Flex

first, use the local style definition

Use the <mx:Style> tab to create a local style definition in the Mxml file. This tag contains the style sheet definition that conforms to the CSS2.0 syntax. These definitions apply to the current document and to the subdocument of the current document.

<mx:style>

. solidborder{//Class Selection Style

Border-style:solid;

}

button{//Component Definition Style

Border-style:solid;

}

....

</mx:style>

Apply to Component

<mx:vboxstylename= "Solidborder"/>

<mx:button/>//the button in the document automatically applies the style in the style sheet

ii. use of external style sheets

Flex supports external CSS style sheets. To apply a style sheet to the current document and subdocument, use the source in the <mx:Style> label

Property.

<mx:Application...>

<mx:stylesource= "STYLE/STYLE.CSS"/>//load an external style sheet

...

</mx:Application>

The style sheet definition in the Style.css file is the same as the local style definition.

third, use inline style

You can set style properties in the Mxml tag as you would a component's properties. Inline styles have precedence over local and external styles.

<mx:buttonborderstyle= "SOLID" >//set style properties

Iv. using the SetStyle () method

You can use methods in ActionScript to manipulate the style properties of a component. The priority of using the SetStyle () method is highest.

<mx:Application...>

<mx:Script>

<! [Cdata[privatefunctiominitbutton (): Void{mybutton.setstyle ("paddingtop"); Mybutton.setstyle ("PaddingBottom", 12);}] >

</mx:Script>

<mx:buttonid= "MyButton" initialize= "Initbutton ();" >//the set style when the component is initialized.

v. Scripting Methods

</mx:Application> style properties for each component

ThemeColor Theme Colors: If the color style configuration does not want to set too much, ThemeColor is a choice. It allows you to choose a basic color, and then the component's border, appearance, and so on color will be based on this color to form a set of default style, the component can use this style property.

Application Component style properties

BackgroundImage background image using embed (source= "");

BackgroundColor background Color

Backgroundgradientcolors Background Progressive Color This property sets 2 colors, progressive start and progressive end colors, separated by commas in the middle

Backgroundgradientalphas background Progressive Color Transparency this property sets 2 transparency, and the range of 2 color values in the gradient color is 0.00~1.00, separated by commas

Panel component style properties

Cornerradius Corner degrees The size of the panel's border angle value is at right angle from 0~280, the larger the value, the greater the fillet radian

Headerheight title Head height panel header height value from 0~50

Dropshadowenabled whether to display a projection true and False2 properties

Shadowdistance Projection size dropshadowenabled True when valid values are from 0~20

Shadowdirection Projection Direction 3 properties Leftrightcenter

Color of Dropshadowcolor projection

Whether the bottom corner of the roundedbottomcorners is rounded to true and the False2 property is false, the bottom corner is at right angles, and the Cornerradius has no effect on it; if it's True,cornerradius, the bottom corner will work.

TextAlign text Alignment 3 Properties Leftrightcenter

BackgroundColor background Color In addition to the title of the content of the part of the background color

Backgroundalpha background Transparency In addition to the title of the content of some background transparency values from 0.00~1.00

The bordercolor border color includes the border color between the outline and title and the body content

Borderalpha border transparency includes the border transparency values between the outline and title and the body content from 0.00~1.00

BorderStyle border Style Undefined,none,solid3: default to undefined. When the value is none or solid, there will be no border spacing or solid style between the title and the body content.

The thickness of the border when the BorderThickness border is solid, and the value is from 0~20

Headercolors Header Background Fade This property to set 2 colors, progressive start color and progressive end color, separated by commas in the middle

Footercolors Bottom background Gradient This property to set 2 colors, progressive start color and progressive end color, separated by commas in the middle

Highlightalphas transparency is only valid for headercolors. There are 2 values in the middle with a comma separating the front one for the highlight brightness, from 0.00~1.00, to 1 o'clock brightest, to white after one for high light transparency, from 0.00~1.00, to 1 o'clock most transparent (can be set to make crystal translucent effect)

Color text Colors

To set styles such as fonts, skins, backgrounds, and so on in the title of the panel, you define a referenced style in the style sheet in order not to conflict with the style in the panel.

panel{

...

Titlestylename: "Mytitlestyle";

...

}

Then define a new Mytitlestyle style to set the title style.

Tabnavigator Component Style properties

Tabheight the height value of each tab from the 0~50

Tabwidth the Width value of each tab from 0~200

Cornerradius Corner Circle Angle of the body content in each tab from the 0~20 note is not the tab corner

HorizontalGap the interval width value between each tab when the number is negative from -10~20, the tab will appear overlapping

Alignment direction of the Horizontalaligntab Leftcenterright

Paddingleft the left padding distance from the entire set of tabs from the 0~20. Not the padding distance of each tab

Paddingright the right padding distance from the right padding of the entire set of tabs from the 0~20. Not the padding distance of each tab

TextAlign text aligns the aligns boxes to the text in the body content of each tab leftcenterright

Textindenttab title offset The offset of the caption relative to the center position in each tab value from 0~20

This background color is applied to the body content of the BackgroundColor Background color tab and tab

Backgroundalpha background Color Transparency is only valid for the background color of the body content in the TAB key from the 0.00~1.00

Border style for body content in BorderStyle border Style tab

Four styles of Nonesolidinsetoutset

Border color of the body content in the BorderColor Border Color tab

BorderThickness Border thickness borderstyle to solid valid values from 0~20

Dropshadowenabled whether to display a projection true and False2 properties

Shadowdistance Projection size dropshadowenabled True when valid values are from 0~20

Color of Dropshadowcolor projection

Text color for color body content

To set the style in the tab in Tabnavigator, to not conflict with the style in Tabnavigator, define a referenced style in the style sheet.

tabnavigator{

...

Tabstylename: "Mytabs";

...

}

Then define a new mytabs style to set the tab style.

Settings in Mytabs

Cornerradiustab Corner Circle Angle The angle of each tab from 0~20 Note that is not a corner of the tab body content fillcolorstab Fill gradient Unchecked tab fill gradient this property to set 2 colors, gradient start and gradient end colors, Separated by commas in the middle

Fillalphastab Fill Transparency Unchecked tab Fill transparency this property sets 2 values, gradient start color transparency and gradient end color transparency, separated by commas, values from 0.00~1.00

Backgroundcolortab background Color The selected tab applies the back color

Backgroundalphatab background color transparency values from 0.00~1.00

Bordercolortab Border Color

Textrollovercolor the tab text color when the mouse passes tab

Accordion Component Style properties

Headerheight Label Header height accordion the height of each label header in the component

Dropshadowenabled whether to display a projection true and False2 properties

The size of the shadowdistance projection from the 0~20

Shadowdirection Projection Direction Leftrightcenter

Color of Dropshadowcolor projection

BorderStyle the style of the border Nonesolid

BorderThickness the thickness of the border from the 0~20

BackgroundColor background Color The entire accordion component, including the label header and body content, will apply the back color

Fillcolors unselected Label header fill Color This property sets 4 color values: Gradient start color, gradient end color, gradient start color when mouse over, gradient end color when mouse passes

Fillalphas unchecked Label header fill color transparency corresponds to fillcolors setting 4 transparency values from 0.00~1.00

Selectedfillcolors Selected Label header fill Color This property sets 2 color values: Gradient start color, gradient end color

Color Label Header text

Textrollovercolor the text color when the mouse passes over the label header

Textselectedcolor the text color when the mouse clicks on the label header

The size value of the textindent label header text indent distance from the 0~100

Openduration the speed value of opening a new label from 0~1000

Linkbar Component Style properties

HorizontalGap the interval values between links in horizontal direction from 0~20

Separatorwidth the thickness of the spacing line between the links of each link from the 0~20

Color of Separatorcolor Spacer line

Borderstylelinkbar Border Style Nonesolid

bordercolor Border Color

BorderThickness border thickness value from 0~20

Cornerradius Border Circle angle value from 0~20

Dropshadowenabled whether to show border projections true and false

Shadowdistance projection size values from 0~20

Shadowdirection Projection Direction Leftcenterright

Dropshadowcolor Projection Color

BackgroundColor background Color

Backgroundalpha background color transparency values from 0.00~1.00

Color link text Colors

Disabledcolor Selected link text color

Rollovercolor the background color when the mouse is over an unchecked link

Textrollovercolor the text color when the mouse passes through an unchecked link

SelectionColor the background color when the mouse clicks on an unchecked link

Textselectedcolor the text color when the mouse clicks on an unchecked link

Applicationcontrolbar Component Style properties

Cornerradius Border Circle angle value from 0~20

Dropshadowenabled whether to show border projections true and false

Shadowdistance projection size values from 0~20

Dropshadowcolor Projection Color

BorderStyle border Style Defaultnonesolid

bordercolor Border Color

BorderThickness border weight values from 0~20

BackgroundColor background Color

Fillcolors fill Gradient This property to set 2 colors, gradient start color and gradient end color, separated by commas in the middle

Fillalphas fill transparency This property to set 2 transparency gradient start color transparency and gradient end color transparency

Highlightalphas Transparency 2 values, in the middle of a comma-separated before a high light brightness, from 0.00~1.00, 1 o'clock is the brightest, white after a high light transparency, from 0.00~1.00, to 1 o'clock the most transparent (can be set to make crystal translucent effect)

BackgroundColor background Color

List Component style properties

BackgroundColor background Color

Backgroundalpha background color transparency values from 0.00~1.00

Userollover whether to use the mouse to pass each item of the list has an effect truefalse

Rollovercolor the background color userollover when the mouse passes each item is valid

Textrollovercolor the text color when the mouse passes through each item is valid when Userollover is True

Alternatingitemcolorslist Interval Background Color This property sets 2 colors, the background color of an item and the background color of the next item color color option text

SelectionColor the background color of the selected item

Textselectedcolor the text color of the selected item

Textindent option Text Indent distance

Selectionduration the selected item gradient speed is changed by the selected item background color

The speed of the value in the SelectionColor, setting the gradient effect value from the 0~5000, the slower the gradient

BorderStyle border Style None/solid/...

bordercolor Border Color

BorderThickness border weight values from 0~20

Dropshadowenabled whether to display a projection true and False2 properties

Shadowdistance Projection Size dropshadowenabled is true the effective value is 3 properties from the 0~20,shadowdirection projection direction leftrightcenter

Color of Dropshadowcolor projection

DataGrid Component Style Properties

BackgroundColor background Color

Backgroundalpha background color transparency values from 0.00~1.00

Alternatingitemcolors interval background color interval item color This property to set 2 colors, the background color of an item and the background color of the next item

Headercolors Title Header background Gradient color This property to set 2 colors, title Head background gradient start color and title head background gradient end color

HorizontalGridlines whether the horizontal divider appears to show the horizontal divider line between each row TrueFalse

Horizontalgridlinecolor Horizontal Separator Line Color HorizontalGridlines true

VerticalGridlines whether the vertical divider shows the horizontal divider between each row TrueFalse This property is only valid for the divider in the content, and the header's separator line is the default

Verticalgridlinecolor Vertical Separator Line Color Verticalgridlinecolor true

Userollover whether to implement the change effect when the mouse passes TrueFalse

Rollovercolor the background color userollover when the mouse passes over a row is valid

Textrollovercolor the text color when the mouse passes over a row is userollover to True (this property does not seem to be valid?)

Color text Colors

Textselectedcolor the text color of the selected line (this property does not seem to be valid?)

SelectionColor the background color of the selected row

Textindent each line of text indented distance value from 0~30

Tree component Style properties

BackgroundColor background Color

Backgroundalpha background color transparency values from 0.00~1.00

Color of the Alternatingitemcolors interval row This property sets 2 colors, the background color of a row and the background color of the next line depthcolors the background color of each level in the tree hierarchy this property sets multiple colors, separated by commas. Background color for every 1 levels from the top to the last level of the tree. Setting this property overrides the setting in Alternatingitemcolors

Userollover whether to use the mouse to pass through each row TrueFalse

Rollovercolor the background color of the mouse after each row is userollover to True

Textrollovercolor the text color Userollover True when the mouse passes through each row

The thickness value of the borderthickness border from the 0~20

Color text Colors

SelectionColor the background color of the selected row

Textselectedcolor the text color of the selected row

Textindent text indent value text relative to the icon's indent value from 0~50

Indentation the indentation value of each level relative to the previous level from the 0~50

Openduration to open and close this layer of content from 0~1000

Selectionduration the background color gradient at the selected level from the 0~3000

TextInput Component Style properties

BackgroundColor background Color

Backgroundalpha background color Transparency values from 0.00~1.00color text color

BorderStyle Border Style Nonesolidinset outset

bordercolor Border Color

BorderThickness Border thickness borderstyle to solid valid values from 0~20

Cornerradius Border Circle Angle BorderStyle is solid when valid value from 0~20

Textindent the value of the content indent values in the input box from the 0~20

Dropshadowenabled whether to display the projection TrueFalse

Shadowdirection Projection Direction Leftcenterright

Shadowdistance projection size values from 0~20

Dropshadowcolor Projection Color

Numericstepper Component Style Properties

BackgroundColor background Color

Backgroundalpha background color transparency values from 0.00~1.00

BorderStyle border Style Nonesolidinset

Fillcolors gradient fill color for flip and drop keys This property sets 4 color values: Gradient start color, gradient end color, gradient start color when mouse over, gradient end color when mouse passes

Fillalphas fill transparency for fillcolors property to set 4 transparency gradient start color transparency gradient end color Transparency gradient start color transparency when mouse passes the gradient end color transparency value from 0.00~1.00

Highlightalphas High-light transparency for fillcolors properties

2 values in the middle with a comma separating the previous one for High-brightness, from 0.00~1.00, to 1 o'clock brightest, to white after one for high light transparency, from 0.00~1.00, to 1 o'clock most transparent

Dropshadowenabled whether to display the projection TrueFalse

Shadowdirection Projection Direction Leftcenterright

Shadowdistance projection size values from 0~20

Dropshadowcolor Projection Color

ComboBox component style properties color colors of text in all options

bordercolor Border Color

Cornerradius Border Circle angle value from 0~20

Fillcolors gradient fill Color for selected items This property sets 4 color values: Gradient start color, gradient end color, gradient start color when mouse over, gradient end color when mouse passes

Fillalphas fill transparency for fillcolors property to set 4 transparency gradient start color transparency gradient end color Transparency gradient start color transparency when mouse passes the gradient end color transparency value from 0.00~1.00

Highlightalphas transparency for the Fillcolors property 2 values, the middle comma-separated before one for the highlight brightness, from 0.00~1.00, 1 o'clock is the brightest, white after a high light transparency, from 0.00~1.00, to 1 o'clock the most transparent ( Crystal translucent effect can be made by setting

Backgroundalpha The background transparency value of the Drop-down box from 0.00~1.00

Alternatingitemcolors the interval background color of the options in the dropdown box this property sets 2 colors, the background color of a row, and the background color of the next line

Userollover if the option to use the mouse over the Drop-down box TrueFalse

Rollovercolor the background color of the selected mouse over the dropdown box is userollover true

Textrollovercolor dropdown box when the text color userollover is true when the mouse passes

SelectionColor This option when you click a line option in the dropdown box background color

Textselectedcolor This option text color when you click a line of options in the dropdown box

Openduration the speed value of the Drop-down box to open from 10~2000

Closeduration Closes the Drop-down box by the speed value from the 10~2000

checkbox Component style properties (includes radio and multiple selections)

bordercolor Border Color

Color text Colors

Textrollovercolor the text color when the mouse is over the selection box

Textselectedcolor the text color when the mouse clicks the selection box

Fillcolors background fill color for the selection box this property sets 4 color values: Gradient start color, gradient end color, gradient start color when mouse over, gradient end color when mouse passes

Fillalphas fill transparency for fillcolors property to set 4 transparency gradient start color transparency gradient end color Transparency gradient start color transparency when mouse passes the gradient end color transparency value from 0.00~1.00

Highlightalphas transparency for the Fillcolors property 2 values, the middle comma-separated before one for the highlight brightness, from 0.00~1.00, 1 o'clock is the brightest, white after a high light transparency, from 0.00~1.00, to 1 o'clock the most transparent ( Crystal translucent effect can be made by setting

Hslider (similar to a temperature scale component Hslider to landscape) component style properties

Labeloffset the distance value between the tick-mark text and the tick number from the -50~50 negative time value text at the top of a positive level below the tick mark

The distance between the cursor in the Thumboffset scale and the ruler is from the -50~50 negative number, the cursor is below the ruler