Shulou(Shulou.com)06/03 Report--

What this article shares with you is about the rule statement in CSS. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Without saying much, let's take a look at it.

The CSS rule consists of a selector and a declaration.

A declaration consists of two parts: attributes and values.

The attribute indicates which aspect of the element (color, height, and so on), while the value indicates why the attribute is set (green, 15px, and so on).

The CSS attribute values are mainly divided into the following three categories:

Text value

Numeric value

Color value

1. Text value

Text values are also called keywords. All CSS properties have text values.

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

two。 Numeric value

A numeric value is followed by a unit, such as an inch or a dot. In the declaration font-size:12px, 12 is a numeric value and px is a unit (pixels). If the numeric value is 0, then there is no need to take units.

Numeric values are used to describe the various lengths of an element (in CSS, "length" has a broad meaning, including height, width, thickness, and so on). Digital values are mainly divided into two categories: absolute values and relative values.

2.1 absolute value

The absolute value describes a real length (for example, 6 inches), while the relative value is described relative to other benchmarks (such as "twice the length of so-and-so").

2.2 relative value

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

Ex indicates the height of the letter x in a given font (the lowercase x represents the height of the middle part of the letter of a font, excluding the protruding parts of the letter above and below-such as d and p).

The percentage is ideal for setting the width of the included element, where the percentage is relative to the width. Setting the width of HTML structural elements as a percentage of body width is the key to streaming design. This layout design can scale proportionally as the user resizes the browser window.

3. Color value

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

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

3.1 Color name

The W3C defines 16 color keywords:

Aqua (light green), black (black), blue (blue), fuchsia (fuchsia),

Gray (gray), green (green), lime (yellowish green), maroon (maroon),

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

Silver (silver), teal (cyan), white (white) and yellow (yellow).

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

3.2 Hex color

Format: # rrggbb

Example: # ff8800

Description:

The first two digits of the six digits define red, the middle two define green (green), and the last two define blue (blue).

Hexadecimal is based on 16, using the number 0-9 and the letter Amurf, a total of 16 values. Where aMuf stands for 10 to 15. Because each color is represented by two-digit hexadecimal values, the color has 256 (16 x 16) possible values, resulting in 16777216 combinations, that is, so many colors can be represented.

The range is hexadecimal. 00 quotient 00 indicates no color, while ff indicates the strongest color. So # 000000 is black, # ffffff is white, similarly # ff0000 is pure red, # 00ff00 is pure green, and # 0000ff is pure blue.

If each of the three pairs of values is two identical numbers, you can also use the abbreviated form: # rgb

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

Tip: when setting shadows, shorthand can save a lot of effort.

3.3 RGB color valu

Format: rgb (r, g, b)

Example: rgb (0,255,0)

Description:

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

It is the same as the hexadecimal RGB value, except that the decimal value is used. Because each color has 256 possibilities, it can represent the same number of colors as in hexadecimal format.

3.4 RGB percentage value

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

Description: acceptable values are 0% to 100%. Although only 1 million colors can be represented in this way, it is enough for most of us.

3.5 HSL

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

Description:

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

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

The color revolves around the hue ring (also known as the color wheel), and the hue value is expressed in degrees on the circle.

The approximate hue value of the rainbow seven colors in the color wheel:

Red: 0

Orange: 35

Huang: 60

Green: 125

Blue: 230

Indigo: 280

Purple: 305

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

If you remember all the hue values of the above seven rainbows, or keep them at hand, you will find that it doesn't matter what color you want to write. Both RGB and hexadecimal color values require you to mix colors in your brain in advance, while HSL has only one color value. Set the saturation and brightness to 50%, and you can easily make any color you want.

3.6 Alpha Channel

Both RGB and HSL support the Alpha channel, which sets the opacity of the color. The corresponding formats are called RGBA and HSLA respectively. Where the A (alpha) value in both formats can be 1 (completely opaque), 0 (completely transparent), or a decimal value between 1 and 0.

This is what the rule statement in CSS looks like, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.