CSS - Цвета: Яркое путешествие для начинающих

Здравствуйте, будущие мастера веб-дизайна! ? Я рад провести вас по красочному миру CSS цветов. Как кто-то, кто teaches это уже много лет, я могу сказать, что понимание цветов в CSS похоже на обучение рисованию кодом. Это весело, креативно и так удовлетворительно, когда вы делаете это правильно!

CSS - Colors

Типы значений для цветов CSS

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

Тип значения цвета	Пример	Описание
Ключевое слово	`red`, `blue`, `green`	Предопределенные имена цветов
Шестнадцатеричный	`#FF0000`, `#00FF00`	Шестнадцатеричные коды, представляющие значения RGB
RGB	`rgb(255, 0, 0)`	Значения Red, Green, Blue (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB с каналом Alpha (прозрачность)
HSL	`hsl(0, 100%, 50%)`	Тон, Насыщенность, Светлота
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL с каналом Alpha

Теперь давайте углубимся в每一种 из них и посмотрим, как мы можем разукрасить наши веб-страницы с их помощью!

Цвет фона CSS

Цвет фона — это как холст вашей веб-страницы. Давайте начнем с простого примера:

body {
background-color: #87CEEB;
}

Этот код устанавливает фон вашей всей страницы в可爱ный голубой цвет. #87CEEB — это шестнадцатеричный код цвета. Представьте его как секретный код, который браузеры понимают для отображения цветов.

Но что, если вы хотите добавить цвет фона только для определенного элемента? Нет проблем!

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

Это сделает любой элемент с классом highlight-box亮的黄色ым фоном. Здесь мы используем значения RGB, где каждое число представляет интенсивность красного, зеленого и синего соответственно.

Цвет текста CSS

Теперь, когда мы покрасили наш фон, давайте покрасим наш текст:

p {
color: #333333;
}

Этот код устанавливает весь текст в параграфах в темный серый цвет. Обратите внимание, что мы используем свойство color для текста, а не text-color. Это одна из тех мелочей, к которым вы привыкните!

Давайте сделаем вещи интереснее:

.warning {
color: rgba(255, 0, 0, 0.7);
}

Это создает полупрозрачный красный цвет для элементов с классом warning. Последнее значение в rgba() — это канал alpha, контролирующий прозрачность от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Цвет borders CSS

Рамки — это как рамка вашей картины. Давайте добавим им немного цвета:

.box {
border: 2px solid #4CAF50;
}

Это создает рамку толщиной в 2 пикселя, сплошную зеленым цветом вокруг элементов с классом box.

Но зачем останавливаться на одном цвете? Давайте украсим:

.fancy-box {
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px solid blue;
border-left: 3px double yellow;
}

Теперь у нас есть разные цвета и стили для каждой стороны рамки. Это как маленькая радужная коробка!

Цвет курсора CSS

Знали ли вы, что вы можете даже изменить цвет мигающего курсора в полях ввода? Это для чего предназначен caret-color:

input {
caret-color: purple;
}

Теперь, когда вы кликните в любое поле ввода, вы увидите fabulous фиолетовый курсор!

Ключевые слова цветов CSS

Иногда вам просто нужно держать вещи простыми. Вот где на помощь приходят ключевые слова цветов:

.sky {
background-color: skyblue;
}

.grass {
background-color: limegreen;
}

.sun {
background-color: gold;
}

Эти предопределенные имена цветов легко запомнить и использовать. В CSS3 есть 140 цветовых ключевых слов, давая вам plenty из вариантов без необходимости запоминать сложные коды.

Ключевое слово наследования цветов CSS

Ключевое слово inherit похоже на то, что вы говорите элементу: "Просто используй тот цвет, который использует твой родитель." Это великолепно для поддержания последовательности:

.parent {
color: blue;
}

.child {
color: inherit;
}

В этом случае, элементы .child также будут синими, наследуя цвет от своего родителя.

Ключевое слово прозрачности цветов CSS

Иногда вы хотите, чтобы не было никакого цвета. Вот где на помощь приходит transparent:

.ghost-button {
background-color: transparent;
border: 2px solid black;
}

Это создает кнопку без фона, только с черной рамкой. Это как окно в вашем дизайне!

Ключевое слово текущего цвета CSS

Ключевое слово currentColor — это хамелеон — оно принимает текущее значение цвета элемента:

.chameleon {
color: green;
border: 1px solid currentColor;
}

Здесь, рамка будет зеленой, соответствуя цвету текста. Если вы измените цвет текста, цвет рамки также изменится автоматически!

Создание кодов цветов CSS

Теперь давайте поговорим о создании своих собственных кодов цветов. Шестнадцатеричные коды resemble mixing paints:

/* Чистый Красный */
.red-box { background-color: #FF0000; }

/* Чистый Зеленый */
.green-box { background-color: #00FF00; }

/* Чистый Синий */
.blue-box { background-color: #0000FF; }

Каждая пара символов представляет интенсивность красного, зеленого и синего соответственно, от 00 (нет) до FF (полный).

HSL — это другой способ мышления о цветах:

/* Ярко-Красный */
.bright-red { color: hsl(0, 100%, 50%); }

/* Пастельный Синий */
.pastel-blue { color: hsl(210, 100%, 80%); }

Здесь, первое число — это тон (0-360), второе — насыщенность (0-100%), а третье — светимость (0-100%).

Безопасные цвета браузера CSS

В ранние дни интернета нам приходилось sticking к ограниченному набору из 216 цветов, которые все браузеры могли отображать. Эти цвета назывались "web-safe" цветами. Сегодня, с современными дисплеями, это не так важно, но все равно полезно знать:

.old-school {
color: #CC3300; /* Web-safe orange */
}

Эти цвета представляют собой комбинации 00, 33, 66, 99, CC и FF для каждого компонента RGB.

И вот оно, мои яркие спутники! Мы покрасили наш путь через основы цветов CSS. Помните, лучший способ учиться — это экспериментировать. Так что вперед, откройте ваш редактор кода, и начните красить ваш цифровой мир. Счастливого кодирования, и пусть ваши designs всегда будут насыщенными! ??‍??‍?

Credits: Image by storyset

Предыдущий учебник:

CSS - Единицы измерения

Следующий учебник:

CSS - Фоны