Summary of common CSS abbreviation syntax

Commonly used CSS abbreviation syntax summary

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

Color

If the hexadecimal color value is the same, it can be abbreviated in half, for example:

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

　 Box size

Usually there are four writing methods:

PRoperty:value1; means that all edges are a value value1;

property:value1 value2; means that the values ​​of top and bottom are value1, right and left The value is value2

property:value1 value2 value3; 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, and bottom in turn. ,left

　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;

　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 of the 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 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 to one sentence: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

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

　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);

Can be abbreviated to one sentence: list-style:square inside url(image.gif);

The above is a summary of the commonly used CSS abbreviation syntax, and more For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!