Три подхода к написанию стилей и лучший выбор
CSS есть три способа стилизации веб-страниц:
1. Встроенные стили (в атрибуте style)
<p style="color: red;">Текст</p>
2. Внутренние стили (в теге <style> внутри HTML)
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
3. Внешние таблицы стилей (отдельный CSS-файл, подключаемый через <link>)
<link rel="stylesheet" href="styles.css">
Встроенные стили (1) удобны для быстрого изменения одного элемента, но делают код громоздким и трудно поддерживаемым. Внутренние стили (2), определённые в <head> через <style>, подходят для одной страницы, но требуют дублирования при многократном использовании. Внешние стили (3), например, файл styles.css, позволяют повторно использовать стили на нескольких страницах, упрощая обновления. Хорошей практикой считается, добавление внешних стилей для удобства поддержки и повторного использования. В качестве демонстрации возьмем игру 'Пятнашки' и покажу, как её можно стилизовать используяю CSS. В последующих статьях добавим функционал.
Верстка и стили для игры "Пятнашки" с CSS Grid
Игра "Пятнашки" — это 4x4 сетка с 15 пронумерованными плитками и одним пустым местом. Вот пример HTML и CSS с использованием Grid:
HTML:
<!-- Объявляем, что это документ HTML5, чтобы браузер знал, как его читать -->
<!DOCTYPE html>
<!-- Начало документа, указываем, что язык русский (ru) для поисковиков и программ -->
<html lang="ru">
<!-- Открываем раздел head — здесь настройки страницы, которые не видны пользователю -->
<head>
<!-- Устанавливаем кодировку UTF-8, чтобы поддерживать русский текст и символы -->
<meta charset="UTF-8">
<!-- Делаем страницу адаптивной для телефонов: ширина = устройству, масштаб 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Задаём название страницы, оно видно на вкладке браузера -->
<title>Игра Пятнашки</title>
<!-- Подключаем файл стилей css/styles.css для оформления страницы -->
<link rel="stylesheet" href="css/styles.css">
<!-- Закрываем раздел head -->
</head>
<!-- Открываем body — здесь всё, что пользователь увидит на экране -->
<body>
<!-- Блок-контейнер, чтобы сгруппировать и выровнять содержимое -->
<div class="container">
<!-- Блок-обёртка для игры, чтобы собрать все её элементы вместе -->
<div class="game-wrapper">
<!-- Игровое поле, где будут плитки "Пятнашек" -->
<div class="game-board">
<!-- Плитка с числом 1, класс tile нужен для стилей -->
<div class="tile">1</div>
<!-- Плитка с числом 2 -->
<div class="tile">2</div>
<!-- Плитка с числом 3 -->
<div class="tile">3</div>
<div class="tile">4</div>
<div class="tile">5</div>
<div class="tile">6</div>
<div class="tile">7</div>
<div class="tile">8</div>
<div class="tile">9</div>
<div class="tile">10</div>
<div class="tile">11</div>
<div class="tile">12</div>
<div class="tile">13</div>
<div class="tile">14</div>
<div class="tile">15</div>
<!-- Пустая ячейка, чтобы плитки могли двигаться -->
<div class="empty"></div>
<!-- Закрываем игровое поле -->
</div>
<!-- Блок для счетчика ходов -->
<div class="moves-counter">
<!-- Заголовок счетчика, класс для стилей -->
<h3 class="counter-title">Количество ходов</h3>
<!-- Значение счетчика, изначально 0, будет меняться в игре -->
<span class="counter-value">0</span>
<!-- Закрываем блок счетчика -->
</div>
<!-- Закрываем обёртку игры -->
</div>
<!-- Закрываем контейнер -->
</div>
<!-- Закрываем body — конец видимой части -->
</body>
<!-- Закрываем html — конец всего документа -->
</html>
CSS:
/* Общие стили для body и фона */
/* Задаём всему документу стили */
body {
/* Градиентный фон от светло-серого к синеватому, угол 135 градусов */
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
/* Минимальная высота страницы = 100% высоты экрана */
min-height: 100vh;
/* Убираем стандартные отступы браузера */
margin: 0;
/* Шрифт Arial, а если его нет — любой без засечек */
font-family: Arial, sans-serif;
}
/* Контейнер для центрирования */
/* Стили для блока .container */
.container {
/* Включаем flexbox, чтобы легко выравнивать элементы */
display: flex;
/* Центрируем содержимое по горизонтали */
justify-content: center;
/* Центрируем содержимое по вертикали */
align-items: center;
/* Минимальная высота = 100% экрана, чтобы центрирование работало */
min-height: 100vh;
/* Внутренний отступ 20px со всех сторон */
padding: 20px;
}
/* Обертка для игры и счетчика */
/* Стили для блока .game-wrapper */
.game-wrapper {
/* Flexbox для расположения поля и счетчика рядом */
display: flex;
/* Расстояние между элементами внутри (поле и счетчик) — 30px */
gap: 30px;
/* Выравниваем элементы по верхнему краю */
align-items: flex-start;
}
/* Стили игрового поля */
/* Стили для блока .game-board */
.game-board {
/* Включаем сетку (grid) для создания поля 4x4 */
display: grid;
/* 4 столбца одинаковой ширины (1fr = одна доля) */
grid-template-columns: repeat(4, 1fr);
/* 4 строки одинаковой высоты */
grid-template-rows: repeat(4, 1fr);
/* Расстояние между плитками — 5px */
gap: 5px;
/* Ширина поля — 400px */
width: 400px;
/* Высота поля — 400px */
height: 400px;
/* Белый фон поля */
background-color: #ffffff;
/* Внутренний отступ внутри поля — 15px */
padding: 15px;
/* Скругляем углы на 10px */
border-radius: 10px;
/* Добавляем тень для объёма */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Стили плиток */
/* Стили для всех элементов с классом .tile */
.tile {
/* Синий фон плиток */
background-color: #4b5eAA;
/* Тёмно-синяя рамка толщиной 1px */
border: 1px solid #3b4e88;
/* Размер шрифта чисел на плитках — 24px */
font-size: 24px;
/* Жирность шрифта (600 — довольно толстый) */
font-weight: 600;
/* Белый цвет текста */
color: #ffffff;
/* Flexbox для центрирования текста внутри плитки */
display: flex;
/* Центрируем текст по горизонтали */
justify-content: center;
/* Центрируем текст по вертикали */
align-items: center;
/* Скругляем углы плиток на 5px */
border-radius: 5px;
/* Курсор становится "рукой", показывая, что можно кликнуть */
cursor: pointer;
/* Плавные изменения (анимация) за 0.2 секунды */
transition: all 0.2s ease-in-out;
}
/* Эффект при наведении на плитку */
.tile:hover {
/* Меняем цвет фона на чуть светлее */
background-color: #5a6ecc;
/* Сдвигаем плитку вверх на 2px */
transform: translateY(-2px);
/* Добавляем небольшую тень для эффекта поднятия */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Стили для пустой ячейки */
.empty {
/* Прозрачный фон, чтобы ячейка была невидимой */
background-color: transparent;
/* Убираем рамку */
border: none;
}
/* Стили счетчика ходов */
/* Стили для блока .moves-counter */
.moves-counter {
/* Белый фон счетчика */
background-color: #ffffff;
/* Внутренний отступ 20px со всех сторон */
padding: 20px;
/* Скругляем углы на 10px */
border-radius: 10px;
/* Тень для объёма */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Центрируем текст внутри */
text-align: center;
/* Минимальная ширина блока — 150px */
min-width: 150px;
}
/* Стили заголовка счетчика */
.counter-title {
/* Размер шрифта — 18px */
font-size: 18px;
/* Жирность шрифта — 600 */
font-weight: 600;
/* Тёмно-серый цвет текста */
color: #333333;
/* Отступ снизу — 10px, чтобы отделить от числа */
margin-bottom: 10px;
}
/* Стили значения счетчика */
.counter-value {
/* Большой размер шрифта — 32px */
font-size: 32px;
/* Очень жирный шрифт — 700 */
font-weight: 700;
/* Синий цвет текста, как у плиток */
color: #4b5eaa;
}
Эта разметка создаёт сетку 4x4, где плитки центрированы, имеют светло-серый фон и чёрный текст, а пустая ячейка прозрачна. Это статическая версия; для интерактивности потребуется JavaScript.
Инструкции по созданию папок и файлов
Чтобы начать проект, создайте папку, например, "fifteen-game". Внутри создайте файл index.html и папку css внутри которого нужно добавить файл styles.css. В index.html добавьте ссылку на CSS через <link rel="stylesheet" href="css/styles.css"> в секции <head>. Скопируйте HTML-код игры в index.html, а CSS — в styles.css. Сохраните файлы и откройте index.html в браузере, дважды щёлкнув по нему или выбрав "Открыть с помощью" и выбрав браузер. Убедитесь, что пути файлов правильные, чтобы стили применялись корректно.
Рекомендации для новичков
Понимание селекторов и специфичности: Селекторы позволяют выбирать элементы для стилизации, а специфичность определяет, какие стили применяются при конфликтах. Это основа для точного управления стилями.
Модель коробки (Box Model): Эта концепция включает padding, margin, border и content, которые вместе определяют размер и расположение элементов на странице. Понимание модели коробки важно для управления макетом.
Техники макета, такие как Flexbox и Grid: Эти инструменты позволяют создавать сложные и адаптивные дизайны. Grid, как показано в примере с "Пятнашками", особенно полезен для двумерных сеток.
Адаптивный дизайн: Как создавать веб-страницы, которые хорошо выглядят на разных устройствах, используя медиа-запросы и другие техники.
Анимации и переходы в CSS: Добавление динамических эффектов, таких как анимации при наведении или плавные переходы, улучшает пользовательский опыт и делает сайт более привлекательным.
Освоив эти темы, вы сможете создавать более сложные и визуально привлекательные веб-страницы.
Ресурсы для дальнейшего изучения CSS
Для углубленного изучения CSS новичкам полезны следующие ресурсы:
MDN Web Docs – CSS (MDN Web Docs – CSS) — подробная документация с примерами.
W3Schools – CSS Tutorial (W3Schools – CSS Tutorial) — интерактивные уроки для начинающих.
CSS-Tricks (CSS-Tricks) — блог с практическими примерами и советами.
FreeCodeCamp – CSS Course (FreeCodeCamp – CSS Course) — курсы с практическими проектами.
Экспериментируйте с различными свойствами CSS, чтобы понять, как они влияют на страницы.