CSS Shorthand Summary

CSS shorthand refers to the shorthand of multiple lines of CSS properties, also known as CSS Code optimization or CSS abbreviations. Css

The biggest benefit of shorthand is the ability to significantly reduce the size of the CSS file, optimize the overall performance of the site, easier to read. The following are common CSS shorthand rules:

First, Box size

This is mainly used for two properties: margin and padding, we take margin for example, padding is the same.

The box has four directions up and down, with an outer margin in each direction:

Copy CodeThe code is as follows:
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

You can write in Jane:

Copy CodeThe code is as follows:
margin:1px 2px 3px 4px;

Syntax Margin:top right bottom left

Copy CodeThe code is as follows:
The margins in four directions are the same, equivalent to margin:1px 1px 1px 1px;
margin:1px;
Both the top and bottom margins are 1px and the left and right margins are 2px, equivalent to margin:1px 2px 1px 2px
MARGIN:1PX 2px;
The right margin and the left margin are the same, equivalent to margin:1px 2px 3px 2px;
margin:1px 2px 3px;
Note that although the top and bottom margins are 1px, there is no abbreviation here.
margin:1px 2px 1px 3px;

Second, border (border)

The properties of the border are as follows:

Copy CodeThe code is as follows:
border-width:1px;
Border-style:solid;
Border-color: #000;

can be abbreviated as a sentence:

Copy CodeThe code is as follows:
border:1px solid #000;

Syntax border:width style color;

Iii. Background (backgrounds)

The properties of the background are as follows:

Copy CodeThe code is as follows:

Background-image:url (background.gif);
Background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

can be abbreviated as a sentence:

Copy CodeThe code is as follows:
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 property values, and if omitted, the value of the property will be the default value of the browser, the default

For:

Copy CodeThe code is as follows:
Color:transparent
Image:none
Repeat:repeat
Attachment:scroll
position:0% 0%

four, font (fonts)

The properties of the font are as follows:

Copy CodeThe code is 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 a sentence:

Copy CodeThe code is as follows:
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.

v. List (lists)

Cancel the default dot and ordinal can be written like this list-style:none;

The properties of the list are as follows:

Copy CodeThe code is as follows:
List-style-type:square;
List-style-position:inside;
List-style-image:url (Image.gif);

can be abbreviated as a sentence:

Copy CodeThe code is as follows:
List-style:square inside URL (image.gif);

VI. Colour (color)

16 binary color values, if each two bits of the same value, can be shortened by half. For example:

Copy CodeThe code is as follows:
Aqua: #00ffff--#0ff
Black: #000000--#000
Blue: #0000ff--#00f
Dark Grey: #666666--#666
Fuchsia: #ff00ff--#f0f
Light Grey: #cccccc--#ccc
Lime: #00ff00--#0f0
Orange: #ff6600--#f60
Red: #ff0000--#f00
White: #ffffff--#fff
Yellow: #ffff00--#ff0

Seven, the attribute value is 0

The writing principle is that if the CSS property value is 0, then you don't have to add units for it (for example: px/em), you might

Write:

Copy CodeThe code is as follows:
padding:10px 5px 0px 0px;

Let's try this:

Copy CodeThe code is as follows:
padding:10px 5px 0 0;

Eight, the last semicolon

The last attribute value can be followed by a semicolon without writing, such as:

Copy CodeThe code is as follows:
#nav {
BORDER-TOP:4PX solid #333;
Font-style:normal;
Font-variant:normal;
Font-weight:normal;
}

Can be simply written as:

Copy CodeThe code is as follows:
#nav {
BORDER-TOP:4PX solid #333;
Font-style:normal;
Font-variant:normal;
Font-weight:normal
}

Nine, font weight (font-weight)

You may write this:

Copy CodeThe code is as follows:
h1{
Font-weight:bold;
}
p{
Font-weight:normal;
}

Can be simply written as:

Copy CodeThe code is as follows:
h1{
font-weight:700;
}
p{
font-weight:400;
}

10. Fillet radius (Border-radius)

The Border-radius is a newly added attribute in the CSS3 that is used to implement rounded borders.

Copy CodeThe code is as follows:
-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;

Can be simply written as:

Copy CodeThe code is as follows:
-moz-border-radius:0 6PX 6px;
-webkit-border-radius:0 6PX 6px;
border-radius:0 6PX 6px;

Grammar Border-radius:topleft topright bottomright bottomleft

==========================================================================

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

16 binary color values, if each two bits of the same value, can be shortened by 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 value representing top and bottom is the value of Value1,right and left is value2
• Property:value1 value2 Value3; The value that represents top is the value of Value1,right and left is the value of Value2,bottom is Value3
• Property:value1 value2 value3 value4; Four values in turn represent Top,right,bottom,left

Convenient memory method is clockwise, upper right down 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 a sentence: border:1px solid #000;

The grammar is border:width style color;

Background (backgrounds)

The properties of the background are as follows:

• Background-image:url (background.gif);
• Background-repeat:no-repeat;
• background-attachment:fixed;
• background-position:0 0;

can be abbreviated as a 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 property values, and if omitted, the value of the property will be the default value of the browser, which 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 a 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)

Cancel 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 as a sentence: List-style:square inside URL (image.gif);

CSS Shorthand Summary