CSS Optimization 2-(Common CSS abbreviation syntax summary)_Experience exchange

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

Color
Hexadecimal color value, if the values ​​of each two digits are the same, can be abbreviated in half, for example:
#000000 can be abbreviated to #000;# 336699 can be abbreviated as #369;

Box size
There are usually four writing methods:

property:value1; means that all edges are a value value1;
property: value1 value2; means the value of top and bottom is value1, the value of right and left is value2
property:value1 value2 value3; means the value of top is value1, the value of right and left is value2, and the value of bottom is value3
property:value1 value2 value3 value4; The four values ​​represent top, right, bottom, left in turn
The convenient way to remember is clockwise, top, right, bottom, 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;
It can be abbreviated to one sentence: border:1px solid #000;

The syntax is border:width style color;
Backgrounds
The properties of the background are as follows:

background-color:#f00;
background-image:url(background.gif);
background-repeat :no-repeat;
background-attachment:fixed;
background-position:0 0;
Can be abbreviated to one 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 attribute values. If omitted, the attribute value will use the browser default value. The default value is:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
Fonts (fonts)
The attributes 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 to one sentence: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

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

Lists
To cancel the default dots and serial numbers, you can write list-style:none;,

The attributes of list are as follows:

list-style -type:square;
list-style-position:inside;
list-style-image:url(image.gif);
It can be abbreviated to one sentence: list-style:square inside url(image. gif);