Learn CSS: Optimize our CSS style sheet code

css| Style Sheet | optimization

Recently read a lot of netizens made skin CSS file, found that there are many redundant code. Let me tell you about how to clear these redundant code to make your CSS file more concise.

　　First, margin, padding properties

Referring to the relevant information, we can know that the meaning of margin and padding is the external margin and the internal filling distance, in many users of CSS, the two attributes of the redundant code is the most appear. For example: margin:0px, you can look at their own CSS file, whether a lot of margin:0px, some of them do not need, you can try to delete it, of course, not all margin:0px are not used, the same, padding:0px the same.

In addition, the order of the attributes in margin and padding is: upper right and lower left, just remember that it's clockwise. Let's take a look at these two pieces of code:

margin:0px 0px 0px 10px;
margin-left:10px;

In fact, their role is the same, the following is an abbreviation, the use of abbreviations we can reduce the CSS code, and make it easier to read. (padding is the same.) ）

　　Ii.!important; attribute

!important is the syntax defined by CSS1 to increase the application precedence of the specified style rule. IE does not support this syntax, and other browsers are supported by this, we can learn that the code set priority will not be executed by IE. So we can add CSS style to important, so that it can be distinguished from IE and Firefox and other browsers.

Last time I looked at Miles's CSS code, I saw this sentence:

height:50px!important;height:50px;

Here is superfluous, we can write this: height:50px is enough, this error when I just started to create CSS has also appeared.

　　Three, text-align, font style

I will not say the role of these two styles, but the two styles in many users of the CSS also has a lot of redundancy. Let me give you an example, the definition of a layer is as follows:

<div id= "Main" >
<div id= "Body1" >
<div id= "Content1" >
</div>
</div>
<div id= "Body2" >
</div>
<div>

The CSS file is as follows (error example):

#main {width:500px;text-algin:left;font-size:12px;color: #000000;}
#body1 {width:500px;text-algin:center;font-size:12px;color: #FF0000;}
#content {text-algin:left;font-size:12px;color: #000000;}
#body2 {text-algin:left;font-size:12px;color: #000000;}

As you can easily see from the code above, there are a lot of redundant code, and now we're going to write the right code:

#main {width:500px;text-algin:left;font-size:12px;color: #000000;}
#body1 {text-algin:center;color: #FF0000;}
#content {width:300px;text-algin:left;color: #000000;}
#body2 {}

The above is the correct code, because everyone in the production of skin, the Pjblog div structure is not clear, this error will occur.

　　Iv. Use of Display:none

The role of Display:none is to make the defined layer not appear. Let's take a look at this code again:

#blogTitle {font-size:0px;margin:10px 3px 3px 40px;height:20px;color: #FFC1E6;d Isplay:none}

Do you think that this is a bit superfluous, yes, since the setting is not shown, why should we retain those unnecessary styles? In this case I knew that the skin was changed from someone else's.

　　Five, or margin and padding.

Let me give you an example of how the definition of the layer is the same as the following is the definition of CSS (error example):

#main {margin:5px 0px 5px 0px;}
#body1 {margin:12px 0px 10px 0px;}
#content {margin:8px 0px 2px 0px;}
#body2 {margin:10px 0px 15px 0px;}

Now we're going to write the right style:

#main {}
#body1 {margin-top:17px;}
#content {margin:8px 0px 2px 0px;}
#body2 {margin:20px 0px;}

Here we need to make a sample to understand, first #main{margin:5px 0px 5px 0px; is not necessary, he simply defined is the entire page of the top and bottom margin. (It is necessary to write in a certain situation) we can also set it by defining the top margin of the #body1 and the bottom margin of the #body2, so that #body1{margin-top:17px is available.} and #body2{margin:20px 0px;} (This is defined as the #body2 of the upper and lower margins of 20px, the left and right margins of 0px, is also abbreviated as a way.) ）

In the same way, we can omit the bottom margin of the #body1, define the top margin in the #content layer, and then we need to figure out the nesting relationship of the layer, otherwise we'll get an error.