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

This article mainly explains "what are the DIV CSS optimization skills". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the DIV CSS optimization skills".

First, CSS style attribute word code shorthand optimization

1. Border (CSS frame) abbreviation:

1), the 4 borders are 1px in width and # 000 in color

Border-color:#000; border-style:solid; border-width:1px

It can be abbreviated as:

Border:1px solid # 000

2), shorthand for individual top, bottom, left and right borders

Left:

Border-left-color:#000; border-left-style:solid; border-left-width:1px

Abbreviation:

Border-left:1px solid # 000

On the right:

Border-right-color:#000; border-right-style:solid; border-right-width:1px

Abbreviation:

Border-right:1px solid # 000

Above:

Border-top-color:#000; border-top-style:solid; border-top-width:1px

Abbreviation:

Border-top:1px solid # 000

The following:

Border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

Abbreviation:

Border-bottom:1px solid # 000

3), skillful abbreviation frame

Sometimes we can skillfully reduce the amount of code when we only set a border of 3 sides.

If we do not set the top border, and the other 3 sides implement a black border for 1px.

Traditional code:

Div {border-right:1px solid # 000 borderhouse bottomvl 1px solid # 000borderMercure leftvl 1px solid # 000}

Abbreviation:

Div {border:1px solid # 000 borderhouse toplux 0}

This has the same effect and greatly reduces the amount of CSS code.

Learn more about css border optimization compression tutorials.

2. Padding (CSS padding) abbreviation:

1). Set the padding attribute in padding on four sides.

Traditional thinking:

Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px

Css padding can be abbreviated to:

Padding:4px 3px 5px 2px

2), set padding only for 3 sides

If we don't set padding on "up", set the padding property on the other three sides

Tradition:

Padding-left:2px;Padding-right:3px;Padding-bottom:5px

Abbreviation:

Padding:0 3px 5px 2px

3 the same situation on both sides:

Tradition:

Padding-left:2px;Padding-right:2px;Padding-bottom:2px

Abbreviation:

Padding:0 2px 2px 2px

3. Margin abbreviation

Margin is similar to the abbreviation padding.

1), the abbreviation for setting the distance between the four sides:

Tradition:

Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px

Abbreviation:

Margin:4px 3px 5px 2px

2), the four sides set the same distance abbreviation

Tradition:

Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px

Abbreviation:

Margin:2px

3), same up and down, same left and right

Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px

Abbreviation:

Margin:5px 2px

4. Background abbreviation

Background-color:#000

Can be abbreviated as

Background:#000;background-image:url (picture address)

It can be abbreviated as:

Background:url (picture address)

The more commonly used style attributes of CSS background include setting a background color, setting the background as the picture, setting whether the background picture is repeated, whether to repeat all or according to X horizontal or Y vertical repetition. Next, we introduce the common abbreviations and notes of background background style.

1) background optimization of setting a color separately

Background-color:#CCC

Optimized to:

Background:#CCC

2), the background is the picture, X repeats the tile horizontally

Background-image:url (http://www..com/img201207/-logo-2012.gif); background-position:0 0; background-repeat:repeat-x)

Abbreviation:

Background:url (http://www..com/img201207/-logo-2012.gif) repeat-x 0 0

2), the background is the picture, Y repeats tiling longitudinally

Background-image:url (http://www..com/img201207/-logo-2012.gif);

Background-position:0 0; background-repeat:repeat-y

The abbreviation of CSS is optimized as follows:

Background:url (http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0

3), the background is the picture, do not repeat tiling CSS compression

Background-image:url (http://www..com/img201207/-logo-2012.gif);

Background-position:0 0; background-repeat:no-repeat

Abbreviation:

Background:url (http://www..com/img201207/-logo-2012.gif) no-repeat 0 0

4) the background is a picture, and the full background X and Y of the web page are tiled repeatedly.

Background-image:url (http://www..com/img201207/-logo-2012.gif);

Abbreviated merge:

Background:url (http://www..com/img201207/-logo-2012.gif)

5) the background is black, and the picture is tiled horizontally to X

Background-color:#CCC;background-image:url (http://www..com/img201207/-logo-2012.gif); background-position:0 0; background-repeat:repeat-x)

Abbreviated merge:

Background:#CCC url (http://www..com/img201207/-logo-2012.gif) repeat-x 0 0

Here, pay attention to the color and the order of the picture.

5. Abbreviation of font

Font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif

It can be abbreviated as:

Font:12px/12px Arial, Helvetica, sans-serif; II, punctuation Optimization-TOP

1. Delete extra space characters

We often write CSS code with more html spaces between CSS-style words. When we finish developing CSS code, we can use the software to quickly delete extra space characters.

Optimization of punctuation space characters

Example:

Div {float:left; width:100px; height:100%;}

After deleting the space:

Div {float:left;width:100px;height:100%;}

CSS code after space removal and optimized compression

Delete spaces, it is not necessary to delete spaces in the development process of CSS, you only need to delete excess spaces by batch replacement such as DW software after the development is completed.

2. Delete the last semicolon of each selector

Delete CSS code before semicolon

Code:

Div {float:left;width:100px;height:100%;}. {float:left;width:100px;height:100px;}

Abbreviations delete semicolons after compression:

Div {float:left;width:100px;height:100%}. {float:left;width:100px;height:100px}

Remove the last semicolon

3. Delete newline-TOP

Remove spaces and line breaks to squeeze the code together.

Delete screenshots of line wrapping spaces between selectors

Abbreviated deletion selector newline occupancy

CSS Code:

Div {float:left;width:100px;height:100%}. {float:left;width:100px;height:100px} / * www..com * /

Acronym optimization:

Div {float:left;width:100px;height:100%}. {float:left;width:100px;height:100px}

/ * www..com * /

Abbreviated deletion newline, can still be deleted with the help of DW software.

IV. Optimization of CSS reuse

This article mainly introduces the common attribute extraction of CSS code to save code and facilitate maintenance. An example of CSS is 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;}

They all have the same height, width, float, text size, but only the content is different from left to right (you may need to know that CSS is centered), we can extract the 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;}

Pay attention to the above code, their own understanding, do not understand can go to the CSS forum to ask questions.

Thank you for your reading, the above is the content of "what are the DIV CSS optimization skills?" after the study of this article, I believe you have a deeper understanding of what DIV CSS optimization skills have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.