Применение цвета к элементам HTML с помощью CSS

Любой элемент в HTML может иметь применённый к нему цвет. Давайте рассмотрим различные элементы, отображаемые на странице — например, текст, границы и т. д. Мы предоставим списки свойств CSS, которые применяют цвет к каждому из них.

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

При отображении элемента эти свойства используются для определения цвета текста, фона и любых декораций текста.

color

Цвет, используемый для рисования текста и любых декораций текста (таких как добавление подчёркивания, зачёркивания и т. д.).

background-color

Цвет фона текста.

text-shadow

Настраивает эффект тени, применяемый к тексту. Среди параметров тени — базовый цвет тени (который затем размывается и смешивается с фоном на основе других параметров). См. Текст с тенью для получения дополнительной информации.

text-decoration-color

Цвет по умолчанию для декораций текста (таких как подчеркивания, зачеркивания и т. д.) — currentcolor. Этот ключевое слово представляет текущее значение свойства color. Однако вы можете переопределить это значение и использовать для них другой цвет с помощью свойства text-decoration-color.

text-emphasis-color

Цвет, используемый при отрисовке символов выделения рядом с каждым символом в тексте. Это используется в основном при отрисовке текста для восточноазиатских языков.

caret-color

Цвет, используемый при отрисовке курсора (иногда называемого курсором ввода текста) внутри элемента. Это полезно только в элементах, которые можно редактировать, таких как <input> и <textarea>, или элементах, у которых атрибут HTML contenteditable установлен в true.

Каждый элемент — это блок с каким-то содержимым, имеющий фон и границу, помимо содержимого, которое может быть внутри блока.

Границы

См. раздел Границы для списка свойств CSS, которые можно использовать для задания цвета границ блока.

background-color

Цвет фона, используемый в областях элемента, где нет содержимого переднего плана.

box-shadow

Настраивает эффекты вдавленных теней и выступлений тени на блоке. Среди параметров каждой тени — базовый цвет тени (который затем размывается и смешивается с любым фоном на основе других параметров).

column-rule-color

Цвет, используемый для рисования линии, разделяющей столбцы текста при использовании CSS многоколоночного макета.

outline-color

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

Любой элемент может иметь границу, нарисованную вокруг него. Базовая граница элемента — это линия, нарисованная по краям содержимого элемента. См. модель блока, чтобы узнать о взаимоотношениях между элементами и их границами, а также статью стилизация границ с помощью CSS, чтобы узнать больше о применении стилей к границам.

Вы можете использовать сокращенное свойство border, которое позволяет настроить все аспекты границы одним действием (включая не цветовые свойства границ, такие как её ширина, стиль (сплошная, пунктирная и т. д.) и так далее).

border-color сокращенное свойство

Устанавливает один цвет для каждой стороны границы элемента.

border-left-color, border-right-color, border-top-color и border-bottom-color

Позволяет установить цвет соответствующей стороны границы элемента.

border-block-start-color и border-block-end-color

С их помощью вы можете установить цвет, используемый для рисования границ, которые ближе всего к началу и концу блока, который окружает граница. В режиме записи слева направо (таким образом, как пишется английский язык), граница начала блока — верхний край, а граница конца — нижний. Это отличается от начала и конца в строке, которые являются левым и правым краями (соответствующими тому, где начинается и заканчивается каждая строка текста в блоке).

border-inline-start-color и border-inline-end-color

Они позволяют окрашивать края границы, ближайшие к началу и концу начала строк текста внутри блока. Какая сторона это будет, зависит от свойств writing-mode, direction и text-orientation, которые обычно (но не всегда) используются для изменения направления текста в зависимости от отображаемого языка. Например, если текст блока отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

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

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

HTML, ответственный за создание вышеупомянутого примера, показан здесь:

<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

Здесь у нас есть обертка <div>, содержащая два дочерних <div>а, каждый из которых имеет один дочерний абзац (<p>). Содержимому каждого <div> блока придан различный вид.

Давайте рассмотрим CSS, который создаёт вышеприведённый результат, по частям.

.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

Класс .wrapper используется для назначения стилей к <div>, который включает в себя весь наш другой контент. Это устанавливает высоту контейнера, используя height, позволяя ширине этого элемента уровня блока по умолчанию быть равной 100% от родительского элемента. Установка display на flex и добавление 10px gap создаёт контейнер flex для выравнивания дочерних элементов рядом друг с другом с промежутком между всеми дочерними элементами контейнера. Мы используем flex, чтобы позволить дочерним элементам flex увеличиваться, заполняя контейнер; это не влияет на сам контейнер flex.

Более интересен для нашего обсуждения здесь является использование свойства border для установления границы вокруг внешнего края элемента. Эта граница — сплошная линия шириной 6 пикселей, в именном цвете mediumturquoise.

Внутри нашего контейнера у нас есть левая и правая области.

.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

Класс .boxLeft, используемый для стилизации области слева, настраивает цвет фона и контура:

• Цвет фона области устанавливается путём изменения значения свойства CSS background-color на rgb(245 130 130), используя функциональную нотацию rgb().
• Для области определён контур. В отличие от более часто используемого border, outline вообще не влияет на макет; он рисуется поверх того, что может оказаться вне области элемента, вместо того, чтобы выделять место, как border. Этот контур представляет собой сплошную тёмно-красную линию толщиной два пикселя. Обратите внимание на использование ключевого слова darkred при указании цвета.
• Обратите внимание, что мы явно не устанавливаем цвет текста. Это означает, что значение color будет унаследовано от ближайшего содержащего элемента, который его определяет. По умолчанию это чёрный.

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 100% 100%);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

Наконец, класс .boxRight устанавливает несколько стилей для области, расположенной справа. Затем устанавливаются следующие цвета (используя пять различных способов объявления значений цвета):

• background-color устанавливается с помощью функциональной нотации hwb() — hwb(270deg 63% 13%). Это средний фиолетовый цвет.
• outline области используется для указания, что область должна быть обрамлена пунктирной линией толщиной четыре пикселя, цвет которой — более глубокий фиолетовый, используя шестизначное <hex-color> значение #6e1478.
• Цвет переднего плана (текста) задаётся путём установки свойства color с помощью функциональной нотации hsl() — hsl(0deg 100% 100%). Это один из способов задания цвета белого.
• Мы добавляем зелёную волнистую линию под текст с помощью сокращённого свойства text-decoration, вместе с компонентными свойствами для совместимости с браузерами. Мы использовали трёхзначное <hex-color> значение #8f8, что эквивалентно #88ff88.
• Наконец, к тексту добавляется тень с помощью text-shadow. Его параметр color установлен на black, значение <named-color>.

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

CSS — не единственная веб-технология, поддерживающая цвет. Другие примеры включают:

HTML API Canvas

Позволяет рисовать 2D растровые графики в элементе <canvas>. Более подробно ознакомьтесь с нашим учебником по Canvas.

SVG (Масштабируемые векторные графики)

Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры и линии. Команды SVG отформатированы как XML и могут быть встроены непосредственно в веб-страницу или помещены на страницу с помощью элемента <img>, как и любой другой тип изображения.

WebGL

Web Graphics Library — это основанный на OpenGL ES API для отрисовки графики высокой производительности в 2D и 3D на веб-страницах. Ознакомьтесь с нашим учебником по WebGL. Также см. WebGPU, преемника WebGL для современных графических процессоров.

• <color> тип данных
• Руководство по значениям цвета CSS
• Использование цвета разумно
• Модуль цветов CSS
• Рисование графики
• Графика в веб-среде