Цвета и CSS

Уроки по CSSSoftMaker.kz

Здравствуйте, уважаемые коллеги! В этой статье мы поговорим о цветах в каскадных таблицах стилей (CSS). Как и статья о CSS свойстве font-family этот пост тоже узконаправлен. Здесь изложены базовые знания, опираясь на которые, вы сможете успешно работать как вебмастер. Если вы уже опытный вебдизайнер, то сможете напомнить себе эти базовые принципы и еще больше утвердится в понимании этого вопроса. В конце этого поста вы сможете ознакомиться с бесплатным материалом, который поможет Вам еще глубже окунуться в понимание принципов работы с CSS. Ну что же, давайте приступим!

Согласно стандарту W3C, цвета в CSS имеют как названия, так и цифровые обозначения. Такое определение кажется простым. Цвета определяются либо ключевыми словами, либо цифровыми значениями. Но такое обозначение не такое уж простое, как может показаться.

Ключевые слова

Цвета с ключевыми словами точно такие же, как набор слов в анлийском языке, обозначающих цвета. Эти цвета соответствуют цветам на веб-странице. В HTML 4 существует 16 ключевых слов:

  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • purple
  • red
  • silver
  • teal
  • white
  • yellow

Интересно, что «orange», как указывает W3C, также является ключевым словом в спецификации CSS 2. Возможно, в спецификации CSS 3 перед тем, как она будет, завершена «orange» будет изъята.

Но сложнее, если Вы используете другой список ключевых слов. Эти цвета часто называют Netscape Named Colors, потому что браузер Netscape был первым браузером, который определял и поддерживал цвета по ключевым словам. W3C называет этот список «SVG Color Keywords». Но как бы Вы не называли его, Вы должны быть осторожны, когда используете ключевые слова. Браузер Internet Explorer не любит различное написание ключевых слов, как например gray/grey.

Цифровые значения

Итак, ключевые слова не такие уж простые, как может показаться. Но что можно сказать о цифровых значениях цвета? Они достаточно просты, не так ли? Не верно. Спецификация CSS 2 предоставляет два способа определения цветов как цифровых значений:

  • RGB
  • Шестнадцатиричный RGB

Цифровые значения RGB

Формат цифрового значения RGB:

rgb(red,green,blue);

Значения красного, зелёного и синего цифрового значений изменяються от 0 до 255 или, если в процентном отношении, от 0% до 100%. Таким образом красный цвет будет таким:

rgb(255,0,0) или rgb(100%,0%,0%)

Шестнадцатиричное цифровое значение Цвета

Шестнадцатиричное цифровое значение цвета RGB — указывает на те же цвета, но написано по другому для учета различий в том, как браузеры работают с CSS.

Шестнадцатиричные цифровые значения цвета это теже цифровые RGB, переведенные в шестнадцатиричную кодировку и записаны как одно длинное число. Шестнадцатиричная схема цвета легко читается. Она пишется так: #RRGGBB

Каждая пара шестнадцатиричной триады это число от 00 до FF (в шестнадцатиричной кодировке), соответственно в десятичной от 0 — 255. Таким образом, красный цвет записывается так: #ff0000

Цифровые значения цвета в CSS 3

CSS 3 добавляет некоторые дополнительные сложности в цифровые значения цвета:

  • ключевые слова для прозрачного цвета
  • цветовые значения RGBA
  • цветовые значения HSL

Ключевые слова для прозрачного цвета не совсем новое в CSS 3. CSS 1 позволял указывать прозрачный цвет заднего фона. Потом в CSS 2 прозрачный цвет разрешили для свойства border-color. CSS 3 расширил возможности прозрачного цвета и теперь его можно использовать в любом свойстве, которое использует значения цвета, включая цвета текста и подсветки текста.

Значения цвета RGBA позволяют Вам определять непрозрачность цвета:

rgba(red,green,blue,opacity)

Последнее значение это альфа-фактор диапазона от 0.0 до 1.0. Цвет альфа-фактора 0.0 полная прозрачность и альфа-фактор 1.0 полная непрозрачность соответственно. Согласно спецификации, если пользовательский агент не поддерживает RGBA он должен работать с простым RGB и игнорировать альфа-фактор. Однако, на практике этого не случается и значения цвета игнорируются полностью.

Модель цветовоспроизведения тон-насыщенность-яркость (hue-saturation-lightness) HSL относится к цветам с цифровой кодировкой. Эта модель была добавлена, чтобы решить некоторые специфические проблемы с RGB:

  • RGB аппаратно-ориентированная модель. Она относится к оборудованию на электронно-лучевых трубках (CRT). Большинство профессиональных принтеров не основаны на RGB, но световой режим голубой-пурпурный-желтый-черный (CMYK) и трансляция с экрана на принтер не всегда надежны.
  • RGB не является интуитивно понятной моделью. Другими словами, большинство людей думают о цветах, как об оттенках (красный в сравнении с желтым), насыщенности (серый в сравнении с красным) или яркости (темно-красный, красный, розовый), но RGB заставляет Вас устанавливать цвета в соответствии с машинной моделью.

Красный цвет в HSL будет таким:

hsl(0,100%,50%);

HSL также имеет систему обозначений альфа-фактор — HSLA — который позволяет Вам определять непрозрачность с этой системой обозначений цветов как и RGBA.

HSL не поддерживается большинством браузеров, но это хорошая идея, чтобы использовать эту систему обозначений в будущем.

Источник: www.webdesign.org

/от