History

softchris 9837770ac1 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

Проект "Террариум", часть 2: Введение в CSS

Скетчноут от Tomomi Imura

Помните, как ваш HTML-террариум выглядел довольно просто? CSS — это то, что превращает эту простую структуру в нечто визуально привлекательное.

Если HTML — это как строительство каркаса дома, то CSS — это все, что делает его уютным: цвета стен, расстановка мебели, освещение и то, как комнаты соединяются друг с другом. Подумайте, как Версальский дворец начинался как простой охотничий домик, но благодаря вниманию к декору и планировке превратился в одно из самых великолепных зданий мира.

Сегодня мы преобразим ваш террариум из функционального в изысканный. Вы научитесь точно позиционировать элементы, создавать макеты, адаптирующиеся к различным размерам экранов, и создавать визуальную привлекательность, которая делает сайты увлекательными.

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

Тест перед лекцией

Начало работы с CSS

CSS часто воспринимается как инструмент для "украшения", но его возможности гораздо шире. CSS — это как режиссер фильма: вы управляете не только внешним видом, но и движением, взаимодействием и адаптацией к различным ситуациям.

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

💡 Полезный совет: CSS постоянно развивается, добавляя новые функции и возможности. Всегда проверяйте CanIUse.com, чтобы убедиться в поддержке браузерами новых функций CSS перед их использованием в производственных проектах.

Вот что мы сделаем в этом уроке:

Создадим полный визуальный дизайн для вашего террариума, используя современные техники CSS
Изучим основные концепции, такие как каскад, наследование и селекторы CSS
Реализуем стратегии адаптивного позиционирования и макета
Построим контейнер террариума, используя формы и стили CSS

Предварительные требования

Вы должны завершить HTML-структуру для вашего террариума из предыдущего урока и подготовить ее для стилизации.

📺 Видеоресурс: Ознакомьтесь с этим полезным видеоуроком

Настройка файла CSS

Прежде чем начать стилизацию, нам нужно подключить CSS к нашему HTML. Это соединение сообщает браузеру, где найти инструкции по стилизации для нашего террариума.

В папке вашего террариума создайте новый файл с именем style.css, затем подключите его в секции <head> вашего HTML-документа:

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

Что делает этот код:

Создает соединение между вашими HTML и CSS файлами
Сообщает браузеру загрузить и применить стили из style.css
Использует атрибут rel="stylesheet", чтобы указать, что это файл CSS
Ссылается на путь к файлу через href="./style.css"

Понимание каскада CSS

Задумывались, почему CSS называется "каскадными" таблицами стилей? Стили каскадируют вниз, как водопад, и иногда конфликтуют друг с другом.

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

Эксперимент с приоритетом каскада

Давайте посмотрим, как работает каскад, создав конфликт стилей. Сначала добавьте встроенный стиль в ваш тег <h1>:

<h1 style="color: red">My Terrarium</h1>

Что делает этот код:

Применяет красный цвет непосредственно к элементу <h1> с помощью встроенного стиля
Использует атрибут style для встраивания CSS прямо в HTML
Создает правило стиля с самым высоким приоритетом для этого конкретного элемента

Затем добавьте это правило в ваш файл style.css:

h1 {
  color: blue;
}

В приведенном выше коде мы:

Определили правило CSS, которое нацелено на все элементы <h1>
Установили цвет текста синим, используя внешний файл стилей
Создали правило с более низким приоритетом по сравнению с встроенными стилями

✅ Проверка знаний: Какой цвет отображается в вашем веб-приложении? Почему именно этот цвет "побеждает"? Можете ли вы придумать сценарии, в которых вам может понадобиться переопределить стили?

💡 Порядок приоритета CSS (от самого высокого к самому низкому):

Встроенные стили (атрибут style)

ID (#myId)

Классы (.myClass) и атрибуты

Селекторы элементов (h1, div, p)

Стандартные настройки браузера

Наследование CSS в действии

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

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

Наблюдение за наследованием шрифтов

Давайте посмотрим на наследование, установив семейство шрифтов для элемента <body>:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Разбор того, что происходит:

Устанавливает семейство шрифтов для всей страницы, нацеливаясь на элемент <body>
Использует стек шрифтов с резервными вариантами для лучшей совместимости с браузерами
Применяет современные системные шрифты, которые хорошо выглядят на разных операционных системах
Обеспечивает, что все дочерние элементы наследуют этот шрифт, если он не переопределен

Откройте инструменты разработчика вашего браузера (F12), перейдите на вкладку "Элементы" и проверьте ваш элемент <h1>. Вы увидите, что он наследует семейство шрифтов от body:

✅ Время эксперимента: Попробуйте установить другие наследуемые свойства для <body>, такие как color, line-height или text-align. Что происходит с вашим заголовком и другими элементами?

📝 Наследуемые свойства включают: color, font-family, font-size, line-height, text-align, visibility

Ненаследуемые свойства включают: margin, padding, border, width, height, position

Освоение селекторов CSS

Селекторы CSS — это ваш способ нацеливания на конкретные элементы для стилизации. Они работают как точные указания — вместо того, чтобы сказать "дом", вы можете сказать "синий дом с красной дверью на улице Мэйпл".

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

Селекторы элементов (теги)

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Понимание этих стилей:

Устанавливает единообразную типографику по всей странице с помощью селектора body
Удаляет стандартные отступы и поля браузера для лучшего контроля
Стилизует все элементы заголовков с цветом, выравниванием и интервалами
Использует единицы измерения rem для масштабируемого и доступного размера шрифта

Хотя селекторы элементов хорошо работают для общего стилизования, вам понадобятся более специфичные селекторы для стилизации отдельных компонентов, таких как растения в вашем террариуме.

Селекторы ID для уникальных элементов

Селекторы ID используют символ # и нацеливаются на элементы с определенными атрибутами id. Поскольку ID должны быть уникальными на странице, они идеально подходят для стилизации отдельных, особенных элементов, таких как контейнеры для растений слева и справа.

Давайте создадим стили для боковых контейнеров террариума, где будут находиться растения:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

Что делает этот код:

Располагает контейнеры по краям экрана с помощью абсолютного позиционирования
Использует единицы измерения vh (высота окна просмотра) для адаптивной высоты, которая подстраивается под размер экрана
Применяет box-sizing: border-box, чтобы отступы включались в общую ширину
Удаляет ненужные единицы px из значений нуля для более чистого кода
Устанавливает мягкий цвет фона, который более приятен для глаз, чем резкий серый

✅ Задача по качеству кода: Обратите внимание, как этот CSS нарушает принцип DRY (не повторяйся). Можете ли вы переработать его, используя как ID, так и класс?

Улучшенный подход:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Селекторы классов для повторного использования стилей

Селекторы классов используют символ . и идеально подходят, когда вы хотите применить одни и те же стили к нескольким элементам. В отличие от ID, классы можно использовать повторно в вашем HTML, что делает их идеальными для создания единообразных шаблонов стилизации.

В нашем террариуме каждое растение нуждается в схожей стилизации, но также требует индивидуального позиционирования. Мы будем использовать комбинацию классов для общих стилей и ID для уникального позиционирования.

Вот структура HTML для каждого растения:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ru.png" />
</div>

Ключевые элементы объяснены:

Использует class="plant-holder" для единообразной стилизации контейнера для всех растений
Применяет class="plant" для общих стилей изображения и поведения
Включает уникальный id="plant1" для индивидуального позиционирования и взаимодействия с JavaScript
Обеспечивает описательный текст для доступности через экранные чтецы

Теперь добавьте эти стили в ваш файл style.css:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Разбор этих стилей:

Создает относительное позиционирование для держателя растения, чтобы установить контекст позиционирования
Устанавливает высоту каждого держателя растения на 13%, чтобы все растения помещались вертикально без прокрутки
Смещает держатели немного влево для лучшего центрирования растений в их контейнерах
Позволяет растениям масштабироваться адаптивно с помощью свойств max-width и max-height
Использует z-index для размещения растений поверх других элементов террариума
Добавляет мягкий эффект наведения с переходами CSS для улучшения взаимодействия с пользователем

✅ Критическое мышление: Почему нам нужны как селекторы .plant-holder, так и .plant? Что произойдет, если мы попробуем использовать только один?

💡 Шаблон дизайна: Контейнер (.plant-holder) управляет макетом и позиционированием, а содержимое (.plant) управляет внешним видом и масштабированием. Такое разделение делает код более удобным для поддержки и гибким.

Понимание позиционирования в CSS

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

Когда вы поймете позиционирование, многие задачи макета станут управляемыми. Нужна навигационная панель, которая остается наверху при прокрутке? Это решается с помощью позиционирования. Хотите, чтобы всплывающая подсказка появлялась в определенном месте? Это тоже решается позиционированием.

Пять значений позиционирования

Значение позиционирования	Поведение	Применение
`static`	Стандартный поток, игнорирует top/left/right/bottom	Обычный макет документа
`relative`	Позиционируется относительно своего нормального положения	Небольшие корректировки, создание контекста позиционирования
`absolute`	Позиционируется относительно ближайшего позиционированного предка	Точное размещение, наложения
`fixed`	Позиционируется относительно окна просмотра	Панели навигации, плавающие элементы
`sticky`	Переключается между относительным и фиксированным в зависимости от прокрутки	Заголовки, которые остаются на месте при прокрутке

Позиционирование в нашем террариуме

Наш террариум использует стратегическую комбинацию типов позиционирования для создания желаемого макета:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Понимание стратегии позиционирования:

Абсолютные контейнеры удаляются из стандартного потока документа и закрепляются по краям экрана
Относительные держатели растений создают контекст позиционирования, оставаясь в потоке документа
Абсолютные растения могут быть точно позиционированы внутри своих относительных контейнеров
Эта комбинация позволяет растениям располагаться вертикально, оставаясь при этом индивидуально позиционируемыми

🎯 Почему это важно: Элементы plant нуждаются в абсолютном позиционировании, чтобы стать перетаскиваемыми в следующем уроке. Абсолютное позиционирование удаляет их из стандартного потока макета, делая возможным взаимодействие "перетащи и отпусти".

✅ Время эксперимента: Попробуйте изменить значения позиционирования и наблюдайте за результатами:

Что произойдет, если вы измените .container с absolute на relative?
Как изменится макет, если .plant-holder использовать absolute вместо relative?
Что произойдет, если вы переключите .plant на относительное позиционирование?

Создание террариума с помощью CSS

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

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

Создание компонентов стеклянной банки

Давайте создадим террариум шаг за шагом. Каждый элемент использует абсолютное позиционирование и размеры на основе процентов для адаптивного дизайна:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Понимание конструкции террариума:

Использует размеры на основе процентов для адаптивного масштабирования на всех размерах экранов
Располагает элементы абсолютно для точного наложения и выравнивания
Применяет различные значения прозрачности для создания эффекта стеклянной прозрачности
Реализует слои с помощью z-index, чтобы растения выглядели внутри банки
Добавляет тонкую тень и изящный радиус границ для более реалистичного вида

Адаптивный дизайн с использованием процентов

Обратите внимание, что все размеры задаются в процентах, а не фиксированными пикселями:

Почему это важно:

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

Единицы измерения в CSS

Мы используем единицы rem для радиуса границ, которые масштабируются относительно размера шрифта корневого элемента. Это создает более доступные дизайны, учитывающие предпочтения пользователей в размере шрифта. Узнайте больше о относительных единицах CSS в официальной спецификации.

✅ Визуальный эксперимент: Попробуйте изменить эти значения и наблюдайте за эффектами:

Измените прозрачность банки с 0.5 на 0.8 – как это повлияет на внешний вид стекла?
Настройте цвет земли с #3a241d на #8B4513 – какое визуальное воздействие это окажет?
Измените z-index земли на 2 – что произойдет с наложением слоев?

Вызов от GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующий вызов:

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

Задание: Добавьте анимацию ключевых кадров CSS, чтобы растения в террариуме плавно раскачивались из стороны в сторону. Создайте анимацию раскачивания, которая слегка поворачивает каждое растение (на 2-3 градуса) влево и вправо с длительностью 3-4 секунды, и примените её к классу .plant. Убедитесь, что анимация повторяется бесконечно и имеет функцию сглаживания для естественного движения.

Узнайте больше о режиме Agent здесь.

🚀 Вызов: Добавление отражений на стекле

Готовы улучшить ваш террариум, добавив реалистичные отражения на стекле? Эта техника добавит глубины и реалистичности дизайну.

Вы создадите тонкие блики, которые имитируют отражение света на стеклянных поверхностях. Этот подход похож на тот, который использовали художники эпохи Возрождения, такие как Ян ван Эйк, чтобы сделать нарисованное стекло трехмерным. Вот к чему вы стремитесь:

Ваше задание:

Создайте тонкие белые или светлые овальные формы для отражений на стекле
Расположите их стратегически на левой стороне банки
Примените подходящую прозрачность и эффекты размытия для реалистичного отражения света
Используйте border-radius, чтобы создать органичные, пузырьковые формы
Экспериментируйте с градиентами или тенями для усиления реалистичности

Тест после лекции

Расширьте свои знания о CSS

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

Ваши следующие области изучения CSS:

Flexbox - упрощает выравнивание и распределение элементов
CSS Grid - предоставляет мощные инструменты для создания сложных макетов
CSS Variables - уменьшает повторение и улучшает поддерживаемость
Адаптивный дизайн - гарантирует, что сайты хорошо работают на разных размерах экранов

Интерактивные обучающие ресурсы

Практикуйте эти концепции с помощью увлекательных, интерактивных игр:

🐸 Flexbox Froggy - Освойте Flexbox через веселые задания
🌱 Grid Garden - Изучите CSS Grid, выращивая виртуальную морковь
🎯 CSS Battle - Проверьте свои навыки CSS с помощью кодинговых задач

Дополнительное обучение

Для полного изучения основ CSS пройдите этот модуль Microsoft Learn: Стилизация HTML-приложения с помощью CSS

Задание

Рефакторинг CSS

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

README.md Unescape Escape

Проект "Террариум", часть 2: Введение в CSS

Тест перед лекцией

Начало работы с CSS

Предварительные требования

Настройка файла CSS

Понимание каскада CSS

Эксперимент с приоритетом каскада

Наследование CSS в действии

Наблюдение за наследованием шрифтов

Освоение селекторов CSS

Селекторы элементов (теги)

Селекторы ID для уникальных элементов

Селекторы классов для повторного использования стилей

Понимание позиционирования в CSS

Пять значений позиционирования

Позиционирование в нашем террариуме

Создание террариума с помощью CSS

Создание компонентов стеклянной банки

Адаптивный дизайн с использованием процентов

Единицы измерения в CSS

Вызов от GitHub Copilot Agent 🚀

🚀 Вызов: Добавление отражений на стекле

Тест после лекции

Расширьте свои знания о CSS

Интерактивные обучающие ресурсы

Дополнительное обучение

Задание

README.md

Unescape Escape