Tips for CSS overall layout Declaration

Source: Internet
Author: User

We should develop good coding habits. The overall CSS layout is declared as ours. Code It provides a way to simplify and improve operation 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.

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

Body {
Background: # FFF;
Font-family: courier, "Courier New", monospace;
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

H1, H2, H3 {color: # 00f; font-weight: 100 ;}< br> such statements indicate the text color and font bold 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. For example, in the refreshing CSS form with small icons to design this Id = 392. This type of declaration is used.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: and provide relevant evidence. A staff member will contact you within 5 working days.