10 CSS shorthand/optimization tips

Source: Internet
Author: User

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

The biggest benefit of CSS shorthand is the ability to significantly reduce the size of CSS files, 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:

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

The margins in four directions are the same,

margin:1px 1px 1px 1px;

Equivalent to

margin:1px;

Both the top and bottom margins are 1px, and the left and right margins are 2px,

margin:1px 2px 1px 2px

Equivalent to

MARGIN:1PX 2px;

The right margin and the left margin are the same

margin:1px 2px 3px 2px;

Equivalent to

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:

border-width:1px;  Border-style:solid; Border-color:#;

can be abbreviated as a sentence:

border:1px solid #;

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

can be abbreviated as a sentence:

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:

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:%; 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 --#  Blue: #0000ff--#00f Dark Grey: #666666 --# 666  fuchsia:# ff00ff--#f0f Light Grey: #cccccc – #ccc Lime: #00ff00--#0f0 Orange: #ff6600--#f60 Red: #ff0000--#f00 White: #ffff ff--#fff Yellow: #ffff00--#ff0

Seven, the attribute 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 (for example: Px/em), which you might write:

padding:10px 5px 0px 0px;

Let's try this:

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 simply 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:

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

Grammar Border-radius:topleft topright bottomright bottomleft

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.