Глава 8. 5. Инлайн и инлайн-блок

Тег <p>, в который оборачиваются абзацы, согласно актуальной классификации относится к поточным элементам, ведёт себя как блочный: ему можно приписать отступы, эти отступы будут работать по всем осям, «расталкивая» соседние объекты, а отступы будут схлопываться. Содержимое параграфа — текстовое и строчное.

Вложенные в параграф строчные элементы (например, <span>, <em> или <strong>) непривычным образом работают с отступами и границами. Отступы по горизонтали применяются обычным образом, а отступы по вертикали — неожиданным.

Как мы видим, отступы в коде были со всех сторон. Но, пока объект не получил фон, видны только отступы по горизонтали

Вёрстка элемента

<p>Гравитационный парадокс индуцирует неоднозначный позитивизм, открывая <a href="#" class="post-link">новые горизонты</a>. Гений дискредитирует неоднозначный конфликт. Концепция, следовательно, оспособляет язык образов. Закон внешнего мира амбивалентно рефлектирует предмет деятельности.</p>

.post-link {

padding: 10px;

text-decoration: none;

color: #a935f0;

}

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

У ссылки кроме отступов появился полупрозрачный фон, теперь видно, как ведёт себя инлайновый (или строчный) элемент

.post-link {

padding: 30px;

 

text-decoration: none;

color: #a935f0;

 

background-color: #dfc0f1;

}

Таким образом, если мы собираемся стилизовать ссылку с фоном, нужно заранее подумать о том, как она будет вести себя внутри текста. Например, вертикальные отступы не должны быть больше интерлиньяжа.

Это всё ещё инлайновый элемент, но сейчас его особенности не мешают нормальному течению текста, потому что по вертикали объект с отступами и границей не выходит за высоту строки

body {

font-size: 18px;

line-height: 1.8em;

}

 

.post-link {

padding: 3px 4px;

 

text-decoration: none;

color: #a935f0;

 

background-color: #fbf5fe;

border-radius: 6px;

border: 1px solid #a935f0;

}

Способ, превращающий ссылку в блочно-строчный элемент, «расталкивающий» окружение и по вертикали тоже, существует, но он портит интерлиньяж, делает поток текста неравномерным и мешает чтению.

Теперь элемент блочно-строчный, он испортил интерлиньяж и текст плохо выглядит

.post-link {

display: inline-block;

padding: 3px 4px;

 

color: red;

text-decoration: none;

 

background-color: rgb(223, 223, 223, 0.7);

border-radius: 6px;

border: 1px solid #2c2c2c;

}

Похожим образом часто стилизуют код, оформленный как <code>, на сайте Академии так и сделано.

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

Строчный тег с фоном:

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

Перенос с бордерным фоном на нескольких строках:

Перенос фона с границей на другую строку выглядит ещё показательней

Сейчас уже есть свойство, позволяющее замыкать декор при каждом переносе. По умолчанию это box-decoration-break: slice;, и оно, как мы видим, «отрезает» декор в конце строки. А box-decoration-break: clone; соответственно клонирует для обрыва строки то, как строка открывается.

Применили box-decoration-break: clone, выглядит красиво, но визуально разрывает фразу

Это свойство имеет свои особенности поддержки, нужно сверяться с CanIUse.

Из-за того, что блочно-строчное отображение внутри текста портит интерлиньяж, то область применения довольно сильно ограничена: это однострочные элементы или элементы «типа блоков», которые вынесены отдельно от основного контента. Например, это могут быть кнопки, #теги, иконки или элементы, вынесенные на отдельные строки.

Возможная ситуация удачного применения блочно-строчных элементов

Вёрстка элемента

<p class="store">Товары, отмеченные ярлыком <span class="delivery-badge">доставка со склада</span>, будут доставлены в день заказа.</p>

.store {

height: 102px;

font-family: "Arial", sans-serif;

font-style: normal;

font-weight: normal;

font-size: 20px;

line-height: 32px;

text-align: center;

color: #ffffff;

background-color: #31384f;

}

.delivery-badge {

position: relative;

display: inline-block;

width: 80px;

height: 40px;

margin: 30px 0;

padding: 10px 0 0 50px;

font-size: 12px;

font-weight: bold;

line-height: 13px;

text-align: left;

color: #ffffff;

background-color: #ff5e62;

border-radius: 4px;

}

.delivery-badge::before {

content: url("auto.svg");

position: absolute;

width: 33px;

heigth: 12px;

top: 10px;

left: 10px;

font-size: 24px;

line-height: 1em;

}

 

Методика~ 9 минут

Глава 8.6. Заголовки

Как мы помним, заголовок первого уровня <h1> на странице только один, и он обязательно должен быть в наличии. Давайте разберёмся, какие заголовки появляются в новостных материалах и как их верстать.

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

Как правильно использовать заголовки от <h1> до <h6>

если коротко, то заголовки нельзя использовать не по порядку, заголовки <h3> членят на более мелкие разделы текст, озаглавленный <h2>, так, чтобы получалось правильное дерево — от крупных к мелким. Принято, чтобы размер шрифта (кегль) у каждого следующего заголовка уменьшался от <h1> к <h6>.

<h1>Глава «Вёрстка текстового содержимого страниц»</h1> <h2>Заголовки</h2> <h3>Шрифты для заголовков</h3> <h4>Подключение шрифтов</h4>   <h5>Подключение локальных шрифтов</h5>   <h5>Подключение шрифтов с Google Fonts</h5> <h3>Типографика заголовков</h3> <h2>Лиды</h2>…

В общем дерево заголовков должно составить смысловую структуру документа, своего рода оглавление материала. Ридеры и некоторые другие инструменты выводят эту структуру в качестве навигации. Также корректное использование заголовков — это один из признаков валидности вёрстки.

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

Заголовки уровнем ниже четвёртого уровня встречаются редко, и вероятно, дизайнер не спроектирует их в макете.

Если заголовки будут, например, как «Основы HTML и CSS», они точно поместятся в одну строку на любом экране, а заголовок в духе «Основы HTML и CSS. Страх, безнадёжность и проблески здравого смысла в джунглях интернета» вряд ли поместится без переносов даже на десктопе, хотя в нём всего 88 знаков включая пробелы. Так или иначе, заголовки длиной больше 100 знаков считаются слишком крупными для веба. Хороший тон — не выходить за 60 знаков.

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

Типичный заголовок: укрупнённый шрифт, другой цвет

Вёрстка элемента

<article class="article"> <h1 class="article-heading"> Очень длинный, очень содержательный и непростой заголовок с тяжёлой судьбой </h1> <p> Предваряет такую же длинную, содержательную, глубокомысленную статью. </p></article>.article { max-width: 760px;

font-family: "Montserrat", "Arial", sans-serif;

font-style: normal;

}

.article-heading {

font-weight: 800;

font-size: 55px;

line-height: 70px;

color: #302683;

}

.article p {

font-weight: 300;

font-size: 32px;

line-height: 44px;

color: #333333;

}

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

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

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

Однако бывают ситуации, в которых заголовок, лид или подзаголовок и дополнительная информация могут объединяться в отдельную группу, тогда было бы неплохо обернуть их в тег <header>.

Дата, заголовок и лид могут выступить как семантическая группа

Вёрстка элемента

<article class="news"> <img class="news-picture" src="/img/mariinsky-pic.jpg" alt="Мариинский театр, ярусы, овации"> <div class="news-content"> <header class="news-header"> <time datetime="2013-07-12" class="news-date">12.07.2013</time> <h1 class="news-heading">   230 лет Мариинскому театру в Санкт&#8209;Петербурге </h1> <p class="news-leading-paragraph">   В 1783 году «для управления зрелищами и музыкой» утвердили комитет и труппу, ещё через полгода труппа получит сцену. </p> </header> <p> Название «Мариинский» театр получил в честь императрицы Марии Александровны, супруги Александра II. В советское время театр переименовали в честь товарища Кирова, который и в самом деле любил выступать. </p> </div></article>body { font-family: "Roboto", "Arial", sans-serif; font-style: normal; font-weight: 300;}.news { width: 700px; margin: 0 auto;}.news-content { position: relative; padding: 97px 85px; margin-top: 50px; background-color: #ffffff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}.news-date { font-size: 12px; line-height: 16px; color: #d8a727;}.news-heading { font-family: "Oranienbaum", "Arial", serif; font-style: normal; font-weight: normal; font-size: 40px; line-height: 46px; color: #222222; }.news p { font-size: 14px; line-height: 27px; color: #666666; }.news-leading-paragraph { font-size: 24px; line-height: 36px; color: #444444;}.news-picture { position: absolute; top: 0; left: 50%; transform: translate(-50%); max-width: 100%; height: auto;}

Подзаголовки в вебе — скорее редкость. Между печатными и интернет-изданиями лежит пропасть, и никогда не следует делать сайт «как глянцевый журнал»: у них разные принципы вёрстки, разные условия чтения. В журнальной вёрстке можно каждый отдельный материал верстать по-другому, а на сайте у всех материалов обычно единый стиль. Подзаголовки в норме верстаются параграфами (<p>) и стилизуется по классу, чтобы не нарушать семантику тегов и иерархию заголовков.

Категорически не приветствуется оформление подзаголовков тегом заголовка следующего уровня, то есть группы <h1> + <h2> в современной вёрстке материалов — это моветон, а заголовочные группы <hgroup> вовсе не поддерживаются.

<!-- Антипример, притом встречающийся в устаревших спецификациях --><hgroup> <h2>У тебя на голове</h2> <h3>Как выбрать идеальные наушники</h3></hgroup>

В зависимости от назначения и архитектуры страницы подзаголовок может быть размечен как <p>, и они с заголовком могут быть объединены как <header>.

<article> <header> <h1>Смотри, это ты</h1> <p class="header-description">Научиться позировать как будто живой</p> <time datetime="2020-01-20" class="news-date">Опубликовано 20 января 2020</time> </header>

<p class="leading-paragraph">Закончились новогодние праздники, и хочется новые фотосессии, и получаться на фотографиях лучше, чем в прошлом году. Как позировать так, чтобы ваши достоинства были ярче, а недостатков было не заметно?</p>

</article>

Антипаттерн

Котик милый, но по идее речь в материале не о нём, а о книгах для фронтенд-разработчиков, и пользователю должно быть понятно, о чём страница

Скриншот сделан на «подправленной» странице нашего блога. Браузер был развёрнут во весь экран ноутбука. Фон заголовка на этом примере хорошо контрастирует с текстом, это связано с удачной картинкой. Подзаголовок не поместился, и пользователь должен догадываться, что ниже расположен текст. На мобильном устройстве такой хедер займёт скорее всего больше экрана. Кроме того, графические фоны для текстов сложно подбирать, чтобы сохранить читаемость, и ещё сложнее сделать естественными и уместными.

 

 

Методика~ 6 минут