What is the basic format of css rules

The basic format of css rules is "selector {attribute: attribute value;}". "Selector" is used to tell the browser which objects in the page the style wrapped by "{}" will act on. "Attribute" is the set style option provided by CSS. "Attribute value" is the parameter used to display the effect of the attribute.

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

Style is the smallest syntax unit of CSS. Each style contains two parts: selector and declaration (rule), as shown in the figure below.

1) Selector

The selector tells the browser which objects in the page the style will act on. These The object can be a certain tag, all web page objects, specified class or id value, etc. When the browser parses this style, it renders the display effect of the object based on the selector.

2) Declaration

You can add one or countless declarations. These declarations tell the browser how to render the object specified by the selector.

The statement must include two parts: attributes and attribute values, and use a semicolon to mark the end of a statement. The semicolon can be omitted for the last statement in a style.

All declarations are placed within a pair of curly braces { }, and then the entire declaration is placed immediately after the selector.

3) Property

Properties are set style options provided by CSS. The attribute name consists of one or more words, and multiple words are connected by hyphens. This can intuitively represent the effect of the attribute to be styled.

4) Attribute value (Value)

The attribute value is used to display the parameters of the attribute effect. It includes numerical values ​​and units, or keywords.

[Example 1] Define the web page font size to be 12 pixels and the font color to be dark gray, then you can set the following style.

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

Multiple styles can be juxtaposed together without considering how to separate them.

[Example 2] Define the background color of the paragraph text to be purple, then you can define the following style based on the above style.

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

Since the CSS language ignores spaces (except for spaces inside the selector), spaces can be used to format the CSS source code. The above code can be beautified as follows:

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

In this way It is clear at a glance when reading the css source code, which is easy to read and easier to maintain.

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

[Example 3] The following comments can be made for the above style.

body {  /*页面基本属性*/
    font-size: 12px;
    color: #CCCCCC;
}
/*段落文本基础属性*/
p {
    background-color: #FF00FF;
}

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the basic format of css rules. For more information, please follow other related articles on the PHP Chinese website!