web-разработка

Как использовать цвета

CSS позволяет использовать почти 16.777.216 цветов. Они могут быть представлены либо именем, либо функциональным значением rgb (red/green/blue), либо шестнадцатеричным кодом. Пример использования цвета:
// разные написания красного цвета:

red

rgb(255,0,0)

rgb(100%,0%,0%)

#ff0000

#f00
Существует 17 предопределенных имен цветов. Это aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white и yellow. Плюс еще один – transparent.
Значения для функциональной записи (rgb), должны быть числом в диапазоне 0-255. Это число представляет уровень конкретного составного цвета (всего составных цветов три – красный, зеленый, синий) – 255 максимальный и 0 минимальный. Также уровень этих цветов можно определять в процентах.
Шестнадцатеричный код основывается на шестнадцатеричной системе исчисления, в которой кроме цифр от 0 до 9 также используются латинские буквы от A до F. Перед шестнадцатеричным кодом ставится символ решетки (#), и он может состоять либо из трех, либо из шести цифр.
Есть много сайтов где можно найти таблицы всех CSS цветов и их коды. Вот один из них «comhub.ru»

Цвет текста

Цвет текста определяется свойством color. Синтаксис свойства:
color: цвет | initial | inherit;
  • цвет — устанавливает цвет фона;
  • initial — значение наследуется от родительского элемента;
  • inherit — устанавливает значение по умолчанию.

Пример, сделаем цвет текста красным:
p {
 color: red;
}

Цвет фона

Цвет фона определяется свойством background-color. Синтаксис свойства:
background-color: цвет | transparent | initial | inherit;
  • цвет — устанавливает цвет фона;
  • transparent — значение по умолчанию. устанавливает, что фон должен быть прозрачным;
  • initial — устанавливает значение по умолчанию;
  • inherit — значение наследуется от родительского элемента.

Пример, установим цвет фона различным элементам:
body { // тег html (означает тело страницы)
   background-color: yellow;
}
h1 {
   background-color: #00ff00;
}

p {
   background-color: rgb(255,0,255);
}
2023-11-17 23:08 Самоучитель по CSS