Abbreviations commonly used in CSS

Using abbreviations can help reduce the size of your CSS files and make it easier to read. The main rules for CSS abbreviations are as follows:

Color

16 color value, if the value of each two digits is the same, you can abbreviate half, for example: #000000可以缩写为 #000; #336699可以缩写为 #369; #f2f2f2是不可以缩写的

Border of the box model

border-width:1px;

Border-style:solid;

Border-color: #000;

can be abbreviated as a sentence:

border:1px solid #000;

Grammar is border:width style color;

Border and padding of the box model

margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;

margin:1px 2px 3px 4px;

Note: The order here is clockwise, respectively: upper right and lower left

MARGIN:1PX 2px;

margin:0;

Note: CSS in the value of 0 can be without units, other times must be with units

Background

Background-color: #f00;

Background-image:url (background.gif);

Background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

can be abbreviated as a sentence:

Background: #f00 URL (background.gif) no-repeat fixed 0 0;

Font

Font-style:italic;

Font-variant:small-caps;

Font-weight:bold;

Font-size:1em;

line-height:140%;

font-family: "Lucida Grande", Sans-serif;

can be abbreviated as a sentence:

Font:italic small-caps Bold 1em/140% "Lucida Grande", Sans-serif;

Note that if you abbreviate a font definition, you must define at least two values for font-size and font-family.

List

List-style-type:square;

List-style-position:inside;

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

can be abbreviated as a sentence:

List-style:square inside URL (image.gif);