Detailed explanation of CSS properties: color properties

Detailed explanation of CSS properties: color properties

CSS (Cascading Style Sheet) is a markup language used to describe the style of web pages. Among them, the color attribute is one of the most commonly used attributes in CSS. By using color attributes, we can change the text color, background color, border color, etc. of elements on the page to achieve visual effects and beautification.

1. Methods of expressing color values

In CSS, there are many ways to express color values, including the following:

1. Color name: by reference Represented by predefined color names, such as "red" for red and "green" for green.
2. RGB value: RGB is a combination of red, green, and blue colors, which can be represented by numbers. The value range is 0~255, which can be represented by the rgb() function. For example, rgb(255, 0, 0) represents red.
3. Hex values: Colors can also be represented in hexadecimal, consisting of three or six hexadecimal characters. Each hexadecimal character corresponds to a certain component in RGB, for example #FF0000 represents red.

2. Application of color attributes

1. Text color (color)

By setting the color attribute, you can change the color of the text. For example:

p {
  color: blue;
}

At this time, the text in all p elements will be displayed in blue.

2. Background color (background-color)

You can change the background color of an element by setting the background-color attribute. For example:

div {
  background-color: #FF0000;
}

At this time, the background color of all div elements will become red.

3. Border color (border-color)

By setting the border-color attribute, you can change the color of the element border. For example:

button {
  border-color: green;
}

At this time, the border color of all button elements will change to green.

4. Link color (a:link, a:visited, a:hover, a:active)

By setting the color attribute of the link, you can control the link in different states The color below. For example:

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

At this time, the links are represented as blue (not visited), purple (visited), red (mouseover), and green (clicked).

3. Color Transparency

In CSS3, we can also achieve the translucent effect of elements by setting the transparency attribute of the color. Transparency is expressed in RGBA or HSLA format, where A represents transparency, and the value range is 0~1. For example:

div {
  background-color: rgba(255, 0, 0, 0.5);
}

At this point, the background of the element will become red and semi-transparent, with a transparency of 50%.

4. Summary

Color attributes are widely used in CSS. From text color to background color, border color, etc., everything can be achieved through this attribute. At the same time, we can also achieve the translucent effect of elements by setting transparency. Mastering the use of color attributes can allow us to better beautify web pages and improve user experience.

The above is the detailed content of Detailed explanation of CSS properties: color properties. For more information, please follow other related articles on the PHP Chinese website!