HTML learning (7): abbreviation of box model code and unit and value

1. Box model code shorthand

Remember when talking about the box model margins (margin) , Padding (padding) and frame (border) set four directions margins are set in a clockwise direction: the bottom-right-left. Examples of specific applications in margin and padding are as follows:

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

There are usually the following three abbreviations:

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

margin:10px 10px 10px 10px;

Can be abbreviated as:

margin:10px;

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

margin:10px 20px 10px 20px;

Can be abbreviated as:

margin:10px 20px;

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

margin:10px 20px 30px 20px;

Can be abbreviated as:

margin:10px 20px 30px;

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

2. Color value abbreviation

The css style of the color can also be abbreviated. When the color you set is a hexadecimal color value, if the two-digit value is the same, you can abbreviate half.

Example 1:

p{color:#000000;}

Can be abbreviated as:

p{color: #000;}

Example 2:

p{color: #336699;}

Can be abbreviated as:

p{color: #369;}

3. Font abbreviations

The font css style code in the web page also has his 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 be abbreviated as one sentence:

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

note:

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

2. In the abbreviation, add "/" slash between font-size and line-height.

In general, because English is still relatively rare for Chinese websites, the following abbreviated codes are more commonly used:

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

There are only font size, line spacing, Chinese font, English font settings.

4. Color value

The color setting in the web page is very important, there are font color (color) , background color (background-color) , ** border color (border) **, etc., there are many ways to set the color:

1. English Command Color

This setting method is often used in the previous sections:

p{color:red;}

2. RGB color

This is consistent with the RGB colors in Photoshop, and is matched by the ratio of the three colors R (red), G (green), and B (blue).

p{color:rgb(133,45,200);}

The value of each item can be an integer between 0 and 255, or a percentage between 0% and 100%. Such as:

p{color:rgb(20%,33%,25%);}

3. Hexadecimal color

This color setting method is now more commonly used. Its principle is actually RGB setting, but the value of each item is changed from 0-255 to hexadecimal 00-ff.

p{color:#00ffff;}

Color matching table:

5. Length value

Unit of length sum up, the current commonly used to px（像素）, , em, % 百分比in fact, pay attention to these three units are in relative units.

1. Pixel

Why are pixels relative units? Because pixels refer to small dots on the display (the CSS specification assumes ** "90 pixels = 1 inch" ). The actual situation is that the browser will use the actual pixel value of the display. At present, most designers tend to use pixels (px) ** as a unit.

2. in

This element is given font font-sizeValue, if the element font-sizeis 14px, then ** 1em = 14px; ** if font-sizeis 18px, then 1em = 18px . The following code:

p{font-size:12px;text-indent:2em;}

The above code can indent the first line of the paragraph by 24px (that is, the distance between the two font sizes).

Note a special case below:

But to the font-sizesetting unit is em, calculated at this time to standards parent element of p font-sizeis based. The following code:

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

As a result, the font "example" in the span has a font size of 11.2px (14 * 0.8 = 11.2px) .

3. percentage

p{font-size:12px;line-height:130%}

Set the line height (line spacing) to 130% of the font (12 * 1.3 = 15.6px) .