Shulou(Shulou.com)06/02 Report--

This article is to share with you about how the DIV+CSS code optimization scheme is, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

If you understand the concept of DIV+CSS code optimization, let's share it with you. First, let's take a look at the function and significance of CSS code optimization.

DIV+CSS code optimization scheme

The function and significance of CSS Code Optimization

1. Reduce the consumption of web page bytes. Under the same conditions, shortening the time for browsers to download CSS code is equivalent to speeding up the opening of web pages.

2. Easy to maintain. Simplifying and standardizing CSS code reduces CSS code and facilitates future maintenance

3. Make your CSS code more professional.

CSS optimization method-where CSS code needs to be optimized

1. Abbreviate CSS code.

2. Arrange the CSS code.

3. Share the same CSS selector for attribute extraction.

4, separate the page color and background setting style (larger sites need to pay attention to).

5. Organized CSS code.

An example is given to explain the above DIV+CSS optimization methods.

1. Abbreviate CSS code

CSS attribute codes are commonly abbreviated as follows:

Background (background attributes-CSS manual learn more about background manual)

Before optimization

Background-color:#FFF; corresponding attribute is background color white background-image:url (DIVCSS5.gif); corresponding attribute is setting DIVCSS5.gif picture as background background-position:bottom; background picture is at the bottom background-repeat:repeat-x; background is repeated extension according to X coordinate (Abscissa)

The above CSS code can be abbreviated to

Background:#FFFurl (DIVCSS5.gif) repeat-xbottom

Explanation: the background color is white and the DIVCSS5.gif picture is repeated in X coordinates with the icon lower. Unoptimized CSSbackground properties same

Margin (external padding attribute-CSS manual learn more about margin manual)

Before optimization

Margin-left:5px; means left 5px margin-right:6px;, right 6px margin-bottom:7px;, bottom extension, 7px margin-top:8px; top extension, 8px.

Optimization abbreviated to

Margin:8px6px7px5px

The meaning and attribute effect are the same as above, you can learn more about the introduction of CSSmargin

Padding (internal padding attribute-CSS manual to learn more about padding manual)

Before optimization

Padding-left:5px; means left white 5px padding-right:6px; right white 6px padding-bottom:7px; bottom (bottom) white 7px padding-top:8px; top (top) white 8px

Optimization abbreviated to

Padding:8px6px7px5px

The meaning and attribute effect are the same as above, you can learn more about the introduction of CSSpadding

Border (Border Properties-CSS manual for more information on border manual)

Before optimization

Border-color:#000000; border color is black border-style:solid; border style is solid border-width:1px; border width is 1px

Can be abbreviated as

Border:1pxsolid#000000

The meaning is the same as before optimization.

If you only set the left border to 1px, the solid line CSS code with black color is as follows

Border-left:1pxsolid#000000

Font (font properties-CSS manual to learn more about fonts manual)

The properties of the font are as follows:

Font-style:italic; font style font-variant:small-caps; font variant font-weight:bold; font bold font-size:12px; size is 12px line-height:22px; line height is 22px font-family: "bold" font is boldface

Can be abbreviated to one sentence: font:italicsmall-capsbold12px/22px "boldface"

Note that if you abbreviate font definitions, at least define font-size and font-family values to understand CSSfont techniques.

2. Arrange the CSS code.

Usually our code is arranged as follows

This will take up a lot of space and return space in CSS files, which also takes up 12 lines of CSS file space.

I suggest you rewrite it as

/ * CSSwww.DIVCSS5.com example illustration * /-here is the CSS comment .yangshi {font-size:12px;border:1pxsolid#000000;padding:5px;} .yangshi2 {font-size:12px;border:1pxsolid#000000;padding:5px;}

This will save spaces and carriage returns, as well as the number of CSS file lines, thereby saving code file bytes.

3. Share the same CSS selector for attribute extraction.

What to understand is that if there are two parts of CSS attributes such as width and height font color are the same, and there is a little difference, at this time we need to extract everyone's same CSS style, naming a separate CSS attribute selector, thus saving CSS code.

Such as:

/ * CSSwww.DIVCSS5.comDIV+CSS example illustration * / .yangshi {font-size:12px;border:1pxsolid#000000;padding:5px;width:25px;} .yangshi2 {font-size:12px;border:1pxsolid#000000;padding:5px;width:50px;}

The yangshi and yanshi2 styles here have the same font size 12px, the same border, the same inner blanking, but different widths. At this time, we can extract the same part of them and re-create a new CSS selector and reuse.

The new CSS property selector is demonstrated as follows

.gongyong {font-size:12px;border:1pxsolid#000000;padding:5px;} .yangshi {width:25px;} .yangshi2 {width:50px;} so when calling CSS-learn about CSS introducing DIVCSS style DIVCSS style 2

This allows you to call the same CSS style, and then call different CSS attribute classes, the above examples can not show its advantages, but if there are a lot of code and many places such as the above characteristics, this will show its functional characteristics.

4, separate the page color and background setting style (larger sites need to pay attention to).

This point has the above third point with attribute extraction common CSS selector characteristics, but the difference, if the station is relatively large, you need to change a place to change the entire site page font color style, background pattern color, border color style.

At this time, we will need to be in the DIV+CSS development of the basic font style, background pattern color, borders and other colors extracted together or put into a CSS file, so that we can maintain and manage the basic style of the entire site.

5. Organized CSS code.

Structured CSS code means to sort out the CSS code, such as the CSS code selector styles in the control header, part, and bottom, put them together and separate them from other CSS codes.

For example, the CSS code in the header is separated from each line of the content area CSS code.

As the above "toubu" and "dibu" can be distinguished by row separation, the advantage is that it is convenient to maintain later, and it is easy to identify changes and maintenance.

The above is what the DIV+CSS code optimization scheme is like, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.