Базовые стили в CSS: С любовью к деталям

Цвета в CSS: все оттенки твоего творчества

CSS даёт несколько способов задать цвет, и каждый из них подходит для разных ситуаций.

HEX (шестнадцатеричный код)

Это код из шести символов после #, где каждая пара отвечает за один из цветов (красный, зелёный, синий).

Примеры:

color: #ff0000; /* Красный */
color: #00ff00; /* Зелёный */
color: #0000ff; /* Синий */
color: #000;    /* Короткая запись для #000000 (чёрный) */

RGB и RGBA

RGB указывает интенсивность каждого цвета от 0 до 255.
RGBA — это то же самое, но с четвёртым параметром (альфа-канал), задающим прозрачность (от 0 до 1).

color: rgb(255, 0, 0);   /* Красный */
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */

HSL (оттенок, насыщенность, яркость)

Альтернативный способ, который иногда удобнее, особенно для создания цветовых палитр.

color: hsl(0, 100%, 50%); /* Красный */
color: hsla(0, 100%, 50%, 0.5); /* Полупрозрачный красный */

Прозрачность (opacity)

Opacity задаёт прозрачность всему элементу (от 0 до 1).

div {
  background-color: blue;
  opacity: 0.5; /* Полупрозрачный синий фон */
}

Важно: opacity влияет на весь элемент, а rgba — только на цвет!

Градиенты (linear-gradient, radial-gradient)

Градиенты позволяют делать плавные переходы между цветами.

Линейный градиент (linear-gradient):

background: linear-gradient(to right, red, blue);

Радиальный градиент (radial-gradient):

background: radial-gradient(circle, red, blue);

Размеры и единицы измерения: сколько пикселей тебе нужно?

CSS предлагает разные единицы измерения. Давай разберём основные.

Абсолютные единицы (фиксированные)

Эти единицы измерения не зависят от окружения и всегда остаются одинаковыми, независимо от размера экрана, родительского элемента или настроек браузера.

Единицы:
Единица	Описание	Пример
px	Пиксели, самый распространённый вариант	width: 300px;
pt	Пункты, в основном для печати (1pt = 1/72 дюйма)	font-size: 12pt;
cm, mm	Сантиметры и миллиметры, редко используются в веб-дизайне	width: 5cm;
in	Дюймы, в вебе почти не применяются (1in = 2.54cm)	height: 2in;

Когда использовать абсолютные единицы?

Когда важна точная фиксация размеров (например, пиксели для изображений).
Но не стоит их использовать для адаптивного дизайна, так как они не подстраиваются под экран.

Относительные единицы (гибкие)

Эти единицы измерения изменяются в зависимости от контекста, будь то размер шрифта, ширина экрана или родительского элемента.

Единицы:
Единица	Зависит от...	Пример
%	Родительского элемента	width: 50%; (занимает 50% ширины родителя)
em	Размер шрифта родителя	font-size: 1.5em; (увеличивается относительно родителя)
rem	Размер шрифта <html>	font-size: 2rem; (независимо от родителей)
vw	Ширины экрана (viewport width)	width: 50vw; (занимает 50% ширины экрана)
vh	Высоты экрана (viewport height)	height: 100vh; (занимает 100% высоты экрана)
vmin	Минимального значения между vw и vh	font-size: 5vmin;
vmax	Максимального значения между vw и vh	font-size: 10vmax;

Разница между em и rem

em и rem используются для задавания шрифтов, отступов и других свойств, но работают по-разному:

em зависит от родителя.
rem зависит от корневого элемента (<html>).

Пример:

html {
  font-size: 16px;
}

.container {
  font-size: 20px;
}

.container p {
  font-size: 2em; /* 2 × 20px = 40px */
}

.container .rem-example {
  font-size: 2rem; /* 2 × 16px = 32px */
}

Вывод: rem делает дизайн более предсказуемым, так как всегда зависит от <html>.

Когда использовать vh и vw?

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

Примеры использования:

Полноэкранный блок

.fullscreen {
  width: 100vw; /* Полная ширина экрана */
  height: 100vh; /* Полная высота экрана */
  background-color: lightblue;
}

Адаптивный текст (например, заголовки)

h1 {
  font-size: 5vw; /* Размер заголовка зависит от ширины экрана */
}

Но будь осторожен!
Если использовать vh и vw в мобильных браузерах, могут быть проблемы, так как некоторые браузеры учитывают или игнорируют панель адреса.

Вывод

Абсолютные единицы (px, cm, in) дают точный размер, но не адаптивны.
Относительные (%, em, rem, vw, vh) позволяют дизайну быть гибким.
Используй rem вместо em, если хочешь, чтобы шрифты были предсказуемыми.
vw и vh отлично подходят для адаптивных макетов, но могут быть капризными на мобильных устройствах.

Шрифты и типографика: сделай текст удобочитаемым

Основные свойства

font-family — семейство шрифтов.
font-size — размер шрифта.
line-height — межстрочный интервал.
letter-spacing — расстояние между буквами.

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
}

Как подключить Google Fonts

Перейди на Google Fonts.
Выбери шрифт и скопируй ссылку <link> в <head>:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Используй в CSS:

body {
  font-family: 'Roboto', sans-serif;
}

Дополнительные свойства

text-align: center; — центрирует текст.
text-transform: uppercase; — делает текст ЗАГЛАВНЫМ.
word-wrap: break-word; — переносит длинные слова.

Фон и его настройки

Основные свойства

background-color — цвет фона.
background-image — изображение фона.

div {
  background-color: lightgray;
  background-image: url('background.jpg');
}

Размер фона (background-size)

cover — растягивает изображение, чтобы оно полностью покрывало блок.
contain — подгоняет изображение так, чтобы оно полностью поместилось.

div {
  background-size: cover;
}

Позиция и повторение фона

background-position: center; — центрирует изображение.
background-repeat: no-repeat; — отключает повторение.

div {
  background-position: center;
  background-repeat: no-repeat;
}

Границы и отступы в CSS: создаём идеальное пространство

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

Границы (border) и скругления (border-radius)
Внешние (margin) и внутренние (padding) отступы
Разница между margin и padding
Как работает box-sizing: border-box и почему он важен

Границы (border)

Границы (border) позволяют обводить элементы, придавая им выразительность.

Основной синтаксис:

border: толщина стиль цвет;

div {
  border: 2px solid black; /* Чёрная граница толщиной 2px */
}

Результат:

Доступные стили границ:
Стиль	Описание
solid	Сплошная линия
dashed	Пунктирная линия
dotted	Точечная линия
double	Двойная линия
groove	Вдавленная линия (эффект 3D)
ridge	Выпуклая линия (эффект 3D)
inset	Внутренний эффект тени
outset	Внешний эффект тени

Пример с разными стилями:

div {
  border: 3px dashed red;
}

Результат:

Границы с разными сторонами

Границу можно задавать отдельно для каждой стороны:

border-top: 2px solid blue;
border-right: 3px dashed green;
border-bottom: 4px double red;
border-left: 5px dotted orange;

Результат:

Это полезно, если, например, нужно сделать нижнюю границу заголовка:

h1 {
  border-bottom: 2px solid gray;
}

Скругление углов (border-radius)

border-radius позволяет скруглять углы элемента.

Примеры:

div {
  border-radius: 10px; /* Скругление всех углов */
}

Результат:

Можно задать скругление для каждой стороны отдельно:

div {
  border-radius: 10px 20px 30px 40px; /* верх-лево, верх-право, низ-право, низ-лево */
}

Результат:

Если сделать border-radius: 50%, можно создать круг:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}

Результат:

Отступы (margin и padding)

Отступы помогают управлять пространством вокруг элементов.

Разница между margin и padding
Свойство	Что делает?
margin	Отступ снаружи элемента (между ним и соседними элементами)
padding	Отступ внутри элемента (между содержимым и границей)

Пример:

div {
  width: 200px;
  height: 100px;
  background: lightblue;
  margin: 20px; /* Внешний отступ */
  padding: 10px; /* Внутренний отступ */
}

margin отодвигает элемент от других, а padding создаёт пространство внутри элемента.

Как смотреть отступы (margin и padding) в DevTools?

Когда работаешь с отступами, важно уметь их анализировать и отлаживать. В браузере (Chrome, Firefox, Edge) есть инструменты разработчика (DevTools), которые помогают увидеть margin, padding и границы (border).

Как открыть DevTools?

Кликни правой кнопкой на элементе → Исследовать код (Inspect) (или "исследовать элемент страницы").
Или нажми F12 / Ctrl + Shift + I (Windows) или Cmd + Option + I (Mac).
Перейди во вкладку Elements и выбери интересующий элемент.

Как понять отступы в DevTools?

Когда элемент выделен, внизу стилей (Styles) появится Box Model – это наглядная схема с margin, border, padding и content.

Оранжевый цвет – margin (внешний отступ).
Жёлтый цвет – padding (внутренний отступ).
Синий цвет – содержимое элемента (content).
Серая рамка – border.

Фишка: если навести курсор на любой из отступов (margin или padding), браузер подсветит его на странице!

Как менять отступы в DevTools?

Дважды кликни по значению margin или padding в Box Model.
Введи новое число (30px, 5em и т. д.).
Нажми Enter – изменения сразу отобразятся на странице!

Лайфхак: можешь просто покрутить колесо мыши, наведя курсор на число, либо использовать стрелки вверх и низ – так быстро меняется значение!

Как margin и padding работают с четырьмя сторонами

Можно задавать отступы отдельно для каждой стороны:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Запись через пробел (margin: 10px 20px 30px 40px;) означает:

10px – верх
20px – справа
30px – низ
40px – слева

Если значений три, то порядок такой:

margin: 10px 20px 30px; /* верх, горизонтальные, низ */

Если значений два, то порядок такой:

margin: 10px 20px; /* вертикальные (верх и низ), горизонтальные (слева и справа) */

Автоматический margin: auto

Чтобы центрировать блок, можно использовать:

.container {
  width: 300px;
  margin: 0 auto; /* Выравнивание по центру */
}

Работает только, если задана width(фиксированная ширина).

box-sizing: border-box – почему это важно?

width + padding + border = итоговый размер элемента

То есть, если у элемента width: 200px, padding: 20px, border: 5px, то реальная ширина будет:
200 + 20*2 + 5*2 = 250px 😱

Поясню на всякий случай… Умножение на 2 в примере выше(20*2 + 5*2) происходит от того, что padding: 20px - это padding-left + padding-right. Аналогично с border, толщина 5px слева прибавляется к 5px справа.

Чтобы избежать этого, используем box-sizing: border-box:

* {
  box-sizing: border-box;
}

Теперь width включает в себя padding и border, а не увеличивает размер.

Пример:

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

Теперь ширина всегда останется 200px.

Коллапс отступов (margin collapse)

Иногда margin у двух элементов схлопывается, и вместо суммирования берётся большее значение.

Пример:

h1 {
  margin-bottom: 20px;
}

p {
  margin-top: 30px;
}

Ожидаем 50px, но на самом деле будет 30px (большее значение).

Как исправить?

Используй padding вместо margin, если это возможно.
Добавляй overflow: hidden; родителю, если хочешь, чтобы margin внутри него не схлопывался.
Добавь border: 1px solid transparent; родителю, если не хочешь margin collapse.
Используй display: flex; на родителе — margin collapse не происходит у flexbox-элементов.