Standard webpage creation tips: Usage of CSS overall layout declaration

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.