Involving optimization content:
①CSS style word abbreviation optimization
②Punctuation optimization
③Delete newline
④CSS reuse optimization
⑤ Summary of CSS code optimization abbreviations
1. CSS style attribute word code abbreviation optimization
(1) Abbreviation for border border: the width of the four borders is 1px, and the color is #000
border-color:#000; border-style:solid; border-width:1px
Can be abbreviated as:
border:1px solid #000;
(2) Abbreviations for upper, lower, left and right borders alone
Sometimes when only 3-sided borders are set, we can skillfully reduce the amount of code.
Suppose we don't set the top border, and the other 3 sides are 1px to achieve a black border.
Legacy code:
Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}
Shorthand:
Div{border:1px solid #000;border-top:0}
This achieves the same effect and greatly reduces the amount of CSS code
[Note:] border:1px solid #000; and border-top:none; cannot be reversed.
Because CSS reads from top to bottom and from left to right, it is meaningless to set the entire border style first, and then declare that the top and top borders are "none", that is, to achieve the style required by this instance. Therefore, there is no need to set the lower, left, and right separately, thereby saving a certain amount of code.
expand:
①border order: similar to margin and padding, upper right, lower left, for example:
margin: 10px 20px 30px 40px;/*Clockwise order: top right bottom left*/ margin: 20px;/*both up, down, left, and right are 20px*/ Maigin: 50px 80px 30px /*50px on the top, 80px on the left and 30px on the bottom*/
When there are three, it is up, left and right, down.
(3) The commonly used style attributes of CSS background, including setting a background color separately, setting the background as an image separately, setting whether the background image is repeated separately, whether the repetition is all repeated or repeated according to X horizontal or Y vertical. Next, we introduce the common abbreviations and attention of background background styles.
①The background optimization of setting the background one color separately
background-color:#CCC
optimized to:
background:#CCC
②The background is a picture, and the X is repeated horizontally and tiled
background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:repeat-x
Shorthand:
background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0;
③The background is a picture, and Y is repeated vertically and tiled
background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:repeat-y
The CSS shorthand is optimized to:
background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0;
④The background is a picture, and the CSS compression is not repeated and tiled
background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:no-repeat
Shorthand:
background:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) no-repeat 0 0;
⑤ The background is black, and the picture is repeated horizontally to X
background-color:#CCC;background-image:url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif); background-position:0 0; background-repeat:repeat-x;
Abbreviation merge: pay attention to the order of colors and pictures.
background:#CCC url(http://www.divcss5.com/img201207/divcss5-logo-2012.gif) repeat-x 0 0;
(4) font abbreviation
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
Can be abbreviated as:
font:12px/12px Arial, Helvetica, sans-serif;
2. Punctuation optimization
(1) Delete extra space characters
When we often write CSS code, there will be more html spaces between CSS style words. We can use software to quickly delete redundant space characters after developing CSS code.
(2) Remove the last semicolon of each selector
example:
div{float:left;width:100px;height:100%;}
.divcss5{float:left;width:100px;height:100px;}
After removing the trailing semicolon:
div{float:left;width:100px;height:100%}
.divcss5{float:left;width:100px;height:100px}
Third, delete the newline
Delete spaces and newlines, let the code be squeezed together, and the shortcut key can be done
Fourth, CSS reuse optimization
The main introduction here is the common attribute extraction of CSS code to save code and facilitate maintenance. CSS examples are as follows:
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
After observation, it can be found that they all have the same height, width, float, and text size, and only the content is different from left to right, then we can extract their same attributes
After optimized compression:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }
[Note:] The order of the two cannot be reversed. The css style is read from top to bottom and left to right.
Five, CSS code optimization abbreviation summary
According to the above optimization abbreviations, you can compress your CSS code, while reducing unnecessary bytes, spaces, and semicolons. By abbreviating commonly used CSS codes, you can greatly solve the problem of compressing CSS codes.