Applying CSS in FLEX3

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 a style sheet that conforms to the CSS2.0 syntax

Yi. 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 corresponding to 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

backgroundimageThe background chart uses embed (source= "") to apply

BackgroundColorBackground color

backgroundgradientcolorsBackground gradient Color This property is set to 2 colors, progressive start color and

Progressive end color, separated by commas in the middle

BackgroundgradientalphasBackground Progressive color Transparency This property is set to 2 transparency, corresponding to the gradient color

The range of 2 color values in is 0.00~1.00, separated by commas in the middle

Panel component style properties

CornerradiusCorner degrees the size of the panel's outer-frame corner number from the 0~280, the higher the value, the greater the fillet radian

HeaderheightTitle Head height panel header height value from 0~50

dropshadowenabledShow projected true and False2 properties

shadowdistanceEffective number when the projection size dropshadowenabled is true

Value from 0~20

shadowdirectionProjection Direction 3 Properties Leftrightcenter

DropshadowcolorThe color of the projection

roundedbottomcornersWhether the bottom corner is rounded true and False2 property is false, the bottom corner is right angle, Cornerradius has no effect on it; if it's True,cornerradius, the bottom corner will work.

textAlignText Alignment 3 Properties Leftrightcenter

BackgroundColorBackground color In addition to the title outside the part of the background color

BackgroundalphaBackground transparency a part of the background transparency value of content other than title from 0.00~1.00

bordercolorThe border color includes the border color between the outline and title and the body content

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

BorderStyleBorder Style UNDEFINED,NONE,SOLID3 style: default is undefined. When the value is None or
When solid, there will be no border spacing or solid style between title and body content.

borderthicknessThe border thickness border style is the thickness of the borders when solid, values from 0~20

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

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

HighlightalphasHigh-light 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 the font, appearance, background, and so on in the title of the panel, in order to not conflict with the style in the panel, you need to
A style that defines a reference in a table.

panel{

...

Titlestylename: "Mytitlestyle";

...

}

And then define a newMytitlestyleStyle to set the style of title.

TabnavigatorComponent Style Properties

TabheightThe height value of each tab is from 0~50

TabwidthThe width value of each tab is from 0~200

CornerradiusCorner Circle Angle The angle of the body content in each tab from the 0~20 note is not the tab corner

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

HorizontalaligntabAlignment direction of the Leftcenterright

paddingleftLeft padding distance from the entire set of TAB's left padding, values from 0~20. Not the padding distance of each tab

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

textAlignText aligns the aligns boxes to the text in the body contents of each tab leftcenterright

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

BackgroundColorThis background color is applied to the background color tab and the body content in the tab

BackgroundalphaBackground color transparency is only valid for the background color of the body content in the TAB key from 0.00~1.00

BorderStyleBorder style for body content in border style tab

NonesolidinsetoutsetFour kinds of styles

bordercolorBorder color of body content in border color tab

borderthicknessThe effective value of the border thickness borderstyle to solid is from 0~20

dropshadowenabledShow projected true and False2 properties

shadowdistanceValid values dropshadowenabled when the projection size is true from 0~20

DropshadowcolorThe color of the 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 in the style sheet

A referenced style.

tabnavigator{

...

Tabstylename: "Mytabs";

...

}

And then define a newmytabsStyle to set the tab style.

settings in Mytabs

CornerradiustabCorner Circle angle Each tab's corner circle angle from 0~20 Note is not the tab body content Corner

FillcolorstabFill gradient unselected tab fill gradient this property to set 2 colors, gradient start color and gradient end color, separated by commas in the middle

FillalphastabFill Opacity transparency unselected tab fill transparency This property sets 2 values, gradient start color transparency and gradient end color transparency, separated by commas in the middle, values from 0.00~1.00

BackgroundcolortabBackground Color The selected tab applies the back color

BackgroundalphatabBackground color transparency values from 0.00~1.00

BordercolortabBorder color

Textrollovercolortab text color when the mouse passes tab

AccordionComponent Style Properties

HeaderheightLabel header height accordion the height of each label header in the Assembly

dropshadowenabledShow projected true and False2 properties

shadowdistanceThe size of the projection from the 0~20

shadowdirectionProjection Direction Leftrightcenter

DropshadowcolorThe color of the projection

BorderStyleThe style of the border Nonesolid

borderthicknessThe thickness of the border from the 0~20

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

fillcolorsUnchecked 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

FillalphasUnchecked label header fill color transparency corresponds to fillcolors setting 4 transparency values from 0.00~1.00

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

Color Label Header text

TextrollovercolorText color when the mouse passes the label header

TextselectedcolorText color when the mouse clicks on the label header

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

opendurationThe speed value of opening a new label from 0~1000

Linkbar Component Style properties

HorizontalGapHorizontal-directional interval values between links from 0~20

SeparatorwidthThe thickness of the spacing line between the lines of each link the value of the thickness from 0~20

SeparatorcolorThe color of the spacer line

BorderstylelinkbarThe Border style Nonesolid

bordercolorBorder color

borderthicknessBorder thickness value from 0~20

CornerradiusBorder Circle angle value from 0~20

dropshadowenabledShow border projections true and false

shadowdistanceProjection size values from 0~20

shadowdirectionProjection Direction Leftcenterright

DropshadowcolorDrop Shadow Color

BackgroundColorBackground color

BackgroundalphaBackground color transparency values from 0.00~1.00

color link text colors

DisabledcolorSelected link text color

RollovercolorBackground color When the mouse is over an unchecked link

TextrollovercolorText color when the mouse passes an unchecked link

SelectionColorBackground color When the mouse clicks on an unchecked link

TextselectedcolorText color when the mouse clicks on an unchecked link

Applicationcontrolbar Component Style Properties

CornerradiusBorder Circle angle value from 0~20

dropshadowenabledShow border projections true and false

shadowdistanceProjection size values from 0~20

DropshadowcolorDrop Shadow Color

BorderStyleBorder Style Defaultnonesolid

bordercolorBorder color

borderthicknessBorder weight values from 0~20

BackgroundColorBackground color

fillcolorsFill gradient This property to set 2 colors, gradient start and gradient end colors, separated by commas in the middle

FillalphasFill color Transparency This property sets 2 transparency gradient start and gradient end color transparency

HighlightalphasHigh-light transparency 2 values, in the middle of a comma-separated before a high light brightness, from 0.00~1.00, for 1 o'clock brightest, for the 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)

BackgroundColorBackground color

List Component style properties

BackgroundColorBackground color

BackgroundalphaBackground color transparency values from 0.00~1.00

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

RollovercolorValid when the background color userollover is true when the mouse passes through each item

TextrollovercolorValid when the text color Userollover to True when the mouse passes through each item

alternatingitemcolorslistMedium 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

SelectionColorThe background color of the selected item

TextselectedcolorThe text color of the selected item

textindentOption text Indent distance

selectiondurationSelected item Gradient speed selected item background color changed to

SelectionColorSets the speed at which the values in the gradient effect are to be changed from the 0~5000 value, the slower the gradient

BorderStyleBorder Style None/solid/...


bordercolorBorder color

borderthicknessBorder weight values from 0~20

dropshadowenabledShow projected true and False2 properties

shadowdistanceWhen the projection size dropshadowenabled is true, the valid values are 3 properties from the 0~20,shadowdirection projection direction leftrightcenter

DropshadowcolorThe color of the projection

DataGridComponent Style Properties

BackgroundColorBackground color

BackgroundalphaBackground color transparency values from 0.00~1.00

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

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

HorizontalGridlinesWhether the horizontal divider appears to show the horizontal divider line between each row TrueFalse

HorizontalgridlinecolorHorizontal separator Line Color HorizontalGridlines valid when True

VerticalGridlinesWhether a vertical divider is displayed displays a horizontal divider between each row TrueFalse This property is only valid for dividers in the content, and the header's separator line is the default

VerticalgridlinecoloR Vertical Separator Line color Verticalgridlinecolor valid when True

UserolloverWhether to implement the change effect when the mouse passes TrueFalse

RollovercolorValid when the background color userollover is true when the mouse is over a line

TextrollovercolorValid when the text color Userollover to True when the mouse passes over a line (this property appears to be invalid?)

Color Text Colors

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

SelectionColorBackground color of selected rows

textindentValues for each line of text indent from 0~30

Tree component Style properties

BackgroundColorBackground color

BackgroundalphaBackground color transparency values from 0.00~1.00

alternatingitemcolorsColor of interval Rows 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

UserolloverWhether to use the mouse to pass the effect of each row TrueFalse

RollovercolorValid when the background color of the mouse passes through each row userollover to True

TextrollovercolorValid when the text color of the mouse passes through each row userollover to True

borderthicknessThe thickness value of the border from the 0~20

Color Text Colors

SelectionColorThe background color of the selected row

TextselectedcolorText Color of selected row

textindentThe indent value of the text indent value text relative to the icon from the 0~50

IndentationThe indentation value for each level relative to the previous level is from the 0~50

opendurationTo open and close the contents of this layer from 0~1000

selectiondurationThe background color of the selected level gradient speed from 0~3000

TextInput Component Style properties

BackgroundColorBackground color

BackgroundalphaBackground color transparency values from 0.00~1.00color text color

BorderStyleBorder Style nonesolidinset outset

bordercolor Border Color

borderthicknessThe effective value of the border thickness borderstyle to solid is from 0~20

CornerradiusThe valid value of the border circle angle BorderStyle to solid is from 0~20

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

dropshadowenabledWhether to display projection TrueFalse

shadowdirectionProjection Direction Leftcenterright

shadowdistanceProjection size values from 0~20

DropshadowcolorDrop Shadow Color

NumericstepperComponent Style Properties

BackgroundColorBackground color

BackgroundalphaBackground color transparency values from 0.00~1.00

BorderStyleBorder Style Nonesolidinset



fillcolorsGradient fill color for up and down keys This property is set to 4 colors
Values: Gradient start color, gradient end color, gradient start color when mouse passes, gradient end color when mouse passes

FillalphasFill transparency for Fillcolors property This property sets 4 transparency gradient start color transparency gradient end color Transparency gradient start color transparency when mouse passes the gradient end color transparency value from the 0.00~1.00

HighlightalphasHigh-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

dropshadowenabledWhether to display projection TrueFalse

shadowdirectionProjection Direction Leftcenterright

shadowdistanceProjection size values from 0~20

DropshadowcolorDrop Shadow Color

ComboBoxComponent style properties color colors of text in all options

bordercolorBorder color

CornerradiusBorder Circle angle value from 0~20

fillcolorsGradient fill color for selected items This property is set to 4 colors

Color values: Gradient start color, gradient end color, gradient start color when the mouse passes, gradient end color when the mouse passes

FillalphasFill transparency for Fillcolors property This property sets 4 transparency gradient start color transparency gradient end color Transparency gradient start color transparency when mouse passes the gradient end color transparency value from the 0.00~1.00

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

BackgroundalphaBackground transparency values for drop-down boxes from 0.00~1.00

alternatingitemcolorsInterval background color of options in dropdown box This property sets 2 colors, the background color of a row, and the background color of the next line

UserolloverWhether the Drop-down box has the effect of using the mouse TrueFalse

RollovercolorValid when the background color userollover is true when the mouse is selected in the dropdown box

TextrollovercolorValid when the text color Userollover to True when the mouse is selected in the dropdown box

SelectionColorThis option background color when you click a line of options in the dropdown box

TextselectedcolorThis option text color when you click a line of options in the Drop-down box

opendurationOpen the Drop-down box with a speed value from 10~2000

closedurationTurn off the speed value of the Drop-down box from 10~2000

checkbox Component style properties (includes radio and multiple selections)

bordercolorBorder color

ColorText color

TextrollovercolorText color when the mouse is over the selection box

TextselectedcolorText color when the mouse clicks on the selection box

fillcolorsBackground fill color for a 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

FillalphasFill transparency for Fillcolors property This property sets 4 transparency gradient start color transparency gradient end color Transparency gradient start color transparency when mouse passes the gradient end color transparency value from the 0.00~1.00

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

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

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

ThumboffsetThe distance between a cursor and a ruler in a scale the cursor is below the ruler when the value is -50~50 negative

From:

Http://bbs.airia.cn/Design/thread-2652-1-1.aspx