Abbreviation rules for CSS syntax

Core tip: use abbreviations to reduce the size of the CSS file and make it easier to read. This article mainly introduces the main abbreviations of CSS rules, including color, box size, border, background, fonts, lists and other aspects of the content.

Using abbreviations reduces the size of the CSS file and makes it easier to read. This article mainly introduces the main abbreviations of CSS rules, including color, box size, border, background, fonts, lists and other aspects of the content. The main rules for CSS abbreviations are as follows:

Color

16 The color value of the binary, if the value of each two digits is the same, you can abbreviate 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 values that represent top and bottom are value1,right and left values that are value2
Property:value1 value2 Value3; The value that represents top is value1,right and left is the value of Value2,bottom is Value3
Property:value1 value2 value3 value4; The four values, in turn, represent Top,right,bottom,left
Convenient memory method is clockwise, upper right and lower 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 one sentence: border:1px solid #000;

Grammar is border:width style color;

Background (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 grammar is Background:color image repeat attachment position;

You can omit one or more of the property values, and if omitted, the property value will be in the browser default value, the default value 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 one 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)

Cancellation of 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 to one sentence: List-style:square inside URL (image.gif);