18 KiB
Проект "Террариум", часть 2: Введение в CSS
Скетчноут от Tomomi Imura
Тест перед лекцией
Введение
CSS, или каскадные таблицы стилей, решают важную задачу веб-разработки: как сделать ваш сайт красивым. Стилизация приложений делает их более удобными и привлекательными; с помощью CSS также можно создать адаптивный веб-дизайн (Responsive Web Design, RWD), чтобы ваши приложения выглядели хорошо на экранах любого размера. CSS — это не только способ улучшить внешний вид приложения; спецификация включает анимации и трансформации, которые позволяют создавать сложные взаимодействия. Рабочая группа CSS помогает поддерживать актуальные спецификации CSS; следить за их работой можно на сайте World Wide Web Consortium.
Обратите внимание, CSS — это язык, который постоянно развивается, как и всё в вебе, и не все браузеры поддерживают новые части спецификации. Всегда проверяйте свои реализации, консультируясь с CanIUse.com.
В этом уроке мы добавим стили к нашему онлайн-террариуму и изучим несколько концепций CSS: каскадирование, наследование, использование селекторов, позиционирование и создание макетов с помощью CSS. В процессе мы создадим макет террариума и сам террариум.
Предварительные требования
HTML для вашего террариума должен быть готов к стилизации.
Посмотрите видео
Задание
В папке вашего террариума создайте новый файл style.css. Импортируйте этот файл в секцию <head>:
<link rel="stylesheet" href="./style.css" />
Каскадирование
Каскадные таблицы стилей включают идею "каскада", согласно которой применение стиля определяется его приоритетом. Стили, заданные автором сайта, имеют приоритет над стилями, заданными браузером. Стили, заданные "встроенно" (inline), имеют приоритет над стилями, заданными во внешнем файле стилей.
Задание
Добавьте встроенный стиль "color: red" к вашему тегу <h1>:
<h1 style="color: red">My Terrarium</h1>
Затем добавьте следующий код в ваш файл style.css:
h1 {
color: blue;
}
✅ Какой цвет отображается в вашем веб-приложении? Почему? Можете ли вы найти способ переопределить стили? Когда это может быть полезно, а когда нет?
Наследование
Стили наследуются от родительского элемента к дочернему, так что вложенные элементы наследуют стили своих родителей.
Задание
Установите шрифт для тела документа и проверьте, какой шрифт используется для вложенного элемента:
body {
font-family: helvetica, arial, sans-serif;
}
Откройте консоль браузера на вкладке 'Elements' и посмотрите шрифт H1. Он наследует шрифт от тела документа, как указано в браузере:
✅ Можете ли вы сделать так, чтобы вложенный стиль наследовал другое свойство?
Селекторы CSS
Теги
На данный момент ваш файл style.css содержит стили только для нескольких тегов, и приложение выглядит довольно странно:
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
Такой способ стилизации тегов позволяет управлять уникальными элементами, но вам нужно контролировать стили множества растений в вашем террариуме. Для этого нужно использовать селекторы CSS.
Идентификаторы (Ids)
Добавьте стили для размещения контейнеров слева и справа. Поскольку есть только один левый контейнер и только один правый контейнер, им присваиваются идентификаторы в разметке. Чтобы их стилизовать, используйте #:
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
Здесь вы разместили эти контейнеры с абсолютным позиционированием по краям экрана и использовали проценты для их ширины, чтобы они могли адаптироваться к маленьким экранам мобильных устройств.
✅ Этот код довольно повторяется, что нарушает принцип "DRY" (Don't Repeat Yourself). Можете ли вы найти более эффективный способ стилизации этих идентификаторов, возможно, используя идентификатор и класс? Вам нужно будет изменить разметку и переработать CSS:
<div id="left-container" class="container"></div>
Классы
В приведенном выше примере вы стилизовали два уникальных элемента на экране. Если вы хотите, чтобы стили применялись ко многим элементам на экране, вы можете использовать классы CSS. Сделайте это для размещения растений в левых и правых контейнерах.
Обратите внимание, что каждое растение в HTML-разметке имеет комбинацию идентификаторов и классов. Идентификаторы здесь используются JavaScript, который вы добавите позже, чтобы управлять размещением растений в террариуме. Классы же задают общий стиль для всех растений.
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
Добавьте следующий код в ваш файл style.css:
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
Примечательно в этом фрагменте смешение относительного и абсолютного позиционирования, о котором мы поговорим в следующем разделе. Обратите внимание на то, как высота задается в процентах:
Вы установили высоту держателя растений на 13%, что позволяет всем растениям отображаться в каждом вертикальном контейнере без необходимости прокрутки.
Вы переместили держатель растений влево, чтобы растения были более центрированы в своем контейнере. Изображения имеют большое количество прозрачного фона, чтобы их можно было перетаскивать, поэтому их нужно сдвинуть влево, чтобы они лучше вписывались в экран.
Затем самому растению задан максимальная ширина 150%. Это позволяет ему уменьшаться при уменьшении размера браузера. Попробуйте изменить размер браузера; растения остаются в своих контейнерах, но уменьшаются, чтобы вписаться.
Также примечательно использование z-index, который контролирует относительную высоту элемента (чтобы растения находились поверх контейнера и выглядели так, будто они находятся внутри террариума).
✅ Почему вам нужны и держатель растений, и селектор растений в CSS?
Позиционирование в CSS
Смешивание свойств позиционирования (существуют static, relative, fixed, absolute и sticky позиции) может быть немного сложным, но при правильном использовании оно дает хороший контроль над элементами на ваших страницах.
Элементы с абсолютным позиционированием размещаются относительно ближайших позиционированных предков, а если их нет, то относительно тела документа.
Элементы с относительным позиционированием размещаются на основе указаний CSS, чтобы сместить их от начальной позиции.
В нашем примере plant-holder — это элемент с относительным позиционированием, который размещается внутри контейнера с абсолютным позиционированием. Результат такого поведения заключается в том, что боковые контейнеры закреплены слева и справа, а plant-holder вложен, регулируя свое положение внутри боковых контейнеров, создавая пространство для размещения растений в вертикальном ряду.
Само растение также имеет абсолютное позиционирование, что необходимо для его перетаскивания, как вы узнаете в следующем уроке.
✅ Попробуйте изменить типы позиционирования боковых контейнеров и держателя растений. Что происходит?
Макеты в CSS
Теперь вы используете то, что узнали, чтобы создать сам террариум, используя только CSS!
Сначала стилизуйте дочерние элементы .terrarium как закругленный прямоугольник с помощью 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;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.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;
}
Обратите внимание на использование процентов. Если вы уменьшите размер браузера, вы увидите, как банка также масштабируется. Также обратите внимание на ширину и высоту элементов банки, заданные в процентах, и то, как каждый элемент абсолютно позиционируется в центре, закрепляясь внизу окна просмотра.
Мы также используем rem для радиуса границы, относительной длины шрифта. Подробнее об этом типе относительных измерений можно прочитать в спецификации CSS.
✅ Попробуйте изменить цвета банки и её прозрачность по сравнению с землей. Что происходит? Почему?
🚀Задача
Добавьте "пузырьковый" блеск в левую нижнюю часть банки, чтобы она выглядела более стеклянной. Вы будете стилизовать .jar-glossy-long и .jar-glossy-short, чтобы они выглядели как отраженный блеск. Вот как это будет выглядеть:
Чтобы пройти тест после лекции, изучите этот модуль Learn: Стилизация HTML-приложения с помощью CSS
Тест после лекции
Обзор и самостоятельное изучение
CSS кажется обманчиво простым, но при попытке идеально стилизовать приложение для всех браузеров и экранов возникают множество сложностей. CSS-Grid и Flexbox — это инструменты, которые были разработаны, чтобы сделать задачу более структурированной и надежной. Узнайте об этих инструментах, играя в Flexbox Froggy и Grid Garden.
Задание
Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.