10 CSS shorthand/optimization tips

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 CSS files, optimize the overall performance of the site, more easily read

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:

1 2 3 4

margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;

You can write in Jane:

margin:1px 2px 3px 4px;

Syntax Margin:top right bottom left

Four direction of the same margin, equivalent to margin:1px 1px 1px 1px;margin:1px;//up and down the margin is 1px, the left and right margins are 2px, equivalent to margin:1px 2px 1px 2pxmargin:1px 2px;// The right and left margins are the same, equivalent to margin:1px 2px 3px 2px;margin:1px 2px 3px;//Note that the top and bottom margins here are 1px, but not abbreviated here. margin:1px 2px 1px 3px;

　　Second, 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:

Syntax border:width style color;

border:1px solid #000;

　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-position:0 0;

can be abbreviated as a sentence:

The syntax is Background:color image repeat attachment position;

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

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%

　 Four, 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)

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

　VI. Colour (color)

16 binary color values, if each two bits of the same value, can be shortened by 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 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:

padding:10px 5px 0px 0px;

Let's try this:

padding:10px 5px 0 0;

　Eight, the last semicolon

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

#nav {border-top:4px solid #333; font-style:normal;font-variant:normal;font-weight:normal;}

Can be written as:

#nav {border-top:4px solid #333; Font-style:normal;font-variant:normal;font-weight:normal}

　Nine, font weight (font-weight)

You may write this:

H1{font-weight:bold;} P{font-weight:normal;}

Can be simply written as:

h1{font-weight:700;} p{font-weight:400;}

　Ten, Fillet radius (Border-radius)

The 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 simply written as:

Grammar Border-radius:topleft topright bottomright bottomleft

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

10 CSS shorthand/optimization tips