Common CSS abbreviated syntax summary can help you reduce the size of the CSS file

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules of css abbreviation are as follows:

colour
Hexadecimal color values can be abbreviated in half if the value of each two bits is the same, for example:

# 000000 can be abbreviated to # 000; # 336699 can be abbreviated to # 369;

Box size
There are usually four writing methods:

• property: value1; means all edges are a value1;
• property: value1 value2; indicates that the values of top and bottom are value1, and the values of right and left are value2
• property: value1 value2 value3; indicates that the value of top is value1, the values of right and left are value2, and the value of bottom is value3
• property: value1 value2 value3 value4; The four values in turn represent top, right, bottom, left

The convenient way to memorize is clockwise, up right down left. Examples of specific applications in margin and padding are as follows:

margin: 1em 0 2em 0.5em;

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 syntax is border: width style color;

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 one 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 attribute values. If omitted, the attribute value will use the browser default value. The default value is:

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%
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 one sentence: font: italic small-caps bold 1em / 140% "Lucida Grande", sans-serif;

abbreviation for font, if family is omitted,
Like this:
font: 700 14px / 22px;
Is not effective under Firefox
The complete wording is: font: 700 14px / 22px arial;


code show as below:
<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style> www.111cn.net
.login_top {height: 26px; font: bold 14px / 26px "Songti"; border: 1px solid # 000}
.login_top2 {height: 26px; line-height: 26px; font-weight: bold; font-size: 14px; border: 1px
solid # 000; font-family: 'Songti'}
</ style>
<div class = "login_top"> I'm not centered vertically </ div>
<br/>
<div class = "login_top2"> I center vertically </ div>

Note that if you abbreviate the font definition, you must define at least the font-size and font-family values.

Lists
Cancel the default dot and serial number can be written list-style: none ;,

The properties of list are as follows:

• list-style-type: square;
• list-style-position: inside;
• list-style-image: url (image.gif);
Can be abbreviated as one sentence: list-style: square inside url (image.gif);

outline

Outline is similar to border, except that border affects the box model, while outline does not.

outline-width: number + unit;
outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid;
outline-color: color;

The property value is 0. The principle is that if the CSS property value is 0, then you don't need to add units (such as: px / em), you might write:

Special note on the four sides
Regarding the four sides, there are many styles that involve the four sides (up, down, left, right). I will explain them here.

Taking padding as an example, the abbreviations of the four sides are as follows:

padding: 4px 6px 3px 4px;

It is equivalent to:


code show as below:
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

The sequence is:

top | right | bottom | left

Regardless of the border width, border color, margins, etc., as long as the css style involves four sides, the order is always "up right down left" (clockwise).

If one of the four values is omitted, only three are written, that is:

padding: 1px 2px 3px;

Then it is equivalent to:


code show as below:
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;

That is, the omitted "left" value is equal to "right".

If two values are omitted on both sides:

padding: 5px 10px;

It is equivalent to:


code show as below:
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 5px;

That is, when there are only two values, the upper and lower sides are equal to the first value, and the left and right sides are equal to the second value, that is, the omitted "down" value is equal to "up".

If there is only one value:

padding: 3px;

It is equivalent to:


code show as below:
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;

In this case, all four sides are equal to the same value!

Margin (margin / blank) declaration when CSS magin is worth it is usually written like this:


code show as below:
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;

Let's try to remove the unit with a value of 0 and merge the 4 statements into one statement:

margin: 0 10px 0 10px;

When you are padding, margin, border (and some other attributes), remember to declare the attribute value in a clockwise direction, that is, in the direction of up-right-down-left. There is another simpler way to write about these properties. See if the values of the top, bottom, left, and right are equal. If it is, then you can further optimize it. You can omit the last two values, and the rest The two values of the former refer to up and down, the latter refers to left and right:

margin: 0 10px;

It means that the left and right values are 10px, and the up and down values are 0;

Removing selectors 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 class (.class name) or ID (#id 名), then there is no need to include selectors when declaring CSS.

div # logowrap

Try throwing away the extra selectors:

#logowrap

The selector in this example is the div

* Always love to joke with you Use it wisely * and avoid making it joke in the entire CSS style sheet, * is a wildcard, you can use it to make a series of CSS statements for some or all of your design. E.g:


code show as below:
{
margin: 0;
}

This statement will set the margin value of all elements to 0. Similarly, for rigorous reasons, you can try to set it like this:


code show as below:
#menu * {
margin: 0;
}

Such a declaration means that the margin of all elements under #menu is set to 0.