What are the basic methods for declaring Flex CSS styles

This article introduces the knowledge of "what are the basic methods of declaring Flex CSS style". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS in Flex

First of all, for people with a background in Web design, it is most important to understand that Flex CSS styles do not follow the same conventions as W3CCSS regulations. The hyphen (-) used to separate words in W3CCSS version 2.0 is not used as part of the code convention within the Flex implementation. In contrast, the Flex implementation of CSS uses hump case. For example, the vertical-center pair in the W3CCSS2 specification is equal to the verticalCenter in FlexCSS.

If you've already programmed in a programming language that uses hump case, this is easy to get used to. The good news is that most of what is available within the CSS2.0 specification is also available within the FlexCSS implementation. Moreover, the Flex implementation of CSS is a significant extension of the CSS2.0W3C standard, providing additional style attributes that are unique to Flex components.

Maintaining styles: components and Flex CSS style properti

Before you start creating Flex CSS stylesheets, I recommend that you first consider how you want to implement styles. For simplicity, I show you the basic methods of four declaration styles:

◆ passes the class name of the component. Style the component by using its class name as the style name:

TitleWindow {borderColor:#f7f7f7; borderAlpha:1; borderThicknessLeft:0; borderThicknessTop:0; borderThicknessBottom:0; borderThicknessRight:0; cornerRadius:0; headerHeight:0; highlightAlphas:1,1; headerColors:#f7f7f7,#f7f7f7; footerColors:#f7f7f7,#f7f7f7; backgroundColor:#f7f7f7; dropShadowEnabled:true;}

◆ passes a unique style name. Declare the style by using a unique Flex CSS style name. Be sure to use a period before the name and use the hump case convention:

.altText

{fontFamily:TVNordEFCEOP-RegularCon; fontSize:18; color:#FFFFFF;}

◆ takes a component plus a style name. When multiple designs are required for the same component, which is common for applications with multiple view states, you can set the style name of the component. This approach also ensures that only specific components can be assigned to specific styles:

Text.bigYellowText {color:#EFB526; fontSize:36; fontWeight:Bold;}

◆ passes through the global selector. A global selector is a special selector that can affect every component in an application that contains a property set. For example, I can set the cornerRadius style property to 4 for all display object components that contain cornerRadius style attributes, as follows:

Global {cornerRadius:4;}

Flex CSS style priority

Although the global selector basically sets the default value of a property, this value can be easily overridden. For example, if I set the cornerRadius property of the Button component to 0 either inline (inline) or in my CSS file, it will be better than the global default setting of 4 that I have specified; therefore, all my Button components will contain a cornerRadius property with a value of 0. Also, I'll override the global setting of 4 and the Button setting of 0 by creating an additional style:

This is the end of Button.altCornersButton {cornerRadius:8;} "what are the basic methods of declaring Flex CSS styles". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!