Изучаем CSS — язык, который рисует атмосферу

Отлично, ты на втором уроке. Сегодня мы добавим красок в наш html-файл.

Теперь возьмём в руки волшебную кисть — CSS (Cascading Style Sheets) — язык, который отвечает за цвета, шрифты, отступы и анимации. Если HTML — это скелет, то CSS — это краски, свет и тени, которые делают всё по-настоящему бомбезным.

В первом уроке у тебя получилось прикоснуться к CSS внутри тега <style>. Но стили можно писать и в отдельном файле, и прямо внутри html-тега через style="...".

Мы продолжим создавать стили внутри тега <style>.

Не бойся: запомнить все правила CSS сразу — невозможно и не нужно. Когда хочешь что‑то изменить, просто гугли и пробуй. Практика — лучший учитель.

Скачай материалы к уроку по ссылке и давай приступать. Пора добавить атмосферу киберпанка в нашу игру.

Цель этого урока: оформить первую сцену в стиле киберпанк с помощью CSS — задать фон, шрифты и неоновую палитру.

Что ты изучишь: основы CSS — селекторы, свойства, значения, сброс стилей, подключение фона, стилизацию текста, классы и ID.

На выходе: атмосферная киберпанк-сцена с неоновым оформлением, готовая к дальнейшему развитию.

Как устроено описание стилей в CSS?

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

Пример:

p {
color: blue;
font-size: 14px;
}

Здесь мы говорим: «Все абзацы (p) должны иметь синий цвет текста и размер шрифта 14 пикселей». Так браузер понимает, как оформить страницу, чтобы она выглядела красиво и удобно.

Давай разберём по шагам, как строится любое CSS‑правило, на понятном языке:

Селектор

Представь, что это «адрес» или «имя» тех элементов, к которым ты хочешь применить стиль. Селектор может обозначаться по-разному.

p — все абзацы
body — всё тело страницы
.class — все элементы с классом class
#id — один элемент с айди id
div — все теги<div>
a:hover — все ссылки в момент, когда на них наводят курсор
Фигурные скобки `{}

Всё, что внутри { ... }`, — это список правил, которые будут применены к выбранным элементам. Каждое CSS‑правило оборачивается в такие скобки. Между разными правилами по привычке ставят пустую строку, чтобы было удобнее читать.

Свойство (property)

Это то, что ты меняешь: цвет текста, отступы, размер шрифта и т. д.

Примеры свойств:

color (цвет текста)
margin (внешний отступ вокруг элемента)
font-size (размер шрифта)
Значение (value)

Конкретика, на что ты меняешь свойство. У каждого свойства может быть свой набор значений:

Для color — например, red или в hex‑формате: `#ff00cc

(цвет в формате #RRGGBB: первые две цифры — красный, следующие — зелёный, последние — синий, каждое от 00 до FF; чтобы найти нужный код цвета, в поиске добавь слово hex пример: бирюзовый hex`)

Для margin — например, 0, 10px, 1em и т. д.
Для font-size — например, 14px, 1.2rem
Точка с запятой `;

`Заканчивает одно свойство, прежде чем начать другое. Без неё браузер может «запутаться» и не применить следующие правила.

Сброс стилей — чистый лист для твоего киберпанка

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

Чтобы начать с чистого листа и быть уверенным, что всё выглядит именно так, как ты хочешь, нужно сбросить стили по умолчанию.

Это как стереть старую краску с холста, чтобы написать свою уникальную картину. Сначала удали из тега <style> все что было добавлено в первом уроке. Начнем с нуля.

Вот самый простой и популярный способ сброса. Замени все содержимое внутри тега style на этот код:

/\* Звездочка означает назначить стили для всех элементов \*/
\* {
margin: 0; /\* Убираем внешние отступы (margin) — пространство вне элемента \*/
padding: 0; /\* Убираем внутренние отступы (padding) — пространство внутри элемента \*/
box-sizing: border-box; /\* Включаем в размеры элементов отступы и границы \*/
}

Добавляем фон — погружаемся в атмосферу

В папке с твоей игрой создай новую папку и назови её img. В эту папку мы будем складывать все картинки для игры.

В материалах к уроку в аналогичной папке ты найдешь изображение. Скопируй картинку с названием cyberpunk-room.png и положи её в в свою папку img.

Чтобы сделать фон для всей страницы, мы используем CSS-свойство background-image. Оно говорит браузеру: «Покажи эту картинку на фоне».

Путь к картинке нужно написать внутри url(). Это просто способ сказать, где именно хранится наша картинка.

Вот пример, как добавить фон и настроить его, чтобы он красиво заполнял весь экран:

body {
background-image: url('img/cyberpunk-room.png'); /\* путь к изображению \*/
background-size: cover; /\* растягивает фон по ширине и высоте \*/
background-position: center; /\* центрирует изображение \*/
background-repeat: no-repeat; /\* без повторений \*/
height: 100vh; /\* высота body — весь экран \*/
}

Так фон будет красиво масштабироваться под размер окна браузера, создавая атмосферу киберпанка на всей странице.

Как задать стиль конкретному элементу: классы и айди

В CSS, чтобы применить стиль не ко всем элементам одного типа, а к конкретным — используют классы и айди.

Класс (class) — это метка, которую можно присвоить любому количеству элементов.
Айди (id) — уникальный идентификатор, который должен быть только у одного элемента на странице.

Как добавить класс или айди в HTML

<!-- Элемент с классом "highlight" -->
<p class="highlight">Этот текст с классом highlight</p>
<!-- Элемент с айди "main-title" -->
<h1 id="main-title">Заголовок с айди main-title</h1>

Как написать CSS для классов и айди

Для класса используем точку . перед именем:

.highlight {
color: #ff00cc;
font-weight: bold;
}

Для айди используем решётку # перед именем:

#main-title {
font-size: 32px;
text-align: center;
}

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

Стилизация текста внутри html-тега

Чтобы управлять стилем текста и другими элементами внутри главного блока с историей, нам нужно добавить класс к самому первому тегу <div>, который содержит внутри себя другие теги и текст.

Добавь следующий класс, чтобы получилось так:

<div class="cyberpunk">
<!-- Здесь внутри основной контент -->
</div>

И зададим ему стили:

/\* Основной контейнер с текстом \*/
.cyberpunk {
font-family: sans-serif; /\* Меняем шрифт на простой и современный, чтобы текст был читаемым \*/
text-align: center; /\* Выравниваем текст по центру \*/
position: absolute; /\* "Вырываем" контейнер из обычного потока страницы, чтобы точно его разместить \*/
bottom: 0; /\* Прижимаем контейнер к низу экрана \*/
width: 100%; /\* Ширина контейнера — весь экран по горизонтали \*/
background: rgba(10, 10, 30, 0.85); /\* Темный фон с прозрачностью, чтобы текст выделялся на фоне \*/
border-top: 2px solid #00fff7; /\* Добавляем сверху яркую неоновую линию — эффект киберпанка \*/
padding: 20px; /\* Внутренние отступы, чтобы текст не прилипал к краям \*/
color: #00fff7; /\* Цвет текста — яркий бирюзовый, соответствующий неоновой стилистике \*/
}

Как задавать стили для вложенных элементов

Чтобы задать стиль элементам, которые находятся внутри другого элемента с классом, просто укажи селектор через пробел. Например, чтобы оформить заголовок внутри контейнера с классом cyberpunk, напиши так:

/\* Заголовок внутри контейнера \*/ .cyberpunk h1 { color: #ff00cc; /\* Яркий розовый цвет для заголовка, чтобы выделить его \*/ margin-bottom: 16px; /\* Отступ снизу, чтобы отделить заголовок от следующего текста \*/ }

Для ссылок внутри контейнера

/\* Ссылки внутри контейнера \*/
.cyberpunk a {
color: #00fff7; /\* Цвет ссылок совпадает с основным текстом \*/
text-decoration: none; /\* Убираем стандартное подчёркивание у ссылок \*/
margin-top: 16px; /\* Отступ сверху, чтобы ссылки не сливались с предыдущим текстом \*/
display: block; /\* Каждая ссылка занимает свою строку \*/
font-weight: bold; /\* Делает текст ссылок жирным для акцента \*/
}

А вот так стили при наведении на ссылку:

/\* Эффект при наведении на ссылку \*/ .cyberpunk a:hover { color: #ff00cc; /\* При наведении цвет ссылки меняется на розовый — как у заголовка \*/ }

финальный результат урока

Заключение

Поздравляю. Это второй шаг на пути к созданию своей визуальной новеллы в жанре киберпанк.

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

Это огромный шаг. Не переживай, если пока что не всё запомнилось — это абсолютно нормально. Главное — начать пробовать и видеть результат.

Продолжай в том же духе, экспериментируй, играй со стилями — и совсем скоро твоя игра будет выглядеть еще лучше. Вперёд, к третьему уроку — там будет ещё интереснее!