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:
Margin:1em 0 2em 0.5em;
Border (border)
The properties of the border are as follows:
- border-width:1px;
- Border-style:solid;
- Border-color: #000;
can be abbreviated as a sentence: border:1px solid #000;
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:0 0;
can be abbreviated as a sentence: background: #f00 URL (background.gif) no-repeat 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:
- Color:transparent
- Image:none
- Repeat:repeat
- Attachment:scroll
- position: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: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 (lists)
Cancel the default dot and ordinal can be written like this 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);
Summary of common CSS abbreviation syntax