🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

между важными местами

Shift

между
разворотами

Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова

2021

Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова

2021

удк 004.42

ббк З973.42

П52

Василий Половнёв, Игорь Петров

П52

ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—

М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

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

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

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

body {
  font-size: 20px;
  /* Высота строки посчитается от кегля:
     20px * 1.25 = 25px */
  line-height: 1.25;
}

.sidenote {
  /* Кегль посчитается от кегля родителя:
     20px * 0.75 = 15px */
  font-size: .75em;
  /* Высота строки посчитается от кегля элемента:
     15px * 1.2 = 18px */
  line-height: 120%;
}

Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля

Кегль и интерлиньяж

В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными — px, pt, in, cm, или относительными — %, em, rem:

body {
  font-size: 20px;
  /* Высота строки посчитается от кегля:
     20px * 1.25 = 25px */
  line-height: 1.25;
}

.sidenote {
  /* Кегль посчитается от кегля родителя:
     20px * 0.75 = 15px */
  font-size: .75em;
  /* Высота строки посчитается от кегля элемента:
     15px * 1.2 = 18px */
  line-height: 120%;
}

Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать

Обычно кегль основного текста задают на самом высоком уровне в :root или body, а для остальных текстовых элементов используют rem или em:

/* :root — хитрый селектор, указывающий на корневой, самый высокий, элемент документа. По сути, :root идентичен <html> */
:root {
  font-size: 18px;
  /* Высота строки посчитается от кегля:
     18px * 1.25 = 22.5px */
  line-height: 1.25
}

h1 {
  /* Кегль посчитается от кегля в :root:
     18px * 2.666 = 48px */
  font-size: 2.666rem;
  /* Высота строки посчитается от кегля:
     48px * 1 = 48px */
  line-height: 1;
}

h2 {
  /* Кегль посчитается от кегля в :root:
     18px * 1.722 = 31px */
  font-size: 1.722rem;
  /* Высота строки посчитается от кегля:
     41px * 0.935 = 38px */
  line-height: .935;
}

h3 {
  font-size: 1rem;
  /* Высота строки унаследуется от :root */
  line-height: inherit;
}

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

Текстовая страница

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

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

Подзаголовки

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

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

Заголовки третьего уровня

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

Текстовая страница

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

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

Подзаголовки

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

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

Заголовки третьего уровня

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

Обычно кегль основного текста задают на самом высоком уровне в :root или body, а для остальных текстовых элементов используют rem или em:

/* :root — хитрый селектор, указывающий на корневой, самый высокий, элемент документа. По сути, :root идентичен <html> */
:root {
  font-size: 18px;
  /* Высота строки посчитается от кегля:
     18px * 1.25 = 22.5px */
  line-height: 1.25
}

h1 {
  /* Кегль посчитается от кегля в :root:
     18px * 2.666 = 48px */
  font-size: 2.666rem;
  /* Высота строки посчитается от кегля:
     48px * 1 = 48px */
  line-height: 1;
}

h2 {
  /* Кегль посчитается от кегля в :root:
     18px * 1.722 = 31px */
  font-size: 1.722rem;
  /* Высота строки посчитается от кегля:
     41px * 0.935 = 38px */
  line-height: .935;
}

h3 {
  font-size: 1rem;
  /* Высота строки унаследуется от :root */
  line-height: inherit;
}

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

Лайфхак: em или rem?

И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:

20px

1.2em
20px×1.224px

0.625em 24px×0.62515px

0.8em
15px×0.812px

20px

1.2rem
20px×1.224px

0.625rem
20px×0.62512.5px

0.8rem
20px×0.816px

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

При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.

Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em

См. также:

Лайфхак: em или rem?

И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:

20px

1.2em
20px×1.224px

0.625em 24px×0.62515px

0.8em
15px×0.812px

20px

1.2rem
20px×1.224px

0.625rem
20px×0.62512.5px

0.8rem
20px×0.816px

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

При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.

Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em

См. также:

Вертикальный ритм

Кегль и интерлиньяж задают вертикальный ритм в тексте. Также на него влияют отступы вокруг текстовых элементов.

Обновим отступы поста в блоге, используя рекомендации по вёрстке текстовой страницы из книги «Типографика и вёрстка».

Текстовая страница

Начнём с разметки:

<!-- article — стандартный тег, задающий самостоятельное содержимое страницы, которое можно использовать отдельно: новость, статью или пост в блоге -->
<article>
  <h1>Основной текст</h1>
  <p>Колонка…</p>

  <p>Текст в основной колонке…</p>

  <p>Текст, выровненный влево…</p>

  <p>Текст дробится на абзацы…</p>
</article>

Зададим шрифты, кегль и интерлиньяж основного текста:

:root {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em; /* 16px по умолчанию */
  line-height: 1.3em;
}

h1,
h2 {
  font-family: Georgia, Times, Times New Roman, serif;
}

Сбросим отступы по умолчанию и ограничим ширину текстовой колонки:

:root {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.3em;
}

h1,
h2 {
  font-family: Georgia, Times, Times New Roman, serif;
}

h1,
h2,
h3,
p {
  margin: 0;
}

article {
  max-width: 70%;
}

Настроим межабзацный отступ:

article {
  max-width: 70%;
}

/* Селектор * + p выделяет абзацы, идущие после любых элементов */
* + p {
  margin-top: .825rem;
}

И настроим заголовки первого уровня:

article {
  max-width: 70%;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.3em;
  font-weight: bold;
}

h1 + p {
  margin-top: 3rem;
}

* + p {
  margin-top: .825rem;
}

Вертикальный ритм

Кегль и интерлиньяж задают вертикальный ритм в тексте. Также на него влияют отступы вокруг текстовых элементов.

Обновим отступы поста в блоге, используя рекомендации по вёрстке текстовой страницы из книги «Типографика и вёрстка».

Текстовая страница

Начнём с разметки:

<!-- article — стандартный тег, задающий самостоятельное содержимое страницы, которое можно использовать отдельно: новость, статью или пост в блоге -->
<article>
  <h1>Основной текст</h1>
  <p>Колонка…</p>

  <p>Текст в основной колонке…</p>

  <p>Текст, выровненный влево…</p>

  <p>Текст дробится на абзацы…</p>
</article>

Зададим шрифты, кегль и интерлиньяж основного текста:

:root {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em; /* 16px по умолчанию */
  line-height: 1.3em;
}

h1,
h2 {
  font-family: Georgia, Times, Times New Roman, serif;
}

Сбросим отступы по умолчанию и ограничим ширину текстовой колонки:

:root {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.3em;
}

h1,
h2 {
  font-family: Georgia, Times, Times New Roman, serif;
}

h1,
h2,
h3,
p {
  margin: 0;
}

article {
  max-width: 70%;
}

Настроим межабзацный отступ:

article {
  max-width: 70%;
}

/* Селектор * + p выделяет абзацы, идущие после любых элементов */
* + p {
  margin-top: .825rem;
}

И настроим заголовки первого уровня:

article {
  max-width: 70%;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.3em;
  font-weight: bold;
}

h1 + p {
  margin-top: 3rem;
}

* + p {
  margin-top: .825rem;
}

Настроим отступы у подзаголовков. Добавим их в разметку:

<article>
  …
  <p>Основной текст…</p>

  <h2>Подзаголовки</h2>
  <p>Кегль заголовков второго уровня…</p>

  <h3>Заголовки третьего уровня</h3>
  <p>Заголовки третьего уровня…</p>
  <p>Подзаголовки в иерархии…</p>
</article>

Настроим заголовки второго уровня:

h1 + p {
  margin-top: 3rem;
}

h2 {
  font-size: 2rem;
  line-height: 1.3em;
  /* Сделаем подзаголовки нежирными */
  font-weight: normal;
}

* + h2 {
  margin-top: 1.25rem;
}

h2 + p {
  margin-top: .5rem;
}

* + p {
  margin-top: .825rem;
}

И обновим заголовки третьего уровня:

h2 + p {
  margin-top: .5rem;
}

h3 {
  font-size: 1rem;
  line-height: 1.3em;
  font-weight: bold;
}

* + h3 {
  margin-top: 1.75rem;
}

h3 + p {
  margin-top: 0;
}

* + p {
  margin-top: .825rem;
}

Настроим отступы у подзаголовков. Добавим их в разметку:

<article>
  …
  <p>Основной текст…</p>

  <h2>Подзаголовки</h2>
  <p>Кегль заголовков второго уровня…</p>

  <h3>Заголовки третьего уровня</h3>
  <p>Заголовки третьего уровня…</p>
  <p>Подзаголовки в иерархии…</p>
</article>

Настроим заголовки второго уровня:

h1 + p {
  margin-top: 3rem;
}

h2 {
  font-size: 2rem;
  line-height: 1.3em;
  /* Сделаем подзаголовки нежирными */
  font-weight: normal;
}

* + h2 {
  margin-top: 1.25rem;
}

h2 + p {
  margin-top: .5rem;
}

* + p {
  margin-top: .825rem;
}

И обновим заголовки третьего уровня:

h2 + p {
  margin-top: .5rem;
}

h3 {
  font-size: 1rem;
  line-height: 1.3em;
  font-weight: bold;
}

* + h3 {
  margin-top: 1.75rem;
}

h3 + p {
  margin-top: 0;
}

* + p {
  margin-top: .825rem;
}

Скрыто 224 разворота

Скрыто 185 разворотов

ХТМЛ.
Вёрстка сайтов

ХТМЛ.
Вёрстка сайтов

Оглавление

Оглавление

Кегль и интерлиньяж

Кегль и интерлиньяж

Текстовая страница

Подзаголовки

Заголовки третьего уровня

Текстовая страница

Подзаголовки

Заголовки третьего уровня

Лайфхак: em или rem?

Лайфхак: em или rem?

Вертикальный ритм

Вертикальный ритм

ХТМЛ. Вёрстка сайтов

ХТМЛ. Вёрстка сайтов

Оглавление

Оглавление

Кегль и интерлиньяж

Кегль и интерлиньяж

Текстовая страница

Подзаголовки

Заголов­ки тре­тье­го уровня

Текстовая страница

Подзаголовки

Заголов­ки тре­тье­го уровня

Лайфхак: em или rem?

Лайфхак: em или rem?

Вертикальный ритм

Вертикальный ритм

ХТМЛ.
Вёрстка сайтов

ХТМЛ.
Вёрстка сайтов

Заголовки третьего уровня

Заголовки третьего уровня