We should develop good coding habits. The overall CSS layout declaration provides a way to simplify our code and improve the running efficiency. Let's list common forms and add explanations. The purpose of the overall layout declaration is to make a general summary of the target, declare some identical or basically identical attributes and values, so as not to be separately defined in each tag in the subsequent code. If there are different attributes and values, redefine them later.
1. Configuration-based overall layout statement.
The code is as follows: |
Copy code |
*{ Margin: 0; Padding: 0; Font-size: 0.8em; ... }
|
This type of declaration is for the entire page. You can set common attributes of page elements. Instead of having to declare each element separately. The code above declares that the margin and padding are zero and the font size is 0.8em. Apply the declared attributes and values to all elements on the page. Unless the values of margin, padding, and font-size are defined again in the subsequent code, they are displayed according to this definition.
II. Label-based overall statement
The code is as follows: |
Copy code |
Body { Background: # fff; Font-family: Courier, "Courier New", monospace; } Or P { Background: # fff; Font-family: Courier, "Courier New", monospace; }
|
Such declarations target some xhtml labels. This statement applies if there is no special definition. We define the background color and font of the body. Therefore, all elements in the body apply to it unless defined again. The principles of section p are the same.
III. Group-based overall statement
The code is as follows: |
Copy code |
H1, h2, h3 {color: # 00f; font-weight: 100 ;}
|
This type of statement indicates the text color and font width of h1, h2, and h3. In practice, this is not necessarily the case. Maybe some xhtml elements of the class or id have the same attributes, and we can all group them for encoding. In some different places, you can just redefine it separately.