Detailed CSS Rules declaration

CSS rules consist of selectors and declarations, and this article is going to say the second part: declarations.

A declaration consists of two parts: a property and a value.

property indicates which aspect of the element (color, height, and so on) is to be affected, and the value indicates why the property is set (green, 15px, and so on).

CSS property values are mainly divided into three categories:

Text value

numeric value

Color values

1. Text value

The literal value is also called a keyword. All CSS properties have text values.

For example, the Border-style property has solid, dashed, and insert values.

2. Numeric value

The number value is followed by a unit, such as inches or dots. In the declaration font-size:12px, 12 is a numeric value, and PX is a unit (pixel). If the numeric value is 0, then you don't have to take the unit.

Numeric values are used to describe the various lengths of the elements (in CSS, "length" has a broader meaning, including height, width, thickness, etc.). Numeric values are mainly divided into two categories: absolute value and relative values.

2.1 Absolute Value

The absolute value describes a true length (for example, 6 inches), whereas relative values are described relative to other benchmarks (such as "twice times the length of xxx").

2.2 Relative values

EM represents the width of the letter M in a font, so its specific size depends on the font you use.

An ex represents the height of the letter x in a given font (the lowercase letter x represents the height of the middle portion of the letter of a font, excluding the upper and lower parts of the letter, such as D and P).

Percentages are ideal for setting the width of the included element, which is relative to the width. The key to streaming design is to set the width of the HTML structure element as a percentage of the body width. This layout design can scale proportionally as the user adjusts the size of the browser window.

3. Color value

Color values can be written in several different formats, including RGB (red, green, blue, red, green, blue),

HSL (Hue, saturation, luminance, hue, saturation, brightness) and hexadecimal values (for example, color: #336699)

3.1 Color Name

The consortium defines 16 color keywords:

Aqua (light green), black (dark), Blue (blue), fuchsia (magenta),

Gray (Grey), green (greenish), lime (yellow-green), maroon (brownish-red),

Navy (dark blue), olive (tea cyan), purple (purple), red (red),

Silver (silver), teal (cyan), White (black) and yellow (yellow).

Tip: In general, color keywords are most commonly used to specify white and black.

3.2 Hexadecimal colors

Format: #rrggbb

Example: #ff8800

Description

This 6-digit first two-digit definition is red, the middle two-bit green is defined, and the two-bit definition is blue.

Hexadecimal is based on 16, using the number 0-9 and the letter a-f, a total of 16 values. Of these, a-f represents 10 to 15. Because each color is represented by a two-bit hexadecimal value, the color has 256 (16x16) possible values, and the result is a 16777216 (256x256x256) combination that can represent so many colors.

A range of 16 00-ff,00 indicates no color, and FF represents the strongest color. So #000000 represents black, #ffffff is white, the same #ff0000 represents pure red, #00ff00 is pure green, and #0000ff is pure blue.

If each pair in the three pair is two identical numbers, you can also use the shorthand form: #rgb

Example: #ff3322 = #f32 (dark red), #ffffff = #fff (white)

Hint: When setting shadows, the shorthand method can save a lot of effort.

3.3 RGB color values

Format: RGB (R, G, b)

Example: RGB (0, 255, 0)

Description

Each color can be specified with a value between 0 and 255 (inclusive).

As with hexadecimal RGB values, only decimal values are used. Because each color has 256 possibilities, it can represent the same number of colors as in hexadecimal format.

3.4 RGB Percent value

Format: rgb (r%, g%, b%)

Description: Acceptable values are 0% to 100%. Although this method can only represent a mere 1 million (100x100x100) color, but for the vast majority of us, it is enough.

3.5 HSL

Format: HSL (hue, saturation%, brightness%)

Description

HSL is more intuitive than the various RGB methods we've seen, because it's easier to write and read colors.

The first value in the HSL color represents the hue, which is an actual color, such as red and green. All

The colors surround the hue ring (also called the Color Wheel) for a week, and the hue value is expressed in degrees on the circumference.

Rainbow Seven color in the color wheel of the approximate hue value:

Red: 0

Orange: 35

Yellow: 60

Green: 125

Blue: 230

Indigo: 280

Violet: 305

Saturation set how many colors, gray saturation is low, and strong color saturation high. Brightness set the color of the light and shade, 0% is black, 100% is white.

If you remember the hue value of the seven rainbows above, or just keep it handy, then you'll find it easy to write any color. RGB and hexadecimal color values require you to first mix the color in the brain, whereas HSL only has a value that represents the color. By setting the saturation and brightness to 50%, you can easily modulate any color you want.

3.6 alpha Channel

Both RGB and HSL support Alpha channels, which are used to set the opacity of the color. The corresponding formats are called RGBA and HSLA respectively. where a (alpha) value in either format can be 1 (completely opaque) or 0 (fully transparent), or a decimal value between 1 and 0.