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

Source: Internet
Author: User

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}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.