Как задать цвет текста в css?

CSS можно применять для настройки размеров, расположения, полей и промежутков, очередности слоев, а также множества других характеристик отображения элементов на экране. Одним из наиболее важных аспектов считаются цвета CSS. Практически все элементы веб-страницы можно “раскрасить” с помощью CSS.

Свойство CSS Color

Свойства color воздействует не на сам элемент (блок), а на шрифт внутри него. Цвет элемента обычно регулируется с помощью свойств background-color, border-color, а также сокращенных версий свойств background и border. Также можно использовать свойство box-shadow, которое отвечает за тень элемента.

Свойство background-color, примененное к элементу, отвечает за его содержимое, поля и границы. Но есть способы оформить поля и контент разными цветами.

Объявление цвета


Есть три способа определения цвета текста CSS: RGB-значение, HEX и название:

/* Давайте подробнее рассмотрим все три способа. */

.red-rgb {
 background-color: rgb(255, 0, 0);
}

.red-hex {
 background-color: #ff0000;
}

.red-name {
 background-color: red;
}

Второй по счету пример (HEX-значение) наиболее распространен. Но HEX-значение покажется абсолютно бессмысленным, если вы не знакомы с принципом работы модели RGB.

RGB-значения

На цветных экранах устройств каждый пиксель делится на три субпикселя: красный, зеленый и синий — так называемые “первичные цвета света”. Комбинация этих трех цветов с различной интенсивностью позволяет получить любой оттенок, который способен распознать человеческий глаз и формирует таблицу цветов CSS.

Модели дисплеев различаются между собой по диапазону интенсивности излучения, который могут воспроизвести субпиксели. Самый простой экран может иметь лишь две интенсивности (то есть, режимы «включено» и «выключено»), в то время как высокотехнологичные современные экраны способны предложить обширную градацию. Обычно в компьютерных мониторах используются шкала от 0 до 255. Интенсивность каждого субпикселя может иметь значение до 256. А это значит, что значение каждого субпикселя можно хранить в виде 8-битного байта (28 = 256). Так как задействуется три цвета, то каждый из них представляется в 8 битах. Общее количество цветов превышает 16 млн. (2563 = 16,777,216).

Эту шкалу цветов можно задействовать, указывая значение каждого субпикселя следующим образом:

rgb(0, 128, 255)

В данном примере красный субпиксель выключен, зеленый используется наполовину, а синий — полностью включен. Такое объявление позволит нам получить следующий цвет:

следующий цвет

В рамках данной системы объявление белого цвета (все цвета включены) выглядит так: rgb (255, 255, 255). Объявление черного цвета (все цвета выключены): rgb (0, 0, 0).

RGB-цвета также можно указывать в процентном соотношении, используя десятичные числа, но такой способ не получил широкого распространения:

rgb (0.0, 50.0, 100.0)

HEX-значения

Аналогичный результат можно получить более простым — используя HEX-значение. Оно задается с использованием хэша (#) и 6 символов, разделенных на три пары:

#0080ff

Первая пара цвета в CSS отвечает за красный, вторая отвечает за зеленый, третья – за синий. В данном примере 00 означает, что красного не будет вообще. 80 указывает, что зеленый задействован наполовину, а ff означает полное включение синего цвета. То есть, мы получим тот же результат, что и при rgb (0, 128, 255).

Поначалу это может сбивать с толку, особенно если вы раньше никогда не работали с шестнадцатеричными числами. В привычной десятичной системе у каждого символа есть 10 значений от 0 до 9. В шестнадцатеричной – у каждого символа 16 возможных значений (0-9 и a-f). Это и позволяет указывать цвета от 0 до 255 при помощи двух символов, 0 = ff. В рамках шестнадцатеричной системы, белый цвет обозначается как #ffffff, а черный – #000000. HEX-значения наиболее часто используются для указания цветов в CSS.

Названия цветов в CSS

Последний способ указания цветов в CSS заключается в использовании предопределенных названий конкретных цветов. W3C регулярно обновляет таблицу цветов CSS. Например, вместо #000000 можно использовать название black.

На «заре» интернета эти названия позволяли использовать небольшой неофициальный набор “безопасных для веб” цветов, которые точно поддерживались всеми доступными на тот момент браузерами.

На сегодняшний день одно из главных преимуществ данного подхода заключается в том, что эти названия цветов гораздо проще запомнить. Например, слово lightblue (светло-голубой) запомнить гораздо проще, чем его эквиваленты: #add8e6 или rgb (173, 216, 230).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

  bigmir)net TOP 100  - .  E-mail: sitesnulyaru@gmail.com