Syntax summary of commonly used CSS abbreviations_html/css_WEB-ITnose

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 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 values ​​of top and bottom is value1, the values ​​of right and left are 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 in turn, right,bottom,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;

It can be abbreviated to one sentence: border:1px solid #000;

The syntax is border:width style color;

Backgrounds (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;

It 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 of them or Multiple 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, at least define 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);