FLEX3 Application of CSS fully detailed manual (on)

After editing this flex CSS description, I basically have the edge of the crash. In some days in Airia under a lot of good things, today finally have free, also send a relatively good things to everyone, I believe that all the more need this flex under the CSS to use the method of detailed instructions (as if I this is not detailed enough, I hope you add).

Airia really is a good site, very happy to know you here.


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.