Common CSS abbreviations

 

When writing CSS code, redundant code is often displayed. To improve the Code Quality and minimize the number of files compressed. CSS code simplification is also necessary.

 

The main rules for css abbreviations are as follows:

 

Short for margin and padding

 

There is an important rule for writing margin and padding, that is, the abbreviations are: top, right, bottom, left ), it is in a counter-clockwise order.

 

There are usually four writing methods:

Property: value1; indicates that all edges are value1;

Property: value1 value2; the value of top and bottom is value1, and the value of right and left is value2.

Property: value1 value2 value3; indicates that the top value is value1, the right and left values are value2, and the bottom value is value3.

Property: value1 value2 value3 value4;

 

An example of the specific application in margin and padding is as follows:

 

Margin (padding): 10px; values in four directions are 10px

Margin (padding): 10px 5px; Up and down: 10px; left and right: 5px

Margin (padding): 10px 20px 5px; 10px, 20px left and right, and 5px bottom.

Margin (padding): 10px 0 2px 10px; when the attribute value is 0, no unit is required.

 

Border (border)

 

Border attributes also follow the principles of top, right, bottom, and left.

 

Different formats of borders:

 

Syntax: border: width style color;

 

The border attributes are as follows:

Border-width: 1px;

Border-style: solid;

Border-color: #000;

It can be abbreviated as border: 1px solid #000;

 

If the values on the four sides are different:

For example:

Border-top: 4px solid # e1e1e1; border-right: 1px solid # f1f1f1; border-bottom: 4px dashed # e1e1e1; border-left: 1px solid # ff3300;

This can be abbreviated:

Border-width: 4px 1px; border-style: solid dashed; border-color: # e1e1e1 # f1f1f1 # e1e1e1 # ff3300;

 

Color)

 

The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:

#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;

However, if you are not familiar with the color value, we recommend that you use the full code directly.

 

Fonts (font)

 

The css font attribute is used to control the font, color, and size of text.

The font attributes are as follows:

Font-style: italic;

Font-variant: small-caps;

Font-weight: bold;

Font-size: 1em;

Line-height: 140%;

Font-family: "Lucida Grande", sans-serif;

It can be abbreviated as: font: italic small-caps bold 1em/140% "Lucida Grande", sans-serif;

Note: If you are short for font definition, you must at least define the font-size and font-family values.

 

Backgrounds (background)

 

The syntax is background: color image repeat attachment position;

 

The attributes of the background are as follows:

Background-color: # f00;

Background-image: url (images/background.gif );

Background-repeat: no-repeat;

Background-attachment: fixed;

Background-position: 0 0;

It can be abbreviated as: background: # f00 url (/background.gif) no-repeat fixed 0 0;

You can omit one or more attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:

Color: transparent

Image: none

Repeat: repeat

Attachment: scroll

Position: 0% 0%

 

List)

 

To cancel the default dot and serial number, you can write list-style: none ;,

The list attributes are as follows:

List-style-type: square;

List-style-position: inside;

List-style-image: url (/image.gif );

Can be abbreviated as: list-style: square inside url (/image.gif );