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

3.10. Работа с CSS

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

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

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

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

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

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

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

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

margin управляет расстоянием до соседних элементов. Может "схлопываться" (collapse) между вертикальными блоками.

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

  div {
    padding: 15px;
  }

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

border: видимая граница (входит в размер элемента). Включает:

  • ширину (2px),
  • стиль (solid, dashed, dotted),
  • цвет (black). border входит в общую ширину и высоту элемента (если не используется box-sizing: border-box).

outline: контур вокруг элемента (не влияет на размер):

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

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

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

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 – позиционирование, бывает следующих типов:

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

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

Фон и цвет​

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

  body {
    background: url("image.jpg") no-repeat center / cover;
  }

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

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

  h1 {
    color: #FF5733;
  }

Форматы:

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

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

font – шрифт:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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