CSS code optimization (reprint)

Essentials 1:css Code optimization function and significance

1, reduce the consumption of Web page bytes. Under the same conditions to shorten the browser to download CSS code time, equivalent to speed up the page opening speed;
2, easy to maintain. Simplify and standardize the CSS code to reduce the CSS code, easy to maintain later;
3, let yourself write CSS code more professional.

Important 2:css Optimization Method-where CSS code needs to be optimized

1, abbreviated CSS code.
2. Arrange CSS code.
3, the same attribute extraction common CSS selector.
4, separate the page color and background settings style (larger sites need attention).
5. Organize CSS code.

The example explains the above several div CSS optimization method

First, the abbreviation CSS code
Commonly needed abbreviations for CSS Property code are as follows:
Background (Background property)
Before optimization
The corresponding property is the background color is white
Background-image:url (divcss5.gif); The corresponding property is set divcss5.gif picture as background
Background-position:bottom; Background image is at the bottom
Background-repeat:repeat-x; Background repeats by x coordinate (horizontal axis)

The above CSS code can be abbreviated to
Background: #FFF URL (divcss5.gif) Repeat-x bottom;
Explanation: The background color is white, and the divcss5.gif picture is repeated in x-coordinate, and the icon is under. The CSS Background property is the same as not optimized

Margin (outer filler property)
Before optimization
margin-left:5px; It means 5px on the left.
margin-right:6px; 6px on the right
margin-bottom:7px; Bottom extension 7px
margin-top:8px; Top extension 8px

Optimization shorthand for
margin:8px 6px 7px 5px; Meaning and attribute effect ibid.

Padding (inner filler property)
Before optimization
padding-left:5px; Meaning for left filler 5px
padding-right:6px; Right filler 6px
padding-bottom:7px; Bottom (lower) filler 7px
padding-top:8px; Top (upper) filler 8px

Optimization shorthand for
padding:8px 6px 7px 5px; Meaning and attribute effect ibid.

Border (border property)
Before optimization
Border-color: #000000; Border color is black
Border-style:solid; Border Style as solid line
border-width:1px; Border width is 1px

can be shortened to
border:1px solid #000000; before optimization
If you only set the left border to 1px, the color is black solid line CSS code is as follows
border-left:1px solid #000000;

Font (Fonts property)
Before optimization
Font-style:italic; Font style
Font-variant:small-caps; Font variants
Font-weight:bold; Font Bold
font-size:12px; Word size is 12px
line-height:22px; Word line height is 22px
font-family: "Blackbody" font is bold

can be abbreviated as a sentence:

Font:italic small-caps Bold 12px/22px "Blackbody";

Second, CSS reuse optimization
Here is the main introduction of CSS code common attribute extraction to achieve saving code, maintenance convenience, as follows:

1 . Yangshi_a{width:100px;Height:20px;text-align: Left;float: Left;font-size:24px;}2 . Yangshi_b{width:100px;Height:20px;text-align: Right;float: Left;font-size:24px;}

They all have the same height, width, float, text size, and only the content is left right (you may need to know the CSS is centered), we can extract their same attributes
After optimization:

1 . Yangshi_a,. Yangshi_b { width:100px; height:20px; text-align:left; float:left; font-size:24px;} 2 . Yangshi_b {text-align:right;}

Pay attention to observe the above code, you understand, do not understand the CSS forum to ask questions.

When we write CSS, we often encounter let a picture or a layout can not exceed set a certain height range value, sometimes also need to set a minimum height value, to achieve alignment and other styles.

Next for everyone to summarize how to solve IE6 does not support max-height and does not support the Max-height method .

Directory
IE6 Support Max-height Solution
IE6 Support Min-height Solution
IE6 supports Max-height and supports min-height methods

1, IE6 support Max-height Solution
IE6 supports maximum height resolution of CSS code:

1 . Yangshi {max-height:1000px; _height:expression_r ((document.documentelement.clientheight| | document.body.clientHeight) <1000? " 1000px ":"); overflow:hidden;}

Description: max-height:1000px; This is IE6. The maximum range height is supported by other brand browsers. and _height:expression_r ((document.documentelement.clientheight| | document.body.clientHeight) <1000? " 1000px ":"); overflow:hidden; let IE6 support max-height instead of CSS code, but the effect is the same as other versions of the browser.

Make all browsers support the full version of Max-height CSS style code:

1 . Yangshi {2    maxheight:1000px;  3    _height:expression_r ((document.documentelement.clientheight| | document.body.clientHeight) <1000? " 1000px ":"); 4      Overflow:hidden; 5 }

The 1000 and 1000px here are the values you need, note that the 3 values are the same. Let IE6 support maximum height max-height don't forget to add overflow:hidden;

2, IE6 support Min-height solution –ie6 Support Minimum Height solution

CSS code:

. Yangshi {min-height:1000px; _height:expression_r ((document.documentelement.clientheight| | document.body.clientHeight) >1000? " 1000px ":" ");}

Description: min-height:1000px; This is IE6. Other brand browsers support a minimum range of heights. and _height:expression_r ((document.documentelement.clientheight| | document.body.clientHeight) >1000? " 1000px ":"); let IE6 support min-height instead of CSS code, but the effect is the same as other versions of the browser.
Let all browsers support Min-height CSS style code, complete:
Min-height:1000px;_height:expression_r ((document.documentelement.clientheight| | document.body.clientHeight) >1000? " 1000px ":"); The 1000 and 1000px here are the values you need, note that the 3 values are the same.

3, IE6 support Max-height and Support Min-height method
CSS code:

. Yangshi {max-height:620px; min-height:40px; _height:expression_r (This.scrollheight > 620?) "620px": (This.scrollheight < 40?) "40px": "Auto");}

IE6 support Max-height and support Min-height CSS code _height:expression_r (This.scrollheight > 620?) "620px": (This.scrollheight < 40?) "40px": "Auto"));
Description: The above code is to make the object's minimum height of 40px, the maximum height is 620px CSS style properties.

CSS Naming conventions
With the future trend from the current html4+css2.0 to the development of html5+css3.0 upgrade, now the CSS naming specification is very important, of course, the development of HTML 5+CSS 3.0 full compatibility will take at least 5-8 years , But now you can start with a bit of accumulation. html5+css3.0 fully compatible at least 5-8 years is how to get, can calculate from the IE6 to the present IE8 development, and now there are many users in the IE6 browser, IE6 has not been eliminated or used by Microsoft, From IE6 to now has been experienced for about 8 years, but would like to develop to html5+css3.0 each browser is compatible with at least 8 years of time .

CSS naming conventions Importance:

1, for the future html5+css3.0 development direction lay the foundation.
Now the name of the head, the bottom and so everyone is accustomed to use the header, footer to name, the final HTML call CSS style is both
This form, after which the html5+css3.0 standard will be used directly
Label to represent the head part, so for the future version upgrade specification has some advantages, although to achieve compatible html5+css3.0 browser is still early, but for DIV+CSS developers can first notice.

2, CSS naming specification can save team development time.
Especially in the team development site project, we standardize to produce a set of consensus CSS naming, will save development time and cost, if the development project DIV+CSS developers in the name of CSS, will give later programmer's interpretation inconvenience.

3, the CSS naming specification can be convenient for future maintenance.
Div+css after the development of the site project after the production, it is difficult to ensure that the future does not adjust and optimize, so that they do not own a set of CSS naming characteristics, will for their future maintenance inconvenience.

Summarize:
Whether considering team development, later maintenance, HTML5+CSS3 upgrades, the naming of the DIV CSS Development pseudo-class is very important.
Now usually we are in the HTML 4.0 and CSS 2.0 based on the development of DIV+CSS-compliant web site, as for the HTML 5+CSS 3.0 can understand, if you want to use at least for a few years, and so on, such as browser IE6-IE8 elimination can not be used, At this point we will make reasonable use of HTML 5+CSS 3.0.

10 sentences CSS Learning jingle (very useful):
First, IE border if not, it should be noted that the height setting has been forgotten;
second, the floating generation has the reason, if the parent layer contains live, immediately after floating to clear, the container naturally show therein;
three or three pixel text slow move don't panic, height set to help you busy;
four, compatible with each browsing must note that the default setting row height may be the killer;
Five, independent clear floating must be remembered, row height set no, high set 0, design effect and browse;
Six, the school layout must train of thought, the road with the layout principle of natural straight, easy to control the HTML, water layout less hack, code refreshing, compatible, friendly engine hi welcome.
Seven, all the labels have a source, but the default is different, span is infinite, no two-in-one and block-level, IMG more special, but also in compliance with the legal principle, the other is only the transformation of the different, A * number of the original, cascading style should be more practice, all things are law.
Eight, the picture link layout must be careful, the picture link text link If aligns, the padding and the vertical-align:middle to set, although the difference fine does not harm.
Nine, ie floating bilateral distance, please use display:inline arrest.
10, the list of horizontal layout, the list code must close, the gap from the need to remember.

Source:http://www.zhiqianduan.com/201.html