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

Editor to share with you how to optimize the CSS code, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Introduction to div+css Code Optimization Scheme-css Code Optimization

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 is white

Background-image:url (.gif); the corresponding property is to set the .gif picture as background

The background-position:bottom; background picture is at the bottom.

Background-repeat:repeat-x; background extends repeatedly according to X coordinate (Abscissa)

The above CSS code can be abbreviated to

Background:#FFF url (.gif) repeat-x bottom

Unoptimized css background properties same

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

Before optimization

Margin-left:5px; means 5px on the left.

Margin-right:6px; to the right 6px

Margin-bottom:7px; bottom extension 7px

Margin-top:8px; Top extension 8px

Optimization abbreviated to

Margin:8px 6px 7px 5px; the meaning and attribute effect are the same as above. You can learn more about css margin introduction.

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

Before optimization

Padding-left:5px; means left blanking 5px.

Padding-right:6px; right blanking 6px

Padding-bottom:7px; bottom (bottom) whitening 7px

Padding-top:8px; top (top) white 8px

Optimization abbreviated to

Padding:8px 6px 7px 5px; the meaning and attribute effect are the same as above. You can learn more about css padding introduction.

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

Before optimization

The border-color:#000000; border color is black.

The border-style:solid; border style is solid

Border-width:1px; border width is 1px

Can be abbreviated as

Border:1px solid # 0000000; 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:1px solid # 000000

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

The properties of the font are as follows:

Font-style:italic; font styl

Font-variant:small-caps; font variant

Font-weight:bold; font bold

Font-size:12px; word size is 12px

The line height of line-height:22px; is 22px

Font-family: "boldface" font is boldface

Can be abbreviated to one sentence: font:italic small-caps bold 12px/22px "boldface"

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

Know what px is.

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.

Www..com suggests that you rewrite it to

/ * CSS www..com example illustration * /-here is the css comment

.yangshi {font-size:12px;border:1px solid # 000000 / paddinglv 5px;}

.yangshi2 {font-size:12px;border:1px solid # 0000X paddingpurl 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:

/ * CSS www..com div+css example illustration * /

.yangshi {font-size:12px;border:1px solid # 000000 / paddinglv 5px; width:25px;}

.yangshi2 {font-size:12px;border:1px solid # 0000X paddingbank 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:1px solid # 0000X paddingVOL5px;}

.yangshi {width:25px;}

.yangshi2 {width:50px;}

In this way, when calling css-learn about the introduction of css

Div css style

Div css 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 all the content of this article "how to optimize CSS Code". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.