14th CSS Color and unit of measure

Learning Essentials:

1. Color Table Scheme

2. Unit of Measure

Keynote Teacher: Li Tinghui

This chapter mainly discusses the problems of CSS color and unit of measure in HTML5, including how to choose color, relative length and absolute length.

A Color Table Scheme

There are three main ways to represent colors: color names, hexadecimal codes, and decimal codes.

{    color: red;}

Explanation: This is to set the text in a paragraph to red, using the English color name. The question is, how are we going to set up all the other colors?

In the ancient HTML4, there were only 16 color names.

Color name	Hex Code	Decimal code	Meaning
Black	#000000	0,0,0	Black
Silver	#c0c0c0	192,192,192	Silver
Gray	#808080	128,128,128	Grey
White	#ffffff	255,255,255	White
Maroon	#800000	128,0,0	Maroon
Red	#ff0000	255,0,0	Red
Purple	#800080	128,0,128	Purple
Fuchsia	#ff00ff	255,0,255	Purple
Green	#008000	0,128,0	Green
Lime	#00ff00	0,255,0	Flash Green
Olive	#808000	128,128,0	Olive color
Yellow	#ffff00	255,255,0	Yellow
Navy	#000080	0,0,128	Navy blue

0,255,255

TD valign= "Bottom" width= "124" >

Blue	#0000ff	0,0,255	blue
Teal	#008080	0,128,128	Duck color
Aqua	#00ffff	light green

Of course, the color name is far more than this, you can search more HTML color table or CSS color table lookup. Here are a few pages :

Http://xh.5156edu.com/page/z1015m9220j18754.html

Http://finle.me/colors.html

Http://www.w3school.com.cn/tags/html_ref_colornames.asp

In the table above, we also list the corresponding 16 binary and decimal color representation methods. Here's how to use it:

Red Hex Scheme

{    color: #ff0000;}

The decimal notation method is more diversified, there are four kinds of scenarios:

Function	Description	Example
RGB (R,G,B)	Representing colors with an RGB model	RGB (0,128,128)
RGBA (R,g,b,a)	Ibid., a means transparency 0~1 between	RGBA (0,128,128,0.5)
HSL (h,s,l)	Use HSL models (hue, saturation, and transparency) to represent colors	HSL (120,100%,30%)
Hsla (H,s,l,a)	Ibid., a means transparency 0~1 between	Hsla (120,100%,30%,0.5)

{    color: RGB (+/-);     color: rgba (0, +, 0.5);     color: HSL (100%, 30%);     Color: hsla (100%, 30%, 0.5);}

There is also a question of where these values are obtained. In addition to the color table, you want to fine-tune your color values. We can use the palette of graphic design software like Photoshop to get the corresponding values.

Two Unit of Measure

In CSS length settings, we often need to use the unit of measure, that is, in what units to design our font or border length. In CSS, the length unit is divided into absolute length and relative length.

Absolute length refers to the real-world unit of measurement, and CSS supports five absolute-length units.
Absolute length Unit
Unit identifiers	Description
Inch	Inches
Cm	Cm
Mm	Mm
Pt	Pounds
Pc	Pica
Relative length refers to other types of units, but also five kinds.
Relative length units
Unit identifiers	Description
Em	Hook with element font size
Ex	Hook to the "x-height" of the element font
Rem	Hook to the font size of the root element
Px	Pixels, linked to resolution
%	Percentage relative to another value

Below we use some common units as a demonstration, rather than the basic use of the demo.

EM relative units

{    margin: 0;     padding: 0;     background: silver;     font-size: 15px;     height: 2em;}

Explanation: EM is a relative unit, linked to the font size, will change its size depending on the font size, flexibility is high.

PX relative units, absolute characteristics

{    margin: 0;     padding: 0;     background: silver;     font-size: 15px;     height: 55px;}

Explanation: Although PX is also a relative unit, due to the resolution hook, he actually becomes an absolute unit, natural flexibility is not high, but the use of low-level, and a large number of developers habitually use it.

Percent%

{    margin: 0;     padding: 0;     background: silver;     font-size: 200%;     width: 50%;}

Explanation: A good understanding of length is the width of the block in which it is located. The font-size is the percentage of the original size that is inherited to.

14th CSS Color and unit of measure