Learning html (fourteen) units and values from scratch, and starting from scratch html units

Learning html (fourteen) units and values from scratch, and starting from scratch html units
I. color value

1 <! Doctype html> 2 Color value
Color settings on webpages are very important, including the font color, background-color, and border color. There are also 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 color in photoshop, which is determined by the ratio of R (red), G (green), and B (blue) colors.
p{color:rgb(133,45,200);}
The value of each item can be 0 ~ An integer between 255 and 0% ~ The percentage of 100%. For example:
p{color:rgb(20%,33%,25%);}
3. hexadecimal color
This color setting method is now widely used, and its principle is actually RGB settings, but the value of each item changes from 0-255 to hexadecimal 00-ff.
p{color:#00ffff;}
Color Table:

(You can click an image to enlarge it)
Task
To try: Set the color of the text to # 0fc;

 

 
  

    The reference code is as follows: 
  
 
  

    P {color: # 0fc ;} 
  

 
Ii. Length Value
1 <! Doctype html> 2 Length Value
The unit of length is summarized. Currently, px, em, and % are commonly used. Note that these three units are relative units.
1. pixels
Why is the pixel relative unit? Because pixels refer to small dots on the display ("90 pixels = 1 inch" in CSS specifications ").
 
The actual situation is that the browser will use the actual pixel value of the display, and most designers currently tend to use pixel (px) as the unit.
2. em
It is the font-size value of the font-size given by the current element. If the font-size of the element is 14px, 1em = 14px; if the font-size is 18px, 1em = 18px. The following code:
p{font-size:12px;text-indent:2em;}
The code above can be used to indent the first line of a paragraph by 24px (that is, the distance between two fonts ).
Note the following special situation:
However, when the unit of font-size is set to em, the calculation standard is based on the font-size of the parent element of p. The following code:
Html:
<P> take the <span> example </span> as an example. </P>
Css:
p{font-size:14px}span{font-size:0.8em;}
Result The font size of the font "example" in span is 11.2px (14*0.8 = 11.2px ).
3. Percentage
p{font-size:12px;line-height:130%}
Set the Row Height (row spacing) to 130% (12*1.3 = 15.6px) of the font ).