10 CSS shorthand tips for your stay

Transferred from: http://blog.bingo929.com/10-css-shorthand-tips.html

Objective:

CSS shorthand refers to the declaration of multiple lines of CSS properties into a line, also known as CSS Code optimization. The biggest benefit of CSS shorthand is the ability to significantly reduce the size of CSS files, in fact there are many other benefits. A bloated and cluttered CSS style sheet can make it difficult to debug when you encounter problems. Especially when a team is working on a design, your bloated CSS code can reduce the productivity of other members of your team.

Today, the Storm Binbin some CSS shorthand techniques, which are actually the most commonly used CSS notation, but too many people use the WYSIWYG software to write CSS, making the code too bloated. But it doesn't matter, after reading this article, you can master the CSS Code optimization skills, in the future to make your CSS style sheet looks neat and short.

Body:

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

padding:10px 5px 0px 0px;

Let's try this:

0 0;

Remove Selector

　　Selectors are the basic way you apply CSS styles to some elements, such as H1, H2, H2, Div, strong, PRE, UL, OL, etc... If you use the class (. class name) or ID (#id名), then you can no longer include selectors when declaring CSS.

Div#logowrap

Try throwing away the extra selector:

#logowrap

In this case, the so-called selector is Div.

* Always love to make fun of you *

To use * wisely to avoid joking around the entire CSS stylesheet, * is a wildcard, and you can use it to make a series of CSS declarations for your design part or all. For example:

* {    0;}

This statement sets the margin value of all elements to 0, and again, for the sake of rigor, you can try this setting:

#menu * {    0;}

Such a declaration refers to setting the margin of all elements under #menu to 0.

Background

The background (background) property may contain parameters that set the background color, the background map, the position of the background map, and the repetition of the background map, which you might write:

background-image:url ("logo.png"); background-position:topcenter;background-repeat: No-repeat;

Can actually be written as:

Background:url (logo.png) no-repeat top center;

Color

The color property is usually specified in CSS as a hexadecimal value, a # plus 6 digits, and his shorthand is if the color value is made up of three pairs of paired pairs and numbers, you can omit a number from the pair.

#000000 can be written #000, #336699 can be written #369

Note: This shorthand technique applies only to the color values that appear on the adulthood, and other color values do not apply to this technique, such as:

#010101, #223345, #FFF000

Margin (margin/margin) declares that CSS Magin is usually written like this:

margin-top:0px;margin-right:10px;margin-bottom:0px;margin-left:10px;

Let's try to remove the units with a value of 0 and combine the 4 declarations into one declaration:

Margin:00 10px;

When you declare padding, margin, border (and some other attributes) , remember to declare the value of the property in a clockwise direction , that is, in the upper-right-bottom-left direction . There is another simpler notation for these properties, to see if the values are equal in the upper and lower, left, and right of the attribute, and if so, you can omit the last two values, and the remaining two values are the upper and lower ones, the latter referring to the left:

Margin:0 10px;

It refers to the value of around 10px, the upper and lower values are 0;

The shorthand technique for Padding (padding) Padding is equivalent to margin:

padding-top:0px;padding-right:10px;padding-bottom:0px;padding-left:10px;

can be written as:

0 10px; Borders (border) border is more complicated than other life, many csser easy to remember the shorthand order, if you want to declare a solid 1 pixels wide black border, may be written as: Border-width:1px; Border-style:solid;border-color:#;

can actually be written as:

border:1px solid #;

Note: The color value here has been used in the above-mentioned color shorthand method Oh.

We can also set a different width for four edges:

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

Can be simply written as:

border-width:1px 2px 3px 4px;

Finally, we can also set only right and bottom The style of the box:

border-right:1px solid #Border-bottom:1px solid #;

Although the number of codes has not been reduced, the storm Binbin suggests that it be written like this:

border:1px solid #Border-width:00;

Set the default style for four edges first, and then declare which side you want to display.

Text

Text attributes also have many property values that might be used, like the background, where you might declare this complex text style:

font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em line-height: Thefont-family: Song body, Arial, Sans-serif;

Can actually be optimized into one line:

Font:italic small-caps Bold 1em/, Arial, sans-serif; list-style-type:square;list- style-position:inside;list-style-image:url (filename.gif);

Can be written as:

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

Hope the Storm Binbin summary of these 10 CSS abbreviations can be helpful to your CSS writing, if you need to download a quick reference to the shorthand technique of CSS, this click here to download