Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the basic formats of css rules". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the basic formats of css rules.

The basic format of the css rule is "selector {property: property value;}". The "selector" is used to tell the browser which objects the style of the "{}" package will act on on the page. "property" is a set style option provided by CSS, and "property value" is a parameter used to display the effect of the property.

The operating environment of this tutorial: windows7 system, CSS3 version, Dell G3 computer.

The style is the minimum syntax unit of CSS, and each style contains two parts: a selector and a declaration (rule), as shown in the following figure.

1) Selector (Selector)

The selector tells the browser which objects on the page the style will act on. These objects can be a tag, all web page objects, specify class or id values, and so on. When parsing this style, the browser renders the display of the object according to the selector.

2) statement (Declaration)

Declarations can be added by one or countless, which tell the browser how to render the object specified by the selector.

The declaration must consist of two parts: the attribute and the attribute value, and use a semicolon to identify the end of a declaration, and the last declaration in a style can be omitted.

All declarations are placed in a pair of curly braces {}, and then the whole is immediately behind the selector.

3) attribute (Property)

Property is a set styling option provided by CSS. An attribute name consists of one or more words, which are connected by a hyphen. This can visually represent the effect of the style that the property wants to set.

4) attribute value (Value)

The parameter that the property value uses to display the effect of the property. It includes numeric values and units, or keywords.

[example 1] if you define a web page font size of 12 pixels and a dark gray font color, you can set the following style.

Body {font-size: 12px; color: # CCCCCC;}

Multiple styles can be juxtaposed without thinking about how to separate them.

[example 2] if you define the background color of paragraph text as purple, you can define the following style based on the above style.

Body {font-size: 12px; color: # CCCCCC;} p {background-color: # FF00FF;}

Because the CSS language ignores spaces (except for spaces inside the selector), you can use spaces to format the CSS source code, and the above code can be beautified as follows:

Body {font-size: 12px; color: # CCCCCC;} p {background-color: # FF00FF;}

This makes it clear at a glance when reading the css source code, making it easier to read and easier to maintain.

Any language requires comments, which HTML uses for annotations, while CSS uses / * comment statements * / for annotations.

[example 3] the above style can be commented as follows.

Body {/ * basic properties of the page * / font-size: 12px; color: # CCCCCC;} / * basic attributes of paragraph text * / p {background-color: # FF00FF;} so far, I believe you have a deeper understanding of "what are the basic formats of css rules". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.