CSS

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

background также объединяет в себе несколько других свойств:

• background-color — задаёт цвет фона элемента;
• background-image — устанавливает фоновое изображение для элемента;
• background-position — определяет начальную позицию фонового изображения;
• background-repeat — указывает, должно ли фоновое изображение повторяться;
• background-size — устанавливает размер фонового изображения;
• background-attachment — определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.

CSS-свойство color позволяет задавать цвет текста и фона элемента на веб-странице.

Чтобы создавать сложные макеты или интерактивные элементы, нужно управлять местоположением элементов на странице. Для этого есть CSS-свойство position. Оно определяет, где находится элемент на веб-странице.

CSS-псевдоклассы :hover, :focus и :active задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.

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

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

Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа.

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

Один из самых удобных методов — создание адаптивных сеток с помощью медиавыражений в CSS.

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

Любое медиавыражение начинается директивы @media, её указание необходимо, чтобы выражение заработало.

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

@media (min-width: 768px){
  .user-list {
    /* стили для разрешения от 768px */
  }
}

Flexbox — инструмент построения крупных сеток и микросеток.

Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex. Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.

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

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

В CSS много цветовых форматов — hex-коды, rgb(), hsl(), lch() и ещё несколько других. Сложно понять, какой использовать, ведь между форматами есть важные отличия. И, если честно, многие из нас считают «важными» совсем не то. 🙂

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

Вы сверстали страницу, пишете стили и вдруг понимаете, что что-то не так. Текст, который должен быть зелёным, почему-то остался красным:

<p class="text">Это просто текст</p>

.text {
  color: red;
}

p {
  color: green;
}

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