Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for CSS abbreviations are as follows:
Color
16 binary color values, if each two bits of the same value, can be shortened by half, for example: #000000可以缩写为 #000; #336699可以缩写为 #369;
Box size
There are usually four ways to write:
property:value1; Indicates that all edges are a value value1;
Property:value1 value2; The value representing top and bottom is the value of Value1,right and left is value2
Property:value1 value2 Value3; The value that represents top is the value of Value1,right and left is the value of Value2,bottom is Value3
Property:value1 value2 value3 value4; Four values in turn represent Top,right,bottom,left
Convenient memory method is clockwise, upper right down left. Examples of specific applications in margin and padding are as follows:
0 0. 5em;
Border (border)
The properties of the border are as follows:
border-width:1px; Border-style:solid; Border-color:#;
can be abbreviated as a sentence:
border:1px solid #;
The grammar is border:width style color;
Background (backgrounds)
The properties of the background are as follows:
background-Image:url (background.gif); Background-repeat:no-repeat; Background-attachment:fixed; Background-position:00;
can be abbreviated as a sentence:
fixed 0 0;
The syntax is Background:color image repeat attachment position;
You can omit one or more of the property values, and if omitted, the value of the property will be the default value of the browser, which is:
0 0%
Font (Fonts)
The properties of the font are as follows:
font-style:italic; Font-variant:small-caps; Font-weight:bold; Font-size:1em; line-height:%; Font-family:"lucida Grande", Sans-serif;
can be abbreviated as a sentence:
Font:italic small-caps Bold 1em/"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 (lists)
Cancel the default dot and ordinal can write list-style:none;
The properties of the list are as follows:
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);