What are the three components of css syntax?

css syntax consists of three parts: selector, property, and value. The selector can tell the browser which parts of the page the style will apply to. Attributes are the set style options provided by CSS. The attribute value is used to display the parameters of the attribute effect; the syntax is "selector {attribute: attribute value}".

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

css syntax consists of three parts: selector, property, and value.

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

• Property is a set style option 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.

• Value (value) refers to the value of the attribute, a parameter used to display the effect of the attribute. It includes numerical values ​​and units, or keywords.

The selector is usually the HTML element or tag you wish to define, the property is the attribute you wish to change, and each property has a value. Properties and values ​​are separated by colons and surrounded by curly braces, thus forming a complete style declaration:

selector {property: value}
选择器{属性:属性值}

Example:

body {color: blue}

The above line of code The function is to define the text color within the body element as blue. In the above example, the body is the selector and the part enclosed in curly braces is the declaration. The declaration consists of two parts: attributes and values. Color is the attribute and blue is the value.

Multiple declarations:

Tip: If you want to define more than one declaration, you need to separate each declaration with a semicolon. The example below shows how to define a centered paragraph with red text. The last rule does not require a semicolon, because the semicolon is a delimiting symbol in English, not a closing symbol. However, most experienced designers will add a semicolon at the end of each declaration. This has the advantage of minimizing the possibility of errors when you add or subtract declarations from existing rules. Like this:

p {text-align:center; color:red;}

You should describe only one attribute per line to increase the readability of the style definition, like this:

p {
text-align: center;
color: black;
font-family: arial;
}

Space and case sensitive

Most style sheets contain more than one rule, and most rules contain more than one declaration. Multiple declarations and the use of whitespace make the style sheet easier to edit:

body {

color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

Whether or not you include whitespace does not affect how CSS works in the browser, similarly, with XHTML Differently, CSS is not case sensitive. There is one exception: when it comes to working with HTML documents, class and id names are case-sensitive.

CSS Advanced Syntax: Grouping of Selectors

You can group selectors so that grouped selectors can share the same declaration.

Use commas to separate the selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green.

h1,h2,h2,h3,h5,h6 {
color: green;
}

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the three components of css syntax?. For more information, please follow other related articles on the PHP Chinese website!