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

This article will explain in detail how to abbreviate the word code of CSS style attributes. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Border (CSS frame) abbreviation:

1), 4 borders have a width of 1px and a color of # 000

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

The abbreviation is as follows:

Border:1px solid # 000

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

Left:

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

Abbreviation:

Border-left:1px solid # 000

Left:

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), chiral abbreviated frame

We have no intention of occasionally setting only three-sided border moments, or we may manually reduce the amount of code.

Suppose we do not set the top border, while the other three sides complete the 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}

Achieving the same result in this way also greatly reduces the amount of CSS code.

Experience more css frame beautification and expansion tutorials.

2. Padding (CSS padding) abbreviation:

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

Old-fashioned ideas:

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

General css padding abbreviation:

Padding:4px 3px 5px 2px

2), configure padding only for 3 sides

If we are late to set the equipment padding, the other three sides set the equipment padding property.

Stodgy:

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

Abbreviation:

Padding:0 3px 5px 2px

3 the same situation on both sides:

Stodgy:

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 distance between four sides sets the abbreviation of equipment arrangement:

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 interval is the same abbreviation

Stodgy:

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

Abbreviation:

Margin:2px

3), the same up and down, the same domination

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

Abbreviation:

Margin:5px 2px

4. Background abbreviation

Bac kilogram round-color:#000

Maybe it's abbreviated to

Bac kg round:#000;bac kg round-image:url (photo location)

It can be abbreviated as:

Bac kg round:url (picture address)

The more frequently used pattern attributes of CSS background include configuring a background color alone, setting backing images alone, configuring backing images several times or not, and repeating them all times according to X horizontal or Y vertical. Now we introduce bac kg round backup hall often use abbreviation and stability.

The main contents are as follows: 1) setting up the equipment separately, setting up the scene and optimizing the background of a kind of color mining.

Background-color:#CCC

Beautified as:

Background:#CCC

2) the background is a picture, and X is tiled horizontally and frequently.

Bac kg round-image:url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif); bac kg round-position:0 0; background-repeat:repeat-x

Abbreviation:

Bac kilogram round: url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif) repeat-x 0 0

2) backing is the picture, Y is tiled again and again longitudinally

Bac kg round-image:url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif); bac kg round-position:0 0; bac kg round-repeat:repeat-y

The abbreviation of CSS is beautified to:

Bac kilogram round: url (/ / www.css5.com.cn/images2012/logo.gif) repeat-y 0 0

3) the background is a picture, and CSS compression is not tiled repeatedly.

Bac kilogram round-image:url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif); bac kilogram round-position:0 0; background-repeat:no-repeat

Abbreviation:

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

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

Bac kg round-image:url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif)

Abbreviation annexation:

Background:url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif)

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

Background-color:#CCC;bac kilogram round-image:url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif); background-position:0 0; background-repeat:repeat-x

Abbreviated merger:

Bac kilogram round: # CCC url (/ / www.css5.com.cn/img201207/CSS5-logo-2012.gif) repeat-x 0 0

Watch out for the color and the front and back of the picture here.

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; about "CSS style attribute word code abbreviated ways" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.