CSS common attributes color and unit

In css code writing, estimating colors and units is essential. However, there are many ways to write colors and unit values ​​​​in css, so it is necessary to clarify it.

Color

When I was just learning the front-end, a question arose: “How should I set it up? Web page color?" English color names or hexadecimal color values ​​are generally used to set colors, but there are some other more complicated
writing methods in CSS.

RGB color

The computer generates new colors through different levels of red, green, and blue, which are often referred to as RGB colors. With such a color-generating mechanism, you can determine the color by directly giving different color levels, and you can
combine the values ​​​​of the three colors yourself.

Writing method:
h1{color:rgb(100%,100%,100%)} Percent rgb color writing method, the number range is from 0% to 100%
h1{color:rgb(0,255,255)} Number rgb color writing method, the number range is from 0 to 255

Note: the values ​​​​of the two writing methods will be trimmed, the percentage will be trimmed to 0%-100%, that is, if it exceeds 100%, it will be trimmed to 100%, if it is less than 0%, it will be trimmed to 0%, and the number will be trimmed to 0-255. In addition, the two cannot be mixed. Write, mixed writing will not take effect.

Hexadecimal color and color name setting color we will not mention anymore

Unit

Length units: generally divided into absolute units and relative units. Absolute units have rarely been used since their birth, at least I rarely use them in projects. Therefore, the introduction of absolute units is skipped here.

Relative units: 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 in ordinary printing. The last px represents "pixels". The reason why it is
is relative because it relies on the resolution of the display.

em: In CSS, an "em" is the font-size value of a given font. The only exception is when setting the font size, in which case the em value is relative to the parent element.

such as

• body{font-size:20px;}

• p{font-size:1em;}

##The font size of p is 20px instead of the default 16px.

px: Set according to the pixel value px. For example,
body{font-size:20px;}
p{font-size:16px;}
p element font The size is 16px

Percentage value: Compared with the length unit, the percentage is very simple, it is a percentage value. For example:
h1{line-height:150%;} Set the line height of all h1 to half the normal line height.

In short, the percentage is always calculated through another value, which will be mentioned one by one in the explanation of properties later. Moreover, the percentage can be positive or negative. For some attributes, only positive values ​​are accepted, which is another story.

Today’s content is so much, and the writing is a bit messy. I hope that I will write better and better in the future.

For more articles related to the colors and units of common css attributes, please pay attention to the PHP Chinese website!