10 CSS abbreviations and optimization tips

CSS shorthand refers to the multiple lines of CSS attributes as a single line, also known as CSS Code optimization or CSS abbreviations. The biggest advantage of CSS 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:

The size of a box

This is mainly used for two properties: margin and padding, we take margin as an example, padding is the same. The box has four directions up and down, with an outer margin in each direction:

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;

You can simply write:

margin:1px 2px 3px 4px;

Grammar margin:top right bottom left;

Four directions of the same margin, equivalent to margin:1px 1px 1px 1px;

margin:1px;

The upper and lower margins are 1px, the left and right margins are 2px, equivalent to margin:1px 2px 1px 2px;

MARGIN:1PX 2px;

The right and left margins are the same, equivalent to margin:1px 2px 3px 2px;

margin:1px 2px 3px;

Note that although the top and bottom margins are 1px, this cannot be abbreviated here.

margin:1px 2px 1px 3px;

Two, 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;

Syntax border:width style color;

Iii. 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-po sition:00;

can be abbreviated as a sentence:

Background: #f00 URL (background.gif) no-repeat fixed 0 0;

The grammar is Background:color image repeat Attachment po sition;

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

PO sition:0% 0%

Iv. 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.

V. 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-po Sition:inside;

List-style-image:url (Image.gif);

can be abbreviated as a sentence:

List-style:square inside URL (image.gif);

Six, colors (color)

16 The color value of the binary, if the value of each two digits is the same, you can abbreviate half. For example:

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 property value is 0

The writing principle is that if the CSS property value is 0, then you do not have to add units to it (such as: px/em), you may write this:

padding:10px 5px 0px 0px;

Let's try this:

padding:10px 5px 00;

Eight, the last semicolon

After the last attribute value, the semicolon can not be written, such as:

#nav {

BORDER-TOP:4PX solid #333;

Font-style:normal;

Font-variant:normal;

Font-weight:normal;

}

Can be written by Jane:

#nav {

BORDER-TOP:4PX solid #333;

Font-style:normal;

Font-variant:normal;

Font-weight:normal

}

Nine, font weight (font-weight)

You might write this:

h1{

Font-weight:bold;

}

p{

Font-weight:normal;

}

Can be written by Jane:

h1{

font-weight:700;

}

p{

font-weight:400;

}

Radius of fillet (Border-radius)

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

-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 written by Jane:

-moz-border-radius:0 6PX 6px;

-webkit-border-radius:0 6PX 6px;

border-radius:0 6PX 6px;

Grammar Border-radius:topleft topright bottomright bottomleft