Getting started: CSS basic syntax and usage

1. Basic syntax
The definition of CSS consists of three parts: selector, properties, and value ).
The basic format is as follows:
Selector {property: value}
(Selector {property: value })
The selector can be in multiple forms. Generally, you need to define the HTML tag of the style, such as BODY, P, TABLE ......, You can use this method to define its attributes and values. The attributes and values are separated by colons:
Body {color: black}
The selector body refers to the page body. color is the attribute that controls the text color, and black is the color value. In this example, the text in the page is black.
If the attribute value is composed of multiple words, quotation marks must be placed on the value. For example, the font name is often a combination of several words:
P {font-family: "sans serif "}
(Define the paragraph font as sans serif)
To specify multiple attributes for one selector, use semicolons to separate all attributes and values:
P {text-align: center; color: red}
(The paragraphs are arranged in the center, and the text in the paragraphs is red)
To make the style sheet you define easy to read, you can use the branch writing format:
P
{
Text-align: center;
Color: black;
Font-family: arial
}
(The section is arranged in the center, the text in the section is black, and the font is arial)
2. Select a contact group
You can combine the delimiters of the same attributes and values to separate the delimiters with commas (,) to reduce repeated style definitions:
H1, h2, h3, h4, h5, h6 {color: green}
(This group contains all title elements, and the text of each title element is green)
P, table {font-size: 9pt}
(The text size in paragraphs and tables is 9 characters)
The effect is equivalent:
P {font-size: 9pt}
Table {font-size: 9pt}
3. Class selector
You can use class delimiters to define different styles for the same element classification. When defining class delimiters, add a dot before the name of the custom class. If you want two different paragraphs, one of which is aligned to the right and the other is centered, you can first define two classes:
P. right {text-align: right}
P. center {text-align: center}
Then you can add the class parameter that you defined in HTML tags to different paragraphs:
<P class = "right">
This section is aligned to the right
</P>
<P class = "center">
This section is arranged in the center.
</P>
Note: the class name can be any English word or a combination of numbers and numbers starting with English. Generally, it is briefly named based on its functions and effects.