Свойство color, цвет текста

Мы помним, что цветом текста и фона можно управлять свойствами color и background-color.

Теперь разберёмся подробно со значениями этих свойств.

Цвет может быть задан в виде ключевого слова (полный список ключевых слов приводится в спецификации). Например:

color: black; /* чёрный цвет */
color: red;   /* красный цвет */
color: white; /* белый цвет */

Ещё один вариант указания цвета — в виде шестнадцатеричного значения. Именно им мы пользовались в прошлом задании. В этом случае цвет формируется из красной, зелёной и синей составляющих, заданных в виде шестнадцатеричного числа от 00 до ff. Помимо шести, цветовой код может содержать три знака, в этом случае второй символ в цветовых составляющих дублируется первым:

color: #000000; /* чёрный цвет */
color: #f00;    /* красный цвет, то же что #ff0000 */
color: #fff;    /* белый цвет, то же что #ffffff */

Если не хочется иметь дело с шестнадцатеричными значениями, можно воспользоваться специальной функцией rgb, в которой указывается цвет в более привычном десятичном виде в диапазоне от 0 до 255 также в виде трёх цветовых составляющих, перечисленных через запятую:

color: rgb(0, 0, 0)       /* чёрный, то же что #000000 */
color: rgb(255, 0, 0)     /* красный, то же что #ff0000 */
color: rgb(255, 255, 255) /* белый, то же что #ffffff */

У функции rgb есть расширенная версия — rgba. В этом случае помимо указания цвета последним значением указывается степень непрозрачности цвета — alpha. Значение может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

color: rgba(0, 0, 0, 0.5)      /* чёрный, непрозрачный на 50% */
color: rgba(255, 0, 0, 0.3)     /* красный, непрозрачный на 30% */
color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */