CSS для игры: делаем историю читаемой

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

Открыть результат в отдельной вкладке

Продолжаем свою историю

Нужен результат первого урока: index.html, login.html, disconnect.html и твоя третья ветка. В папке start лежат первые три файла из прошлого урока. Если у тебя своя ветка, продолжай её — подключение CSS будет таким же.

Создай общий файл оформления

Рядом с index.html создай style.css. CSS описывает внешний вид, поэтому HTML-теги в этот файл не пишут. Сохрани для первой проверки:

body {
  font-family: sans-serif;
  line-height: 1.6;
  color: #282334;
}

В каждом HTML-файле перед </head> добавь ровно одну строку:

<link rel="stylesheet" href="style.css">

link подключает ресурс; rel="stylesheet" говорит, что это таблица стилей. href снова содержит имя соседнего файла. Если в своей копии ты уже добавлял необязательный тег style, перенеси нужные правила в общий файл и убери старый блок, иначе они могут перекрывать друг друга.

Перейди в оба окончания: шрифт и расстояние между строками должны измениться везде. Если одна страница осталась прежней, сначала проверь её строку link. Это проверка версии step-01.

Селектор, свойство и значение

В записи body { color: #282334; } слово body — селектор: он выбирает элемент. Между фигурными скобками записаны свойства. color — свойство цвета текста, после двоеточия стоит значение; точка с запятой завершает пару.

font-family: sans-serif выбирает доступный шрифт без засечек. line-height: 1.6 задаёт высоту строки относительно размера текста. Цвет начинается с #: это шестнадцатеричная запись цвета. Сейчас достаточно взять указанные значения и сравнить результат; вычислять их в уме не нужно.

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

Сделай текст удобнее для чтения

В каждом HTML-файле измени открывающий тег <main> на <main class="story">. Класс — метка для оформления; одно и то же имя можно использовать на разных страницах. В CSS класс выбирается через точку: .story.

Замени содержимое style.css этим набором правил, затем разберём его по частям:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background: #f2edff;
  color: #282334;
}
.story {
  max-width: 700px;
  margin: 24px auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #b9acce;
}
h1 {
  margin-top: 0;
  font-size: 28px;
  line-height: 1.2;
}
a {
  color: #5033a8;
  text-underline-offset: 4px;
}
a:hover {
  color: #29203d;
}
a:focus-visible {
  outline: 3px solid #5033a8;
  outline-offset: 4px;
}

margin — пространство снаружи блока, padding — внутри, между границей и текстом. Два значения вроде 24px auto означают вертикальные и горизонтальные отступы. auto делит свободное место слева и справа. max-width: 700px ограничивает длинные строки; на узком экране блок может стать меньше. Это не жёсткая ширина.

Звёздочка выбирает все элементы. box-sizing: border-box включает внутренний отступ и границу в заданные размеры. background задаёт фон, border — толщину, вид и цвет границы. У заголовка уменьшена высота строки и убран лишний верхний отступ; основной текст по-прежнему использует наследуемые настройки body.

a:hover относится к ссылке под указателем, а a:focus-visible показывает, какая ссылка выбрана с клавиатуры. Нажми Tab: появится заметная рамка. Enter откроет выбранный исход. Рамку не убираем ради красоты: без неё непонятно, какое действие сейчас выбрано.

Оформи предупреждение отдельным классом

Добавь class="warning" к абзацу с сообщением терминала в index.html. Так мы выделим сообщение терминала, а остальные абзацы оставим как есть.

.warning {
  padding: 12px;
  border-left: 4px solid #785100;
  background: #fff3cc;
}

Вставь правило в конец style.css. Предупреждение должно получить светлый фон и левую границу. Остальные абзацы не меняются. Если класс применяется ко всем абзацам, проверь селектор: нужен .warning, а не p.

Самостоятельно: оформи свою концовку

В своей третьей ветке выдели абзац с последствиями выбора тем же классом warning. Затем измени общее правило: например, увеличь внутренний отступ предупреждения до 16px. Убедись, что оно изменилось и в начале, и в третьем исходе, а обычные абзацы — нет. Один класс теперь отвечает за одинаковое оформление на разных страницах.

Проверка результата

Открой каждое окончание, попробуй все ссылки клавишами и сузь окно. Текст должен оставаться видимым: мы не фиксировали высоту страницы и не запретили прокрутку. Без CSS переходы всё равно работают — структура и оформление решают разные задачи.

Если стиль не загрузился, проверь имя style.css, расширение, сохранение и href. Если применились не все свойства, посмотри двоеточия, точки с запятой и парные фигурные скобки. Меняй по одному правилу, чтобы видеть причину.