[CSS Note 8] CSS code abbreviation, taking up less bandwidth

1. Box model code abbreviation
Remember when talking about the box model, the margins (margin), padding (padding) and border (border) are set in the four directions of the top, bottom, left and right in a clockwise direction. Set: top right, bottom left. Examples of specific applications in margin and padding are as follows:

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

Usually there are three abbreviation methods:

1. If the values ​​​​of top, right, bottom, and left are the same, as follows Code:

margin:10px 10px 10px 10px;

can be abbreviated as:

margin:10px;

2. If the values ​​of top and bottom are the same, and the values ​​of left and right are the same, as in the following code:

margin:10px 20px 10px 20px;

can be abbreviated to:

margin:10px 20px;

3. If the values ​​of left and right are the same, such as the following code:

margin:10px 20px 30px 20px;

can be abbreviated to:

margin:10px 20px 30px;

Note: The abbreviations of padding and border are the same as margin.

2. Color value abbreviation
The css style of color can also be abbreviated. When the color you set is a hexadecimal color value, if the values ​​of each two digits are the same, you can Abbreviation half.

Example 1:

p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}

3. Font abbreviation
The font css style code in the web page also has its own abbreviation method. The following is the code to set the font for the web page:

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; }

So many lines of code can actually be abbreviated to one sentence:

body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }

Note:

1. To use this abbreviation method, you must at least specify font-size and font-family attribute, other attributes (such as font-weight, font-style, font-varient, line-height) will automatically use the default value if not specified.

2. When abbreviating, add "/" diagonally between font-size and line-height.

Generally speaking, because there is still relatively little English for Chinese websites, the following abbreviation code is more commonly used:

body{ font:12px/1.5em "宋体",sans-serif; }

It only has font size, line spacing, Chinese font, and English font settings.

The above is [CSS Note 8] CSS code abbreviation, which takes up less bandwidth. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!