Start from scratch to learn the abbreviation of html (13) CSS code, which consumes less bandwidth and starts from scratch.

Source: Internet
Author: User
Tags color representation css zen garden

Start from scratch to learn the abbreviation of html (13) CSS code, which consumes less bandwidth and starts from scratch.
I. Simplified Box Model Code

1 <! Doctype html> 2 Simplified Box Model Code

Remember that when talking about the box model, the margin (margin), the padding (padding), and the border (border) are set in the clockwise direction: top, bottom, and left.

An example of the specific application in margin and padding is as follows:

Margin: 10px 15px 12px 14px;/* Set 10px to top, 15px to right, 12px to bottom, and 14px to left */

There are usually three Abbreviations:

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

margin:10px 10px 10px 10px;



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

margin:10px 20px 10px 20px;


margin:10px 20px;

3. If the left and right values are the same, see the following code:

margin:10px 20px 30px 20px;


margin:10px 20px 30px;

Note: The abbreviation of padding and border is the same as that of margin.


In the Code Editor, modify the values of margin and padding into abbreviations.

The reference code is as follows:

P {

Padding: 13px;

Margin: 10px 40px;


Box Model size = border + margin + padding + content size in the box

Define order: Top right bottom left (clockwise)

Define three values: 1 (top) 2 (left and right) 3 (bottom)

Defines two values: 1 (up and down) 2 (left and right) the order is up, right, bottom, left, clockwise, and, and if there is a shorthand, it is both a simplified form,

For example, if there is only one value, it means this is the case. If there are two values (that is, the upper and lower are the same as the left and right values) if there are three values (the last left by default is the same as the given right)

Ii. Abbreviation of color value
1 <! Doctype html> 2 Abbreviation of color value


Css styles of colors can also be abbreviated. When the color you set is a hexadecimal color value, if the two values are the same, they can be abbreviated to half.

Example 1:


Can be abbreviated:

p{color: #000;}

Example 2:

p{color: #336699;}

Can be abbreviated:

p{color: #369;}


In the Code Editor, try the color shrinking format.

Reference code:
P {
Color: #369;
There are three Color Representation Methods in CSS:

1: Use English words to directly describe, such as red, green, and black.

2: represented in hexadecimal notation, for example, #000000, # FFFFFF.

3: represented in hexadecimal notation, for example, #000, # FFF, etc.
1 <! Doctype html> 2 Abbreviation

The font css style code in a webpage can also be abbreviated. The following Code sets the font for the webpage:

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 be abbreviated as one sentence:

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


1. You must specify at least the font-size and font-family attributes in this shorthand method, if other attributes (such as font-weight, font-style, font-variant, and line-height) are not specified, the default value is automatically used.

2. Add "/" to the center of font-size and line-height.

Generally, the abbreviated code below is commonly used because there are few Chinese websites in English:

Body {font: 12px/1.5em "", sans-serif ;}

Only font size, line spacing, Chinese font, and English font settings are available.



You can explain the meaning one by one.
Body {
Font-style: italic; // set the font to italic.
Font-variant: small-caps; // case sensitive. The browser displays the font of small uppercase letters.
Font-weight: bold; // set bold
Font-size: 12px; // The font size is 12 pixels.
Line-height: 1.5em; // The row spacing (Row height) is 1.5 times that of the row.
Font-family: "", sans-serif; // set the Chinese font to and the English font to sans-serif}


Body {
Font: italic small-caps bold 12px/1.5em "", sans-serif;
The first three orders have no effect, but the last two orders are fixed and must have

Simplified sequence: font-style | font-variant | font-weight | font-size | line-height | font-family

Related Article

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: 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.