Цвета CSS — теория и практика

Теория

CSS дает возможность использования 16777216 цветов. Они могут быть представлены именем, rgb-значением (red/green/blue, т.е. красный/зеленый/синий) или hex-кодом.

red

Тоже самое, что и:

rgb(255,0,0)

Что аналогично этому:

rgb(100%,0%,0%)

этому:

#ff0000

и этому:

#f00

В нашем распоряжении 17 допустимых заранее определенных имен для цветов.

Этот список включает в себя:

  • aqua (аква, цвет морской волны);
  • black (черный);
  • синий;
  • fuchsia (фуксия, т.е. пурпурно-розовый);
  • gray (серый);
  • green (зеленый);
  • lime (лайм);
  • maroon (коричнево-малиновый);
  • navy (темно-синий);
  • olive (оливковый);
  • orange (оранжевый);
  • purple (фиолетовый);
  • red (красный);
  • silver (серебряный);
  • teal (сине-зелёный);
  • white (белый);
  • yellow (желтый).

Допустимым цветом является transparent (прозрачный).

Три значения rgb могут принимать значения от 0 до 255, где 0 – это самый низкий уровень (например, нет красного), а 255 – самый высокий уровень (например, полностью красный). Эти значения также могут быть представлены в виде процентов.

Hexadecimal (hex) — это шестнадцатеричная система счисления. Мы обычно используем десятичную систему исчисления (base-10, значения от 0 до 9). В шестнадцатеричной же системе используется 16 значений: от 0 до f.

Дизайнер, использующий шестнадцатеричную систему, обозначает цвет 3 или 6 знаками, перед которыми ставится символ решетки (#). В общем виде, 3-х значная версия — это сжатая версия 6-и значной (#f00 становится #ff0000, а #c96 превращается в #cc9966 и т.п.).

Расшифровывать легче 3-х значную версию (первый символ обозначает красный цвет, второй — зеленый, третий — синий, также как и в системе rgb), однако 6-и значная система дает больше возможности и контроля для выбора конкретного цвета.

‘color’ и ‘background-color’

Вы можете применять цвета, используя color и background-color (помните, что надо использовать американский английский, а не британский, т.е. нельзя написать «colour», только «color»).

Синий фон и желтый текст можно представить следующим кодом:

h1 {
	color: yellow;
	background-color: blue;
}

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

body {
	font-size: 0.8em;
	color: navy;
}

h1 {
	color: #ffc;
	background-color: #009;
}

После сохранения файла CSS, обновите страницу в браузере. Вы заметите, что первый заголовок (элемент h1) станет желтого цвета на синем фоне.

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

Фото




Видео




Автор Cascading Style Sheets