Summary of common css attributes: Color and unit, css attribute Summary

Summary of common css attributes: Color and unit, css attribute Summary

In css code writing, it is essential to estimate the color and unit. However, there are many ways to write the color and unit value in css, so it is necessary to clarify it.

Color

When I was a beginner, I came up with a question: "How do I set the webpage color ?", Generally, you can set the color by using an English Color name or a hexadecimal color value. However, there are other complex elements in css.
Statement.

RGB color

Computers use different levels of red, green, and blue to generate new colors, which are commonly referred to as RGB colors. With such a color generation mechanism, you can determine the color by directly giving different color levels, you can go by yourself
Combine values of three colors.

Statement:
H1 {color: rgb (100%, 100%, 100%)} percentage of rgb colors, numbers ranging from 0% to 100%
H1 {color: rgb (0,255,255)} Digital rgb color, ranging from 0 to 255

Note: The value of both methods will be trimmed, and the percentage will be trimmed to 0%-100%, that is, the value exceeding 100% will be trimmed to 100%, and the percentage lower than 0% will be trimmed to 0%, the number is trimmed to 0-255. In addition, the two cannot be mixed, and mixed write will not take effect.

We will not mention the hexadecimal color and color name settings.

Unit

Length unit: generally divided into absolute unit and relative unit. The absolute unit was rarely used since its birth, at least I usually seldom used it in projects. Therefore, the introduction of absolute unit is skipped.

Relative unit: There are three relative length units, em, ex, and px. The first two represent "the font height of the element" and "the height of the letter shezhi 'X' respectively. They are measurements of normal printing, and the last px represents" pixels ", the reason why it is
It depends on the display resolution.

Em: in css, an "em" is the font-size value of the given font. The only exception is to set the font size. In this case, the em value is relative to the parent element.

For example

• Body {font-size: 20px ;}
• P {font-size: 1em ;}

The font size of p is 20 PX instead of 16 PX by default.

Px: set by pixel value px. For example
Body {font-size: 20px ;}
P {font-size: 16px ;}
The font size of the p element is 16 PX.

Percentage value: compared with the unit of the same length, the percentage is very simple, that is, a percentage value. For example:
H1 {line-height: 150%;} sets the height of all h1 rows to half that of normal rows.

In short, the percentage is always calculated by another value, which will be described in the subsequent attribute descriptions. And the percentage can be positive or negative. For some attributes, only positive values are accepted.

There is so much content today, and the writing is a bit messy. I hope the better I write it in the future.