Мы вынуждены приостановить обучающую деятельность на территории России с 10 марта 2022 года

Гайд по работе с цветом в CSS

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

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

Из этого гайда вы узнаете, как изменить цвет текста в CSS, как изменить цвет фона в CSS, а также, что такое ключевые слова цвета, шестнадцатеричные значения цвета, цветовой формат rgb () и, наконец, цветовой формат hsl ().

Фронтенд разработчик должен знать, что такое фильтры CSS, ведь чаще всего ему приходится сталкиваться в работе со всеми четырьмя подходами с одним и тем же набором HTML. Мы разберемся, какие существуют свойства color, border и background-color для применения различных цветовых форматов к HTML.

Если вы интересуетесь современным дизайном и разработкой, рекомендуем курсы DevEducation.

Практическое руководство: что необходимо знать о цвете в CSS

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

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

Начните с открытия index.html в текстовом редакторе. Затем добавьте в файл необходимый HTML-код.

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

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

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

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

На этом работа, необходимая для index.html, завершена. Сохраните изменения в файле, затем откройте index.html в своем браузере. Веб-страница будет выглядеть как на обычном изображении.

Теперь вы начнете работать над базовыми стилями, необходимыми для этого направления. Начните с создания файла с именем styles.css и откройте его в текстовом редакторе.

Для начала создайте селектор основного текста и добавьте font-famiy: sans-serif, чтобы использовать шрифт без засечек браузера по умолчанию. Затем добавьте line-height:1.5, чтобы задать межстрочный интервал по умолчанию между текстом, равным половине размера шрифта.

Затем добавьте стили для элемента, создав для него селектор типа с полями, отступом, шириной и максимальной шириной, а также box-sizing: border-box, чтобы переопределить модель коробки. Это гарантирует, что значение заполнения не добавляется к полной ширине контейнера.

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

Гайд по работе с цветом в CSS

На что еще стоит обратить внимание:

  1. Во-первых, поле со значением 2rem auto будет центрировать контейнер статьи на странице. Заполнение 2rem даст достаточно места вокруг контейнера, когда вы добавите свойства цвета. Ширина позволяет контейнеру быть гибким по ширине при изменении размера экрана, пока он не достигнет значения max-width 40rem (что эквивалентно 640 пикселей).
  2. Также важно помнить о фиксации селектора типа h1 и о том, чтобы задать для элемента размер шрифта 2rem. Затем добавьте margin 0 0 1rem, чтобы удалить верхнее поле по умолчанию и предоставить новое значение для нижнего поля. Наконец, отцентрируйте текст, добавив text-align: center; к блоку селектора.
  3. Затем вы примените несколько базовых стилей к элементу. В каждом браузере по умолчанию для элемента создается поле без высоты, полной ширины и границы. Хотя этот контейнер является самозакрывающимся и не содержит ничего, он может принимать множество стилей.
  4. Начните с присвоения ему высоты 0,25 rem. Затем добавьте свойство поля 2rem auto, чтобы создать пространство выше и ниже и центрировать элемент. Добавьте ширину: 90%; с максимальной шириной: 18 rem; поэтому элемент всегда меньше, чем контейнер предмета, и никогда не превышает 18 rem. Наконец, используйте свойство border-radius, чтобы скруглить концы элемента со значением 0,5 rem.
  5. Наконец, создайте блок селектора нижнего колонтитула и добавьте свойство margin-top со значением 2rem, за которым следует размер шрифта 0,875rem.
  6. Сохраните изменения в styles.css. Затем вернитесь к index.html в своем веб-браузере и перезагрузите страницу. Теперь содержимое готово к применению цветов к базовым стилям.

Итоги

Теперь вы знаете, как можно настроить свой HTML-код в файле index.html и создать базовые стили в файле styles.css. Но нельзя сказать, что этого достаточно для полноценной работы. Позаботьтесь также о том, чтобы познакомиться с ключевыми словами цвета, которые вы будете использовать для применения цветов к контенту.

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

Формирование цвета rgb () преобразует значения шестнадцатеричного значения в более полный формат, используя числовые значения в списке, разделенном запятыми. Наконец, цветовой формат hsl () позволяет применять концепции теории цвета к разработке веб-сайтов, используя оттенки цветового круга, насыщенность и яркость для создания отличительной и дополнительной цветовой палитры CSS. Все четыре из этих форматов можно использовать вместе на одном веб-сайте, каждый играет в свою пользу.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!