Summary of common CSS abbreviations and syntaxes

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

Color
The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:

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

Box size
There are usually four writing methods:

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

Easy to remember is clockwise, top right bottom left. An example of the specific application in margin and padding is as follows:

Margin: 1em 0 2em 0.5em;

Border (border)
The border attributes are as follows:

• Border-width: 1px;
• Border-style: solid;
• Border-color: #000;
It can be abbreviated as border: 1px solid #000;

Syntax: border: width style color;

Background (Backgrounds)
The attributes 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;

It can be abbreviated as: 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 attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:

• Color: transparent
• Image: none
• Repeat: repeat
• Attachment: scroll
Position: 0% 0%
Fonts)
The font attributes 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;

It can be abbreviated as: font: italic small-caps bold 1em/140% "Lucida Grande", sans-serif;

The abbreviation of font. If family is omitted,
Like this:
Font: 700 14px/22px;
It does not take effect in Firefox.
The complete statement is as follows: font: 700 14px/22px arial;

<! 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 ""; border: 1px solid #000}
. Login_top2 {height: 26px; line-height: 26px; font-weight: bold; font-size: 14px; border: 1px
Solid #000; font-family: ''}
</Style>
<Div class = "login_top"> I am vertical not centered </div>
<Br/>
<Div class = "login_top2"> vertical center </div>

Note: If you are short for font definition, you must at least define the font-size and font-family values.

List (lists)
To cancel the default dot and serial number, you can write list-style: none ;,

The list attributes are as follows:

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

Outline

Outline is similar to border. The difference is that border will affect the box model, but outline will not.

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

If the CSS attribute value is 0, you do not need to add a unit for it (for example, px/em). You may write it like this:

Special description of four edges
There are many styles related to the four sides (top, bottom, and left). I will describe them here.

Taking padding as an example, the abbreviation of the four sides is as follows:

Padding: 4px 6px 3px 4px;

It is equivalent:

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

The order is:

Top | right | bottom | left

Whether it is the border width, border color, margin, etc., as long as the css style involves four sides, the order is "top right bottom left" (clockwise direction ).

If the value of the four sides is omitted, write only three, namely:

Padding: 1px 2px 3px;

It is equivalent:

Padding-top: 1px;
Padding-right: 2px;
Padding-bottom: 3px;
Padding-left: 2px;

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

If the values on the four sides are omitted:

Padding: 5px 10px;

It is equivalent:

Padding-top: 5px;
Padding-right: 10px;
Padding-bottom: 5px;
Padding-left: 5px;

That is to say, 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 "lower" value is equal to "upper ".

If there is only one value:

Padding: 3px;

It is equivalent:

Padding-top: 3px;
Padding-right: 3px;
Padding-bottom: 3px;
Padding-left: 3px;

In this case, both the top, bottom, and left sides are equal to the same value!

 

When the Margin (Margin/blank side) declares CSS magin, it is usually written as follows:

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 combine the four statements into one statement:

Margin: 0 10px 0 10px;

When you use padding, margin, and border (and some other attributes), remember to declare the attribute values clockwise, that is, in the upper-right-bottom-left direction. There is another simpler way to write these attributes. Check whether the upper and lower, left, and right values in the attributes are equal. If so, you can further optimize them, you can omit the last two values. The remaining two values refer to the upper and lower sides, and the latter refer to the left and right sides:

Margin: 0 10px;

It indicates that the left and right values are 10px, and the upper and lower values are 0;

 

The remove selector is the basic method when 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 name), you do not need to include the selector when declaring CSS.

Div # logowrap

Try to discard the redundant selector:

# Logowrap

In this example, the selector is div.

* Always joke with you and use it wisely * to avoid messing around in the CSS style sheet. * It is a wildcard, you can use it to declare a series of CSS statements for some or all of your designs. For example:

*{
Margin: 0;
}

This statement sets the margin value of all elements to 0. Similarly, for the sake of rigor, you can try to set it like this:

# Menu *{
Margin: 0;
}

This statement sets the margin of all elements in the # menu to 0.