TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Руководство по цветам CSS для начинающих

47

Цвета делают веб-страницу значимой. Без разных цветов страница будет выглядеть однообразно и скучно. Вы можете использовать два типа свойств цвета с CSS на веб-странице. Один из них – цвет переднего плана (обычно в виде цвета) для изменения цвета текста или шрифта. Во-вторых, это цвет фона, чтобы добавить цвет фона к различным элементам HTML. В этом руководстве мы рассмотрим, как использовать свойства цвета CSS с различными атрибутами.

Изменение цвета текста в CSS

Давайте рассмотрим пример изменения цвета элемента абзаца.

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

p { color: red; }

Это приведет к следующему результату в браузере:

Это абзац красного цвета.

Изменение цвета фона в CSS

Вы можете изменить цвет фона любого элемента HTML, используя приведенное ниже определение стиля CSS:

p { background-color:red;color:white; }

Это даст следующий результат:

Это абзац красного цвета.

Обратите внимание, что мы использовали белый цвет текста, поэтому он хорошо читается на красном фоне.

Определение цветов в CSS

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

  • Названия цветов, таких как красный, зеленый или белый
  • Использование комбинации красного, зеленого и синего десятичных значений, например rgb (20,50,200)
  • Использование шестнадцатеричных значений для красного, зеленого и синего, например #ffffff
  • Значение в процентах для красного, синего и зеленого цветов, таких как rgb (10%, 80%, 25%)
  • Использование оттенка, насыщенности и яркости, таких как hsl (0,80%, 70%)
  • Добавление непрозрачности к значениям RGB, таким как rgba (0,0,0,0.8)
  • Добавление непрозрачности к значениям HSL, таким как hsla (200,75% 90% 0,6)

Использование названий цветов в CSS

Мы уже видели, как использовать имя в свойствах CSS цвета и фона. Браузеры могут идентифицировать только около 150 названий цветов. Мы рекомендуем использовать числа вместо названий цветов. Вы также можете ознакомиться с цветовыми кодами популярных социальных сетей в этой статье.

Использование цветов RGB в CSS

В методе RGB красный, синий и зеленый цвета обозначаются десятичными числами от 0 до 255. Например, цвет помидора обозначается как rgb (255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Это приведет к следующему результату в браузере:

Этот текст будет иметь фон цвета помидора со значением RGB как rgb (255,99,71).

Вы можете создать более 16 миллионов цветов, варьируя значения трех основных цветов. Однако убедитесь, что вы используете правильный цвет текста, чтобы его было легко читать. Лучший вариант – выбрать для веб-сайта безопасные для Интернета цвета, такие как плоские цвета пользовательского интерфейса.

Использование шестнадцатеричных значений цвета

Цвет помидора rgb (255,99,71) можно преобразовать в эквивалентное шестнадцатеричное значение как FF6347. Это простое преобразование 255 в FF, 99 в 63 и 71 в 47. Вы можете использовать инструменты преобразования цвета для преобразования RGB в шестнадцатеричный код.

Вы можете использовать шестнадцатеричные значения цвета в CSS, как показано ниже:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

«Padding: 15px;» используется для добавления отступов к текстовому содержимому внутри

элемент. Это приведет к следующему результату в браузере:

Этот текст будет иметь фон цвета помидора со значением шестнадцатеричного кода # FF6347. Не забудьте использовать символ # перед значением шестнадцатеричного кода и использовать цвет текста как #FFFFFF. Кроме того, и малый регистр # ff6347, и прописной регистр # FF6347 дадут одинаковый результат.

Использование значений RGB в процентах

Вместо диапазона десятичных чисел от 0 до 255 вы также можете указать процентное значение для красного, зеленого и синего цветов.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Это даст следующий результат:

Этот текст будет иметь фон цвета помидора со значением шестнадцатеричного кода # FF6347. Не забудьте использовать символ # перед значением шестнадцатеричного кода. Также и строчный регистр # ff6347, и прописной # FF6347 дадут одинаковый результат.

Добавление непрозрачности к цветам RGB

В CSS3 у вас есть возможность указать значение альфа-канала или непрозрачности для цветов. Альфа-значение добавляется в виде десятичного числа от 0,0 до 1,0 в качестве четвертого значения. Значение 0 представляет собой полностью прозрачный, что составляет 0% непрозрачности, а 1.0 означает непрозрачность со 100% непрозрачностью.

Ниже приведен синтаксис использования альфа-значения в цвете RGB с непрозрачностью 20%:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Давайте покажем красный цвет со значениями непрозрачности 20%, 40%, 60%, 800% и 100%, чтобы сделать его более понятным.

Руководство по цветам CSS для начинающих

Помните, что существует также отдельное свойство CSS под названием «opacity:», которое также можно использовать для той же цели. Преимущество непрозрачности в том, что ее можно использовать и для изображений. Но это поддерживается не всеми браузерами. Ниже показано, как вы можете использовать свойство непрозрачности отдельно:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Использование цветов HSL в CSS

В CSS3 есть дополнительная опция для определения цвета с помощью метода HSL. HSL обозначает оттенок, насыщенность, яркость и имеет три значения:

  • Оттенок – это степень, указанная на цветовом круге со ссылками: 0 = красный, 120 = зеленый, 240 – синий.
  • Насыщенность – это процентное значение серого в цвете.
  • Яркость – это процентное значение светлого или темного, где 0% – темный (черный), а 100% – светлый (белый).

Ниже приведен пример создания зеленого фона с цветом HSL в CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL с непрозрачностью

Подобно RGBA, вы также можете добавить непрозрачность к цвету HSL в качестве четвертого значения. Непрозрачность или альфа указывается десятичным числом от 0,0 до 1,0, где 0,0 означает полностью прозрачный, а 1,0 означает непрозрачный. Ниже приведен пример создания зеленого цвета с непрозрачностью 50% с использованием объявления HSLA в CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

В следующих полях показан зеленый цвет на разных альфа-уровнях:

Руководство по цветам CSS для начинающих

Полный пример использования цветов в CSS

На данный момент мы увидели разные способы определения цветов в CSS. Давайте покажем полный пример создания цветов переднего плана и фона:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Окончательный результат будет показан ниже:

Вот элемент абзаца.

Это заголовок H2.

Вот еще один абзац.
Это выделенный текст внутри абзаца.
Это выделенный текст вне абзаца.

  • Если вы определяете несколько цветов в CSS для одного и того же элемента, тогда последний будет иметь приоритет над всем предыдущим объявлением. В приведенном выше примере по этой причине абзац будет иметь цвет #ffffff.
  • Определенные стили будут иметь приоритет над родительским или общим стилем. Цвет h1 будет # 008754, а не желтый.
  • Вы также можете использовать сокращенное свойство background для определения цвета фона.

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

Источник записи: www.webnots.com
Leave A Reply

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