1. Color 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
The first few This setting method is often used in this section:
p{color:red;}
2) RGB color
This is consistent with the RGB color in photoshop, consisting of R(red), G(green), B(blue) The ratio of the three colors to color matching.
p{color:rgb(133,45,200);}
The value of each item can be an integer between 0~255, or a percentage of 0%~100%. Such as:
p{color:rgb(20%,33%,25%);}
3) Hexadecimal color
This color setting method is a more commonly used method now, and its principle is actually RGB setting, but each of its The value of the item changed from 0-255 to hex 00-ff.
p{color:#00ffff;}
2. Length value
At present , px (pixel), em, and % are commonly used. It should be noted that these three units are relative units.
1)
Pixel Why is a pixel a relative unit? Because pixels refer to small dots on a display (the CSS spec 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 the pixel (px) as the unit.
2) em
It 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;}
Note a special case below:
but when the unit of font-size is set to em, the standard calculated at this time is the font-size of the parent element of p as the basis. The following code:
html:
<p>Take this <span>example</span> as an example. </p>
css:
p{font-size:14px}
span{font-size:0.8em;}
p{font-size:12px;line-height:130%}
sets the line height (line spacing) to 130% of the font (12 * 1.3 = 15.6px)
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
The first few This setting method is often used in this section:
p{color:red;}
2) RGB color
This is consistent with the RGB color in photoshop, consisting of R(red), G(green), B(blue) The ratio of the three colors to color matching.
p{color:rgb(133,45,200);}
The value of each item can be an integer between 0~255, or a percentage of 0%~100%. Such as:
p{color:rgb(20%,33%,25%);}
3) Hexadecimal color
This color setting method is a more commonly used method now, and its principle is actually RGB setting, but each of its The value of the item changed from 0-255 to hex 00-ff.
p{color:#00ffff;}
2. Length value
At present , px (pixel), em, and % are commonly used. It should be noted that these three units are relative units.
1)
Pixel Why is a pixel a relative unit? Because pixels refer to small dots on a display (the CSS spec 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 the pixel (px) as the unit.
2) em
It 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;}
Note a special case below:
but when the unit of font-size is set to em, the standard calculated at this time is the font-size of the parent element of p as the basis. The following code:
html:
<p>Take this <span>example</span> as an example. </p>
css:
p{font-size:14px}
span{font-size:0.8em;}
The resulting font "example" in the span has a font size of 11.2px (14 * 0.8 = 11.2px).
p{font-size:12px;line-height:130%}
sets the line height (line spacing) to 130% of the font (12 * 1.3 = 15.6px)