Web Front end--html Basic note no.13{box model, color value, font abbreviation}

Box Model Code Shorthand

Remember that margins (margin), padding (padding), and border (border) settings are set in a clockwise direction, up or down in four directions, in the box model: upper right bottom left. Examples of specific applications in margin and padding are as follows:

margin:10px 15px 12px 14px;/* set to 10px, right set to 15px, lower set to 12px, left set to 14px*/

There are three abbreviations that are commonly used:

1. If the values of top, right, bottom, and left are the same, such as the following code:

margin:10px 10px 10px 10px;

margin:10px;

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

margin:10px 20px 10px 20px;

margin:10px 20px;

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

margin:10px 20px 30px 20px;

margin:10px 20px 30px;

Note: The abbreviated method of padding and border is consistent with margin.

Color value abbreviation

The CSS style of the color is also abbreviated, and if you set the color to 16, you can abbreviate it by half if the values are the same for each of the two digits.

P{color: #000000;}

P{color: #000;}

P{color: #336699;}

P{color: #369;}

Font abbreviations

The font CSS style code in the Web page also has his own abbreviation, the following is the code to set the font for the page:

body{    font-style:italic;    Font-variant:small-caps;     Font-weight:bold;     font-size:12px;     line-height:1.5em;     font-family: "Song Body", Sans-serif;}

body{    font:italic  small-caps  bold  12px/1.5em  "song Body", Sans-serif;}

Attention:

1, use this shorthand method you must specify at least the Font-size and Font-family properties, other properties (such as Font-weight, Font-style, Font-varient, Line-height) will automatically use the default value if not specified.

2, in the abbreviation font-size and line-height the middle to join "/" oblique carry.

In general, because the Chinese site, the English is still relatively small, so the following abbreviation code is more commonly used:

body{    font:12px/1.5em  "song Body", Sans-serif;}

Only font size, line spacing, Chinese fonts, English fonts are set.

Web Front end--html Basic note no.13{box model, color value, font abbreviation}