Перейти к основному содержимому

Основные стили в CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Основные стили в CSS​

Единицы измерения​

ТипПримерыОписание
Абсолютныеpx, cm, in, ptФиксированные значения. px — наиболее распространён.
Относительные%, em, rem, vw, vhЗависят от контекста.
em1.2emОтносительно размера шрифта текущего элемента.
rem1.5remОтносительно размера шрифта корневого элемента (<html>).
%50%Относительно размера родителя.
vw / vh100vw, 50vhОтносительно ширины/высоты окна браузера.

Блочная модель (Box Model)​

Давайте напомним себе о том, как выглядит блок.

Каждый элемент на странице — это прямоугольная «коробка». Эта коробка состоит из нескольких слоёв:

     МАРЖИНЫ (margin)
┌─────────────────────────────┐
│       ПАДДИНГИ (padding)    │
│  ┌─────────────────────┐    │
│  │      КОНТЕНТ         │    │
│  │                     │    │
│  └─────────────────────┘    │
│        border               │
└─────────────────────────────┘

Стили блока​

content​

content — содержимое. То, что внутри: текст, изображение, вложенные элементы.

Содержимое — это то, что находится внутри элемента: текст, изображения, вложенные блоки, видео, SVG и другие HTML-элементы. Размер содержимого определяется свойствами width и height, если они заданы явно. По умолчанию размер содержимого зависит от его объёма.

Пример:

<div>Это текстовое содержимое</div>
<img src="photo.jpg" alt="Фотография">

Что такое отступ​

Отступ — это пространство вокруг или внутри элемента. В CSS различают два типа отступов:

  • margin — внешний отступ;
  • padding — внутренний отступ.

margin​

margin – внешние отступы. Пространство вне границы, отделяющее элемент от других. Не имеет фона, всегда прозрачное:

  div {
    margin: 10px;       /* Все стороны */
    margin-top: 20px;   /* Индивидуально */
  }

margin управляет расстоянием до соседних элементов. Может "схлопываться" (collapse) между вертикальными блоками. Например, если один блок имеет margin-bottom: 20px, а следующий — margin-top: 30px, расстояние между ними будет не 50px, а 30px.

margin надо использовать:

  • Чтобы отделить один блок от другого.
  • Для центрирования блока по горизонтали: margin: 0 auto.
  • Для отступа от края родителя.

padding​

padding – внутренние отступы. Пространство между содержимым и границей (border). Увеличивает общую занимаемую площадь:

  div {
    padding: 15px;
  }

padding находится внутри границы и имеет фон того же цвета, что и элемент.

padding надо использовать:

  • Чтобы отодвинуть текст от края фона.
  • Для создания "воздуха" внутри кнопки, карточки и т.п.
  • При необходимости, чтобы кликабельная область была больше содержимого.

border​

border — видимая линия вокруг содержимого и паддингов. Состоит из трёх частей:

  • ширина: 1px, 2px, medium;
  • стиль: solid, dashed, dotted, double, none;
  • цвет: black, #FF0000, rgba(255,0,0,0.5).
.border-example {
  border: 2px solid #333;
}

border входит в общую ширину и высоту элемента (если не используется box-sizing: border-box).

outline​

outline — невидимая рамка, рисуемая вне margin. Не влияет на размеры элемента и не занимает места в потоке.

  .box {
    border: 2px solid black;
    outline: 1px dashed red;
  }

Похож на border, но не входит в размеры элемента, рисуется вокруг margin, не может быть скруглён через border-radius, обычно используется для фокуса (accessibility). Используется браузером по умолчанию при tab-навигации.

Размеры и позиционирование​

width и height​

Ширина (width) и высота (height) определяют размер содержимого. Реальный размер зависит от box-sizing:

  • content-box (по умолчанию): width = content;
  • border-box: width = content + padding + border.
* {
  box-sizing: border-box;
}

Рекомендуется глобально применять border-box — это упрощает расчёт размеров.

width и height задают ширину и высоту содержимого (если не указано иное).

width – ширина;

height – высота:

  .container {
    width: 100%;
    min-height: 200px;
  }

Поддерживают:

  • абсолютные значения: px, cm, in,
  • относительные: %, em, rem, vw, vh.

Важно: реальный размер зависит от box-sizing. По умолчанию — content-box (размер без padding и border). Лучше использовать border-box:

* {
    box-sizing: border-box;
}

position​

position – позиционирование, бывает следующих типов:

  • static (по умолчанию);
  • relative (сдвиг относительно себя);
  • absolute (относительно ближайшего positioned-родителя);
  • fixed (относительно окна браузера);
  • sticky (гибрид relative + fixed).
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

— хедер будет всегда сверху экрана при прокрутке.

.sticky-header {
  position: sticky;
  top: 0;
}

Фон и цвет​

background​

background – фон, может включать цвет, изображение, положение, размер, повторение.

Это многофункциональное свойство, объединяющее:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-attachment
  body {
    background: url("image.jpg") no-repeat center / cover;
  }

— фоновое изображение по центру, без повтора, растянуто на весь блок.

color​

color – цвет текста. Задаёт цвет символов внутри элемента:

  h1 {
    color: #FF5733;
  }

Форматы:

  • HEX: #FF5733
  • RGB: rgb(255, 87, 51)
  • RGBA: rgba(255, 87, 51, 0.8) — с прозрачностью.
  • Названия: red, blue (ограниченный набор).

Текст и шрифты​

font​

font – шрифт:

  p {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: bold;
  }

font-family​

font-family — семейство шрифтов. Список шрифтов через запятую. Браузер использует первый доступный.

font-family: "Arial", "Helvetica", sans-serif;
  • "Arial" — желаемый шрифт.
  • sans-serif — запасной вариант (шрифт без засечек).

font-size​

font-size — размер шрифта. Единицы:

  • px — фиксированный размер.
  • em — относительно размера родителя.
  • rem — относительно корневого (<html>) элемента.
  • vw — относительно ширины окна.

font-weight​

font-weight — жирность. От 100 до 900 (400 = normal, 700 = bold).

text​

text – свойства текста:

  .text {
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
  }

text-align​

text-align — выравнивание текста

  • left, right, center, justify (по ширине).

text-decoration​

text-decoration — декоративные линии

  • underline — подчёркивание,
  • overline — надчёркивание,
  • line-through — зачёркивание.

line-height​

line-height — межстрочный интервал. Задаёт высоту строки. Рекомендуется значение 1.4–1.6 для читаемости.

Специальные эффекты​

box-shadow​

box-shadow – тень элемента:

  .card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

— тень смещена на 4px вниз, размытие 8px, полупрозрачная.

column-count​

column-count – мультиколоночность. Разбивает текст на несколько колонок, как в газете:

  .article {
    column-count: 3;
    column-gap: 20px;
  }

display​

Определяет тип отображения элемента:

  • block — занимает всю ширину, начинается с новой строки.
  • inline — не создаёт перенос, не принимает width/height.
  • inline-block — как inline, но поддерживает размеры.
  • flex — включает Flexbox-контейнер.
  • grid — включает Grid-контейнер.
  • none — скрывает элемент полностью.
.container {
  display: flex;
  gap: 16px;
}

gap​

Расстояние между дочерними элементами в flex или grid. Заменяет необходимость в margin.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

overflow​

Управляет поведением при выходе содержимого за границы:

  • visible — по умолчанию, содержимое выходит наружу.
  • hidden — обрезает всё, что выходит за пределы.
  • scroll — добавляет прокрутку всегда.
  • auto — добавляет прокрутку только при необходимости.
.scrollable {
  height: 200px;
  overflow-y: auto;
}

white-space​

Управляет обработкой пробелов и переносов:

  • normal — стандартное поведение.
  • nowrap — запрещает перенос строк.
  • pre — сохраняет пробелы и переносы, как в <pre>.
  • pre-wrap — сохраняет пробелы, но позволяет перенос.
.code {
  white-space: pre-wrap;
}

word-break​

Контролирует разрыв слов:

  • normal — стандартный перенос.
  • break-all — разрывает слова даже внутри слова.
  • keep-all — не разрывает слова (часто для CJK-языков).
.cell {
  word-break: break-all;
}

border-radius​

Скругление углов границы и фона:

.rounded {
  border-radius: 8px;
  /* или: 50% — для круга */
}

box-shadow​

Добавляет тень. Может быть внутренней (inset) или внешней:

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Синтаксис: смещениеX смещениеY размытие растяжение цвет.

text-shadow​

Тень для текста:

.title {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

Поведение​

visibility​

visibility — управляет видимостью элемента, но не влияет на макет:

  • visible — элемент отображается;
  • hidden — элемент невидим, но занимает место в потоке.
.hidden-element {
  visibility: hidden;
}

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

opacity​

opacity — задаёт прозрачность всего элемента (включая содержимое):

  • Значения от 0 (полностью прозрачный) до 1 (непрозрачный).
.semi-transparent {
  opacity: 0.6;
}

В отличие от rgba() цвета фона или текста, opacity влияет на весь элемент целиком.

z-index​

z-index — определяет порядок наложения элементов по оси Z (глубине). Работает только у позиционированных элементов (position ≠ static):

  • Чем выше значение — тем ближе к пользователю.
.overlay {
  position: absolute;
  z-index: 1000;
}

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

cursor​

cursor — задаёт форму курсора при наведении:

  • pointer — рука (для кликабельных элементов);
  • default — обычная стрелка;
  • not-allowed, wait, text, move и другие.
.button {
  cursor: pointer;
}

Улучшает UX, сигнализируя о поведении элемента.

list-style​

list-style — управляет внешним видом маркеров списков:

  • list-style-type: disc, circle, square, decimal, none;
  • list-style-position: inside / outside;
  • list-style-image: собственное изображение маркера.
ul.no-bullets {
  list-style: none;
}

Полезно при сбросе стандартных стилей списков в навигации или кастомных компонентах.

transition​

transition — анимирует изменение свойств при смене состояния (например, при наведении):

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

Простой способ добавить плавность без JavaScript.

transform​

transform — применяет геометрические преобразования:

  • translate(), rotate(), scale(), skew().
.icon {
  transform: rotate(45deg) scale(1.2);
}

Не влияет на поток документа — идеален для анимаций и интерактивных эффектов.

object-fit и object-position​

Для управления отображением медиа (<img>, <video>):

  • object-fit: cover, contain, fill, none, scale-down;
  • object-position: положение внутри контейнера.
.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

Аналог background-size/background-position, но для заменяющих элементов.

user-select​

user-select — контролирует возможность выделения текста:

  • none, text, all, auto.
.no-select {
  user-select: none;
}

Часто используется в интерфейсах (иконки, кнопки), где выделение мешает UX.

pointer-events​

pointer-events — управляет реакцией на мышь:

  • none — игнорировать все события;
  • auto — стандартное поведение.
.disabled-overlay {
  pointer-events: none;
}

Полезно для временного отключения кликов без изменения DOM.

Чит-лист и документация​

Если возникло желание погрузиться в CSS, то рекомендую ознакомиться с MDN - https://developer.mozilla.org/ru/docs/Web/CSS

Чит-лист - https://cheatsheets.zip/css3

Освоение главы0%