Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале мы создадим плиточный макет для раздела Projects нашего сайта. Для этого нужно оформить восемь HTML-контейнеров с помощью CSS классов. Также мы добавим к этим элементам псевдокласс hover, чтобы они меняли цвет, когда пользователь наводит на них курсор. Всю условную информацию в мануале вы можете свободно заменить своей собственной. Методы, которые использованы здесь, можно применить к к любым другим проектам, разработанным на CSS и HTML.
Требования
Чтобы следовать этому мануалу, нужно подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
Для начала добавьте заголовок Projects как новый раздел на странице (убедитесь, что не удалили добавленный вами контент из предыдущих руководств). В файл index.html добавьте следующий фрагмент кода после последнего закрывающего тега
:
Projects
Первая строка этого фрагмента – это комментарий для обозначения третьего раздела веб-сайта. Комментарий используется для сохранения примечаний к вашему коду и не отображается браузером (посетители сайта смогут найти его только в исходном коде страницы). Во второй строке находится элемент заголовка , а в нем – текст заголовка Projects.
Затем нам нужно изменить стиль заголовка, создав класс section-heading. Откройте файл styles.css, скопируйте и вставьте следующий фрагмент кода в конец файла:
Этот фрагмент кода определяет стиль класса section-heading.
Затем мы применим новый класс section-heading к заголовку Projects в файле HTML. Вернитесь в файл index.html и добавьте класс в элемент HTML:
Projects
Сохраните файлы и загрузите вашу страницу в браузере. Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему мануалу Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).
Теперь заголовок должен располагаться по центру страницы, а его размер и цвет должны быть скорректированы согласно стилю сайта.
Добавление и стилизация плиточных блоков
Теперь нужно добавить восемь блоков – каждый для отдельного проекта – под заголовком нового раздела. Для начала создадим CSS класс, который оформит контейнеры таким образом, чтобы четыре из них помещались в ряд.
Вернитесь к файлу styles.css и добавьте следующий фрагмент кода в конец документа:
/* Sizing for Project Containers */
В этом фрагменте кода мы определили класс column-4 и указали значения, которые позволяют отображать на странице четыре столбца в ряд:
Объявление float: left перемещает элемент в левую сторону контейнера, внутри которого он находится, позволяя окружающему контенту (в данном случае другим блокам проекта) обтекать его по правой стороне.
Объявление width: 21% устанавливает ширину элемента. Она равна 21% ширины контейнера, которым в данном случае является веб-страница. Если вы хотите, чтобы размер элемента изменялся в соответствии с размером контейнера, в котором он расположен, лучше устанавливать размеры (например, ширину) в процентах, а не в пикселях. Обратите внимание: динамическое определение размеров может оказаться сложным процессом – существует несколько методов создания отзывчивых элементов, которые можно реализовать после создания основы в CSS.
Затем мы создадим класс для каждого из восьми блоков (чтобы мы могли стилизовать их по-разному), а также добавим изображения к первому и последнему блоку. Для начала сохраните одно или два изображения, которые вы хотите использовать на вашем сайте, в папке images.
Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите CTRL и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. В нашем нануале мы условно назовем изображения project-left.jpeg и project-right.jpeg.
Чтобы создать класс для каждого блока, добавьте следующий фрагмент кода в конец файла styles.css:
/* Color and Images for Project Containers */
Убедитесь, что вы сохранили свои изображения в папке images и указали правильный путь к файлу в наборах правил для класса project-1 и project-8.
Давайте сделаем небольшую паузу, чтобы просмотреть только что написанный код. В наборах правил для классов project-1 и project-8 мы добавили фоновое изображение, указали пути к этим файлам и объявили, что фоновое изображение должно быть подогнано так, чтобы покрыть весь элемент (значение cover).
В наборах правил для блоков 2-7 с помощью цветовых кодов HTML мы указали разные фоновые цвета. Обратите внимание, фон для project-7 мы сделали прозрачным, но вы можете изменить его по своему желанию. В целом вы можете поэкспериментировать с различным фоновыми изображениями и цветами самостоятельно, если хотите.
Затем нам нужно добавить набор правил, который изменяет размер шрифта и расположение текста, который будет добавлен в эти блоки. Вставьте следующий набор правил в конец файла styles.css:
Сохраните файл styles.css. Теперь добавьте контейнеры в HTML-документ и стилизуйте их с помощью только что определенных CSS-классов. Вернитесь в файл index.html и вставьте следующий фрагмент кода под заголовком Projects:
WEB DESIGN
CHAT BOTS
GAME DESIGN
TEXT ANALYSIS
JAVA SCRIPT
DATA PRIVACY
Сохраните файл index.html и перезагрузите его в браузере. После этого на вашей странице под заголовком Projects появится 8 одинаковых блоков, первый и последний – с изображениями, а остальные – с заголовками (WEB DESIGN, CHAT BOTS и так далее).
Согласно нашим файлам, на странице должно быть две строки по четыре блока, каждый из которых оформлен согласно присвоенным им классам column-4 и project-x. Весь текстовый HTML контент в блоках оформлен согласно присвоенному ему классу project-text.
Мы также добавили элемент разрыва строки HTML ( ), чтобы создать разрыв между двумя словами в каждом поле. Как мы уже говорили, вы можете изменить этот текст сейчас или позже, если хотите. Вы также можете использовать элемент гиперссылки HTML , чтобы связать этот текст с новыми страницами вашего веб-сайта. Этот элемент мы рассмотрим более подробно в конце этой серии.
Пора добавить псевдокласс, чтобы блоки меняли цвет, когда пользователь наводит на них курсор.
Изменение цвета элемента при взаимодействии с пользователем
Чтобы блоки в разделе Projects меняли цвет при наведении на них курсора, нужно добавить псевдокласс к каждому из классов данного раздела сайта.
Как вы, возможно, помните (если читали наш мануал по псевдоклассам), чтобы создать псевдокласс, после имени класса, который вы пытаетесь изменить, нужно поставить двоеточие и указать имя псевдокласса. Следовательно, чтобы добавить псевдокласс :hover к нашим классам, нужно вставить следующие наборы правил в конец файла styles.css:
Сегодня переводим полезный пост с gedd.ski, «Grid Tile Layouts with auto-fit and minmax», от разработчика Дейва Геддеса, основателя Mastery Games.
Tile (то есть, «плитка» — прим. переводчика) layouts — это, возможно самый распространенный макет, который используют фронтенд-разработчики, особенно для областей с контентом. Как выяснилось, tile layouts очень просто верстать с помощью новых свойств — minmax и auto-fit, которые поставляются вместе с CSS Grid. Сегодня мы поговорим о том, как это сделать и покажем удобный способ создания идеальных адаптивных «плиточных» макетов.
Плитки повсюду
Вы точно знакомы с примерами, приведенными далее! Практически все страницы в Google Play Music созданы с помощью tile layouts:
Вы, вероятно, никогда не видели страницу Twitter moments, но она тоже состоит из плиток, где некоторые элементы сетки занимают больше ячеек, чем другие – получается нечто вроде «мозаики».
Для чего нам нужен auto-fit?
Мы используем новое свойство auto-fit для создания плиточных макетов. С его помощью мы задаем параметры так, чтобы Grid создавал столько колонок заданного размера, сколько может поместиться в пространстве контейнера (). Предположим, мы хотим разделить наш контейнер на колонки шириной 200px. Мы не задаем количество колонок, а предполагаем, что он «автозаполнится» — их будет столько, сколько туда влезет:
.app
display:grid;
grid-gap:15px;
grid-template-columns:repeat(auto-fit,200px);
>
В этом div шириной 1400 px у нас с комфортом разместились шесть колонок шириной 200 px с промежутками в 15 px между ними. И еще немного места осталось – оно-то нас и смущает. Мы могли бы сказать «И так сойдет!» — и наш tile layout будет не хуже, чем многие другие. Но посмотрите на правую сторону нашего контейнера: там осталась большая пустая область, в которой не хватило места для еще одной колонки. Она портит все впечатление. В CSS Grid есть хорошие инструменты, чтобы исправить этот недочет и сделать наш макет еще лучше.
Minmax() поможет!
Мы можем настроить наш макет так, чтобы плитки заполняли весь контейнер, а не оставляли пустое пространство в конце. И мы сделаем это путем создания гибких колонок с помощью minmax:
Свойство «minmax(200px, 1fr)» заставило наши колонки шириной 200 px создаваться как и в прошлый раз – столько, сколько поместится в контейнере. И их также получилось шесть штук. Более того, как и раньше, осталось примерно 130 px свободного места. Но на этот раз Grid равномерно распределил это дополнительное пространство между шестью плитками, поскольку их максимальный размер был задан не только в пикселях, но и равным 1fr (1 доля свободного пространства). Такое сочетание auto-fit и minmax сделало нашу плиточную раскладку гибкой и полноразмерной.
Адаптивность
Самое приятное заключается в том, что наш макет будет хорошо отображаться на экранах любых мобильных устройств. Каждый раз, когда для очередной 200-пиксельной колонки больше не хватит места, Grid автоматически создаст новую строку и переместит элементы в нее. Значение minmax в 1fr гарантирует то, что элементы всегда будут заполнять всю строку. И это только одна из причин, почему CSS Grid так хорош для адаптивных макетов.
Больше крутых макетов с плитками
Теперь, когда вы познакомились с основами верстки плиток на Grid, давайте немного повеселимся. С помощью repeat() мы можем повторять не только колонки или строки, но и целые группы колонок/ строк.
На этот раз мы задаем для Grid повторение стольких групп, сколько поместится, состоящих из гибких колонок шириной в 300 px и фиксированных колонок шириной 150 px.
Этот макет создается так же, как и предыдущий, за исключением одного момента: гибкие колонки забирают часть дополнительного пространства себе после того, как алгоритм auto-fit сделает свое дело.
Варьируем плитки
Ранее в статье автор упоминал, что Twitter moments – это просто страница с tile layout, где некоторые элементы Grid занимают больше ячеек, чем другие. Давайте сверстаем нечто подобное, причем так, чтобы каждый третий элемент контейнера занимал два столбца, а каждый пятый – две строки:
.item:nth-of-type(3n)
grid-column:span 2;
>
.item:nth-of-type(5n)
grid-row:span 2;
>
Мы получили довольно крутой результат, но он выглядел бы еще лучше, если бы мы использовали свойство dense для определения способа размещения элементов Grid.
Это заставило Grid вернуться к ранее пропущенным ячейкам и упаковать элементы настолько плотно, насколько это возможно.
Пробуем на практике!
Google Music, Twitter и макеты блогов – это все, конечно, хорошо. Но давайте посмотрим на применение CSS Grid для чего-то гораздо более вдохновляющего: фотогалереи Сэма – лучшей собаки в мире. Очевидно, речь идет о питомце автора этой замечательной статьи (прим. переводчика). Крошечное дополнение к тому, что мы уже сделали: используем «grid-auto-rows» для того, чтобы все строки, которые сгенерирует auto-fit, были высотой в 200 px.
