Summary of commonly used CSS abbreviation syntax

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

Hexadecimal color value, if the value of each two digits 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

There are usually four writing methods:

• property:value1; means that all edges have a value value1;

• 
  

• property:value1 value2; means that the values ​​of top and bottom are value1, and 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, right, bottom, left

A 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 attributes 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 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

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;

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

The above is the detailed content of Summary of commonly used CSS abbreviation syntax. For more information, please follow other related articles on the PHP Chinese website!