[CSS Note 9] Units and Values

1. Color value
Color settings in web pages are very important, including font color (color), background color (background-color), border color (border), etc. There are also many ways to set colors:

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 color 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 a more commonly used method now. Its principle is actually RGB setting, but its The value of each item changes from 0-255 to hexadecimal 00-ff.

p{color:#00ffff;}

2. Length value
To summarize the length unit, px (pixel), em, and % are commonly used. It should be noted that these three units are actually relative units.

1. Pixel

Why is pixel a relative unit? 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 the unit.

2, em

is the font-size value of the given font of this element. If the font-size of the element is 14px, then 1em = 14px; if the font-size is 18px, then 1em =18px. The following code:

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

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

Note a special case below:

But when the unit for font-size is set to em, the calculation standard at this time is based on the font-size of the parent element of p. The following code:

html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}

The resulting font "example" font size in span is 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).

The above is the content of [CSS Note 9] units and values. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!