Содержание

Оглавление

courses / qa automation / web development

Урок 6.CSS: Стили кода и построение макетов

Работа с элементами HTML, инспектирование и дебаггинг кода.
Стили написания CSS и построение макетов. Адаптивный дизайн.

Урок 6. CSS: Стили кода и построение макетов

Работа с элементами HTML, инспектирование и дебаггинг кода. Стили написания CSS и построение макетов. Адаптивный дизайн.

Предыдущий урок

Урок 5. CSS: Типы данных и работа с
HTML-элементами

Следующий урок

Урок 7. JavaScript в веб-разработке

Минимизируйте использование препроцессоров
Аккуратнее с CSS-методологиями
Используйте гибкие, относительные единицы
Не перебарщивайте со сбросами стилей
Планирование до действия
Единообразный и наглядный синтаксис

4. Макет CSS

Нормальный поток
Флоаты (float, обтекание)
Флексбоксы (flexbox)
Позиционирование
Сетка (Grid)
Мультиколоночность
Адаптивный дизайн

Перейти

2

Практический блок

1. Вопросы
2. Задачи
3. Решения

Перейти

ТЕОРЕТИЧЕСКИЙ БЛОК

1

Особенности работы с объектами веб-страницы

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

1.1. Текст

Так как текстовый контент до сих пор остается лидирующим по объему, его форматирование способно существенно улучшить восприятие информации. Текстовые элементы могут быть как строчными (<span>, <strong>, <i>), так и блочными (<article>, <p>, <aside>). Это нужно учитывать при работе с ними.

Опишем главные возможности CSS при взаимодействии с текстовым содержимым:

1) Цвет (задается свойством color, по умолчанию наследуется от <body>)

Пример - HTML

<p>Текст параграфа приобрел темно-синий оттенок.</p>

Пример - CSS

p {
    color: darkblue;
}

2) Выравнивание по горизонтали (используется свойство text-align, актуально лишь для блочных элементов)

Пример - HTML

<h1>Заголовок справа</h1>
<p>Текст параграфа выровняем по центру</p>

Пример - CSS

p {
    text-align: center;
}

h1 {
    text-align: right;
}

Выравнивание текста

3) Направление (для языков с не европейским направлением написания текста)

Пример - HTML

<span>Арабское направление письма</span>

Пример - CSS

p {
    direction: rtl;
    unicode-bidi: bidi-override;
  }

4) Декорирование (разные стили подчеркивания)

Пример - HTML

<p>
    <span class="under">Значимость</span>
    </span> практики 
    <span class="through">можно
    </span> нельзя переоценить, как говорят 
    <span class="above">лидеры</span>
</p>

Пример - CSS

.under {
    text-decoration: underline;
}

.through {
    text-decoration: line-through;
}

.above {
    text-decoration: overline;
}

Разные стили подчеркивания

5) Преобразование (к верхнему или нижнему регистру, выделение первого символа)

Пример - HTML

<h1>Капслоками балуетесь?</h1>

Пример - CSS

h1 {
    text-transform: uppercase;
}

6) Отступы, расстояния (между строками, буквами, словами)

Пример - HTML

<p>
    Текстовое полотно, представленное многими словами, буквами и выражениями. 
    Полезная информация. Сложноструктурированные предложения.
</p>

Пример - CSS

p {
    width: 20vw;
    text-indent: 25px;
    letter-spacing: 3px;
    line-height: 5vh;
    word-spacing: 1vw;
    white-space: normal;
}

7) Выравнивание по вертикали

Пример - HTML

<p>
    Текст на одном уровне
    <span>А этот - выше</span>
</p>

Пример - CSS

span {
    vertical-align:33px;
}

8) Тени (горизонтальные или вертикальные сдвиги, с размытием, конкретного цвета)

Пример - HTML

<h1>Украшаем заголовок</h1>

Пример - CSS

h1 {
    text-shadow: 7px 7px 10px teal;
}

Заголовок с тенью

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

Через медиазапросы
Через тег <link>

При первом варианте мы прописываем в заголовочной части html-документа нужные ссылки, а потом подключаем шрифты через CSS.

Пример - HTML

<head>
    …
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Красивый в меру шрифт</h1>
</body>

Пример - CSS

h1 {
    font-family: 'RocknRoll One', sans-serif;
}

Во втором случае используем медиазапрос.

Пример - HTML

<h1>Красивый в меру шрифт</h1>

Пример - CSS

@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');

h1 {
    font-family: 'RocknRoll One', sans-serif;
}

1.2. Списки

В HTML присутствует 3 типа списков: нумерованные (<ol>), ненумерованные (<ul>) и списки определений (<dl>). Каждый из видов стилизуется при помощи CSS вплоть до создания своих собственных маркеров из рисунков или специальных символов.

Пример - HTML

<ul>
    <li class="square">Квадрат</li>
    <li class="circle">Окружность</li>
    <li class="own">Собственный рисунок</li>
</ul>
<h1>Списки нумерованные</h1>
<ol>
    <li class="decimal-leading-zero">С нулем вначале</li>
    <li class="greek">Греческий</li>
    <li class="japan">Катакана</li>
</ol>

Пример - CSS

.circle {
    list-style-type: circle;
}

.square {
    list-style-type: square;
}

.own {
    list-style-image: url("img/mark.png");
}

.decimal-leading-zero {
    list-style-type: decimal-leading-zero;
}

.greek {
    list-style-type: lower-greek;
}

.japan {
    list-style-type: katakana;
}

Разные стили списков

Помимо списков могут применяться счетчики (counters).

Пример - HTML

<h1>Счетчики</h1>
<ol>
    <li>Элемент</li>
    <li>Элемент</li>
    <li>Элемент
        <ol>
            <li>Внутренний элемент</li>
            <li>Внутренний элемент</li>
        </ol>
    </li>
    <li>Элемент</li>
</ol>

Пример - CSS

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section, ".") "-- ";
}

1.3. Ссылки

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

Пример - HTML

<h1>Ссылки</h1>
<a href="#" class="custom">Украшаем ссылку</a>
<a href="#" class="icon">Ссылка с иконкой</a>
<a href="#" class="button">Ссылка в виде кнопки</a>

Пример - CSS

a {
    outline: none;
    text-decoration: none;
    color: rgb(62, 129, 131);
    display: block;
    margin: 1rem;
}
.custom:hover {
    text-decoration: line-through;
    color: darkcyan;
    font-size: 1.2rem;
}

.icon:hover {
    color: #000;
    text-transform: uppercase;
    text-decoration: underline blueviolet;
}

.icon:hover::before {
    content: url("img/mark.png");
    
}

.button {
    width: 200px;
    height: 40px;
    background-color: gold;
    text-align: center;
    line-height: 2;
    border-radius: 20%;
}

.button:hover {
    background-color: goldenrod;
}

Разные стили ссылок

1.4. Медиафайлы

Стилизация картинок, видео или аудио возможна и при помощи CSS. Для них определяются размеры, внутренние и внешние отступы, границы, способы заполнения доступного пространства.

Пример - HTML

<h1>Изображения</h1>
<div>
    <img src="css/img/mark.png" alt="Иконка">
</div>
<div>
    <img src="css/img/4.jpg" alt="Море">
</div>

Пример - CSS

div {
    width: 300px;
    height: 300px;
    border: darkorange 3px solid;
}
img {
    height: 100%;
    width: 100%;
}

img[alt="Море"] {
    object-fit: cover;
}

img[alt="Иконка"] {
    object-fit: contain;
}

При помощи свойства object-fit можно заставить изображение заполнить доступное пространство максимально эффективно без искажения его размеров.

Заполнение картинками блоков div

1.5. Таблицы

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

Пример - HTML

<h1>Таблицы</h1>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
    </tr>
</table>

Пример - CSS

table {
    width: 80vw;
    background-color: darkseagreen;
    border: darkviolet 1px solid;
}

table tr:first-child {
    background-color: deepskyblue;
}

table tr td:last-child {
    background-color: thistle;
    font-size: 2rem;
    text-align: center;
}

Для первой строки таблицы определен особый цвет фона, а для всех последних ячеек в каждой строчке изменен размер шрифта, цвет фона и выравнивание текста.

Таблица

2

Дебаггинг CSS при помощи инструментов разработчика

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

Пример - HTML

<h1>Статьи по разработке</h1>
<article>
    <header>Дебажим CSS</header>
    <main>
        Используем браузер Chrome.
        <span>Зададим высоту блоку в 300 пикселей</span>
    </main>
    <footer>Ссылки на материал обязательны</footer>
</article>

Пример - CSS

span {
    height: 300px;
}

Блок span с заданной высотой 300px

Но почему не работает? Зайдем в раздел Computed. Тут мы видим не только присвоенные разработчиком атрибуты, но и те, которые браузер сам определил на основании настроек или предков блока.

Бросается в глаза свойство display: inline. Другими словами, даже если мы забыли, что какой-то элемент сайта отображается как строка (для которой задавать высоту или ширину бесполезно), в панели разработчика это легко выяснить.

К блоку span не применилась высота, потому он - строчный

Сделаем наш элемент span блочным - применим свойство display: block.

Элемент span теперь блочный - высота 300px

Хоть пример и примитивен, но показывает, насколько проще можно исследовать и править стили в браузере, чем с помощью ковыряния в бесконечном полотне CSS-файла. В реальной верстке у вас может быть несколько файлов CSS, множество документов HTML, в которых легко «закопаться». Инструменты разработчика позволяют облегчить модификацию стилей, а также посмотреть, из какого конкретного файла они присвоены.

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

3

Стили написания кода

Разрабатывая даже небольшой проект в одиночку, не стоит забывать о Style Guide. Хоть может показаться, что вам все понятно и вы легко «читаете» написанное, через какое-то время неструктурированные CSS-документы начнут вызывать головную боль. А в случаях занятости масштабными проектами индивидуальность вовсе не приветствуется. Хотелось бы лично вам разбираться в чужом коде, написанном сплошным неструктурированным набором без какой-то единой стилизации?

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

Рекомендуется придерживаться следующих правил:

3.1. Минимизируйте использование препроцессоров

Для упрощения разработки в CSS придуманы так называемые препроцессоры (Sass, Less, SCSS). Они превращают описание свойств стилей чуть ли не в отдельный язык программирования, существенно ускоряя процесс верстки. Если все участники команды знакомы с этим инструментом, им можно и нужно пользоваться.

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

Пример – Sass

$fonts: Roboto, sans-serif
$main-color: #333

body
  font: 100% $fonts
  color: $main-color

Пример – CSS

body {
    font: 100% Roboto, sans-serif;
    color: #2ff3aa;
}

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

Вывод
Препроцессоры не запрещены, но актуальны только там, где имеют место быть опытные разработчики, понимающие их синтаксис.

3.2. Аккуратнее с CSS-методологиями

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

Для начала необходимо договориться и достичь единого уровня понимания методологии, а уже потом внедрять ее в разработку. Наиболее известными являются следующие подходы:
1) BEM,
2) OOCSS,
3) Atomic,
4) SMACSS.

Пройдемся по каждому пункту подробнее:

1) BEM (Block Element Modifier)
Является соглашением по именованию. А это важная проблема в любом языке программирования. Имя класса или идентификатора можно задать случайным набором символов (тогда никто не увидит его логику) или осмысленно (что упростит понимание).

Приведем пример:
– navbuttonactive
– NavButtonActive
– nav-button-active

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

Именно для этого в методологии BEM введены эти 3 категории:

– блок (независимая автономная сущность)

Это некие базовые единицы сайта (меню, заголовки, шапка и т.п.). Они состоят из одного или нескольких слов (через дефис), задающих имя класса.

Типичные примеры именования:
class= "navigation"
class= "main-page-article"

– элемент (семантически привязаны к отдельным блокам и не имеют независимого состояния в качестве понятной единицы HTML-документа)
Присвоение имени осуществляется через класс с указанием имени блока, а через 2 нижних подчеркивания – названия элемента.

Пример

class= "article__header"

Здесь сразу понятно, что мы обращаемся к заголовкам статей.

– модификатор (конкретные состояния блоков или модификаторов в зависимости от ситуации)
Имена задаются начиная с двух дефисов после названия блока или элемента.

Пример

class= "nav__button--active"

Тут мы обращаемся к активной кнопке навигационного меню сайта.

2) SMACSS (масштабируемая и модульная архитектура для правил каскадных таблиц стилей)

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

Основатели технологии предлагают следующую структуру CSS-документа:

– базовые правила (связаны с сайтом в целом). Тут прописывают слили для главных блоков страницы: тела, кнопок, списков и т.п.

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

– стили модулей (массивные блоки, встречающиеся в нескольких экземплярах). Они включают: отдельные статьи, оформление рисунков и т.п.

– правила состояния (в зависимости от состояния объекта его поведение может меняться: при наведении мышью, выделении, фокусировке и др.).

– оформление (украшательства, способные меняться со временем). Например, новогодняя тема, юбилей сайта и прочее.

Таким образом, применение методологий значительно упрощает работу с кодом, но требует определенной подготовки.

3.3. Используйте гибкие, относительные единицы

Одних только разрешений мониторов сегодня несколько десятков, не говоря о типах устройств, которые могут выходить в Интернет. Чтобы под каждый случай подобрать оформление сайта (особенно размеры блоков) может потребоваться уйма времени. Куда проще применять относительные или процентные значения по мере возможностей.

Пример – CSS

p {
    font-size: 12 px;
}

p {
    font-size: 1.3rem;
}

Размер шрифта в первом параграфе задан абсолютным значением (и на больших разрешениях прочитать его будет не просто), а вот второй вариант более гибок (шрифт будет подстраиваться под базовые настройки пользователя).

3.4. Не перебарщивайте со сбросами стилей

Когда мы помещаем текст в тег <p>, например, то этот блок по умолчанию имеет внешние отступы. Но мы их не задавали. Браузер сам так решил в соответствии со своими настройками. Это может привести к ряду проблем при верстке макета.

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

Николас Галлахер специально для такого случая написал файл сброса CSS-стилей normalize.css, который необходимо подключать к сайту перед собственными стилями. Не стоит забывать, что не всегда может потребоваться «ресетить» настройки браузера. Но если мы уверены, что хотим отслеживать каждый атрибут самостоятельно, то имеем право использовать творение Николаса.

3.5. Планирование до действия

Прежде чем начать заполнять CSS-документ своими стилями, тщательно продумайте структуру макета и стилистику отдельных элементов. Это позволит сократить код и приложить меньше усилий.

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

3.6. Единообразный и наглядный синтаксис

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

Пример – CSS

/*  Вариант 1 */
section {
    font-size: 2em;
    color: red;
    text-align: justify;
}

/*  Вариант 2 */
section {font-size: 2em; color: red; text-align: justify;}

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

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

Пример – CSS

/* Настройки фона главного блока */
/*  Вариант 1 */
div {
    background-color: tomato;
    background-image: linear-gradient(#d66, #549);
    background-repeat: no-repeat;
    background-clip: padding-box;
    background-origin: padding-box;
    background-position-x: center;
    background-position-y: top;
    background-size: 70%;
    background-attachment: fixed;
}

/*  Вариант 2 */
div {
    background: tomato linear-gradient(#d66, #549) no-repeat padding-box padding-box center top / 70% fixed;
}

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

4

Макет CSS

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

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

4.1. Нормальный поток

По мере появления элемента на странице (в соответствии с кодом HTML-файла) отрисовываются и его CSS-свойства. Направление этого процесса следующее: сверху-вниз, слева-направо.

Каждый блочный элемент (независимо от размера) занимает всю ширину строки. Даже если расположить два тега <div> друг за другом с шириной в 100px каждый (при общей ширине родителя в 1200px), они не расположатся на одной строчке, а будут находиться друг под другом.

Строчные элементы не переносятся на новую строку, пока имеют свободное пространство справа, а следуют друг за другом.

Если требуется иное поведение элементов, его можно изменить. Приведем примеры.

Пример - HTML

<h1>Нормальный поток</h1>
<div>
    <article><strong>Статья</strong> номер <i>один</i></article>
    <article>Еще <em>одна</em> статья</article>
</div>

Пример – CSS

article {
    width: 200px;
    height: 130px;
    border: saddlebrown 3px solid;
}

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

Блочный элемент занимает всю ширину строки

4.2. Флоаты (float, обтекание)

Одна из первых попыток реализовать мультиколоночность в макетах (не считая табличного стиля, который сегодня считается устаревшим). Изначально флоаты предназначались для рисунков внутри текста, чтобы он их «огибал» с разных сторон, не оставляя пустого пространства. Могут нарушать нормальный поток.

Пример – HTML

<h1>Флоаты</h1>
<section>
    <article>Я слева</article>
    <article>Я справа</article>
    <article>Я по центру</article>
    <article>Я сам по себе</article>
</section>

Пример – CSS

section {
    border: saddlebrown 3px solid;
}

article {
    height: 100px;
    border: brown 3px dotted;
    margin: 10px;
    padding: 15px;
}
section article:nth-child(1) {
    float: left;
}

section article:nth-child(2) {
    float: right;
}

section article:nth-child(4) {
    clear: both;
}

Если элементу задать левое обтекание, то сам он расположиться в левом краю, тогда как последующие элементы станут обтекать его справа (и наоборот).

Мультиколоночный макет

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

4.3. Флексбоксы (flexbox)

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

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

При взаимодействии с флексбоксами необходимо усвоить терминологию:
– есть главная и перпендикулярная ей оси (направление главной оси определяется свойством flex-direction);
– flex-контейнер – родитель flex-элементов, на которые распространяются свойства гибкости.

Опишем свойства флексбоксов:

Пример - HTML

<h1>Флексбоксы</h1>
<section>
    <article>Учимся программировать</article>
    <article>Сила флексбоксов</article>
    <article>Как растянуть элементы на всю ширину экрана</article>
    <article>В разработке...</article>
</section>

Пример – CSS

section {
    border: saddlebrown 3px solid;
    width: 90vw;
    height: 70vh;
    background-color: burlywood;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row-reverse;

}

article {
    height: 30%;
    width: 15%;
    border: brown 3px dotted;
    margin: 10px;
    padding: 15px;
}

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

Расположение блоков в режиме Flexbox

4.4. Позиционирование

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

Свойство position отвечает за данную методику. Возможные значения:

Пример - HTML

<h1>Позиционирование</h1>
<section>
    <article>Абсолютный</article>
    <article>Фиксация</article>
    <article>Прокрутка</article>
</section>

Пример – CSS

section {
    border: saddlebrown 3px solid;
    width: 60vw;
    height: 170vh;
    background-color: burlywood;
    position: relative;
}

article {
    height: 200px;
    width: 200px;
    border: brown 3px dotted;
    margin: 10px;
    padding: 15px;
}

section article:nth-child(1) {
    position: absolute;
    top: 55px;
    right: 40px;
    background-color: forestgreen;
}

section article:nth-child(2) {
    position: fixed;
    top: 55px;
    right: 20px;
    background-color:lavenderblush;
}


section article:nth-child(3) {
    position: sticky;
    top: 45px;
    background-color:rgb(191, 176, 231);
}

Блоки с разным позиционированием: absolute, fixed и sticky

4.5. Сетка (Grid)

Сетки подразумевают представление макета страницы в виде набора колонок и рядов. Методика активно используется во фреймворке Bootstrap.

Сеточная структура предполагает наличие 3 категорий понятий:
1) колонка (column),
2) ряд (row),
3) желоб (gutter).

Чтобы превратить потомков элемента в представителей сеток нужно задать следующее свойство: display: grid.

Основные свойства и функции, применимые к гридам:

Пример - HTML

<h1>Система сеток</h1>
<div>
    <section>Один большой</section>
    <section>Малый</section>
    <section>Малый</section>
    <section>Малый</section>
</div>

Пример – CSS

div {
    border: saddlebrown 3px solid;
    width: 90vw;
    height: 70vh;
    background-color: burlywood;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 130px;
    grid-column-gap: 1%;
    grid-row-gap: 1rem;
}

section {
    background-color: lightslategrey;
    border: rgb(48, 33, 48) 1px solid;
    padding: 10px;
}

div section:first-child {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

Расположение блоков в режиме Grid

4.6. Мультиколоночность

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

Основные применяемые свойства:
– column-count – задает количество колонок;
– column-width – ширина колонки по умолчанию;
– column-gap – расстояние между столбцами;
– column-rule – линейка между столбцами;
– column-span – растягивает элемент на всю ширину столбцов, разрывая их.

Пример - HTML

<h1>Мультиколонки</h1>
<section>
    <article>На всю ширину</article>
    <article>Имеется спорная точка зрения, гласящая примерно следующее: 
        тщательные исследования конкурентов, которые представляют собой яркий пример 
        континентально-европейского типа политической культуры, будут смешаны с не 
        уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их 
        статус бесполезности. Безусловно, консультация с широким активом представляет собой 
        интересный эксперимент проверки новых предложений. Каждый из нас понимает очевидную 
        вещь: перспективное планирование предопределяет высокую востребованность новых 
        принципов формирования материально-технической и кадровой базы.
    </article> 
</section>

Пример – CSS

section {
    border: saddlebrown 1px solid;
    width: 90vw;
    background-color: burlywood;
    column-count: 5;
    column-width: 100px;
    column-gap: 1rem;

}

article {
    background-color: lightslategrey;
    border: rgb(48, 33, 48) 1px solid;
    padding: 10px;
}

section article:first-child {
    column-span: all;
    text-align: center;
    background-color: mediumaquamarine;
}

5-ти колоночный макет

4.7. Адаптивный дизайн

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

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

Пример - HTML

<h1>Тестируем разрешения</h1>
<section>
</section>

Пример – CSS

section {
    width: 90vw;
    height: 50vh;
}

@media screen and (min-width: 200px) {
    section {
        background-color: burlywood;
    }
}

@media screen and (min-width: 700px) {
    section {
        background-color:mediumaquamarine;
    }
}

@media screen and (min-width: 1500px) {
    section {
        background-color:olivedrab;
    }
}

По ходу изменения размеров активной области монитора будет меняться цвет фона у тега <section>.

Коричневый цвет фона при разрешении > 200px, но меньше 700px

Фон становится при разрешении > 700px, но < 1500px

Дальнейшие шаги
Совершенствование навыков верстки требует постоянной практики. Лучше всего ее получить тренировками: берете любой понравившийся вам сайт и стараетесь повторить его макет, не заглядывая в инструменты разработчика.

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

ПРАКТИЧЕСКИЙ БЛОК

1

Вопросы

2

Задачи

Задача 1

При помощи HTML и CSS создайте список следующей структуры:
c. Элемент
d. Элемент
e. Элемент
== Подэлемент
== Подэлемент
== Подэлемент
f. Элемент
g. Элемент
I. Подэлемент
II. Подэлемент
III. Подэлемент
h. Элемент

Задача 2

Создайте сеточный макет, имеющий структуру, продемонстрированную на картинке ниже.

3

Решения

Задача 1

Имеем 6 элементов на верхнем уровне нумерованного списка, в пункте е находится ненумерованный список, а в пункте g – нумерованный список.

Решение - HTML

<ol start="3">
    <li>Элемент</li>
    <li>Элемент</li>
    <li>Элемент
        <ul>
            <li>Подэлемент</li>
            <li>Подэлемент</li>
            <li>Подэлемент</li>
        </ul>
    </li>
    <li>Элемент</li>
    <li>Элемент
        <ol>
            <li>Подэлемент</li>
            <li>Подэлемент</li>
            <li>Подэлемент</li>
        </ol>
    </li>
    <li>Элемент</li>
</ol>

Решение - CSS

ol {
    list-style-type: lower-latin;
    list-style-position: inside;
}

ul {
    list-style-type: "== ";
    list-style-position: inside;
}

li ol {
    list-style-type: upper-roman;
}

Задача 2

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

Решение - HTML

<div>
    <section> 1</section>
    <section> 2</section>
    <section> 3</section>
    <section> 4</section>
    <section> 5</section>
    <section> 6</section>
    <section> 7</section>
    <section> 8</section>
</div>

Решение - CSS

div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-auto-rows: 400px;
    font-size: 2rem;
}
section {
    background-color: rgb(255, 148, 41);
    min-height: 15vh;
    padding: 10px;
    text-align: center;
}

div section:first-child { grid-area: 1 / 1 / 2 / 3; }
div section:nth-child(2) { grid-area: 1 / 3 / 3 / 4; }
div section:nth-child(3) { grid-area: 1 / 4 / 2 / 6; }
div section:nth-child(4) { grid-area: 2 / 4 / 3 / 6; }
div section:nth-child(5) { grid-area: 2 / 1 / 3 / 3; }
div section:nth-child(6) { grid-area: 3 / 1 / 4 / 2; }
div section:nth-child(7) { grid-area: 3 / 2 / 4 / 5; }
div section:last-child { grid-area: 3 / 5 / 4 / 6; }