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

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

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

Shift

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

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

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

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

2021

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

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

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

2021

удк 004.42

ббк З973.42

П52

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

П52

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

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

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

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

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

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

<!-- 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;
}

Настроим отступы у списков. Начнём с разметки:

<article>
  …
  <h2>Списки</h2>
  <p>Список, или перечень…</p>

  <p>Первый элемент перечня …</p>

  <p>Элементы списков обозначаются:</p>
  <ul>
    <li>арабскими цифрами с точкой;</li>
    <li>арабскими цифрами или русскими строчными буквами;</li>
    <li>с закрывающей скобкой;</li>
    <li>графическими маркерами или наборными знаками;</li>
    <li>втяжкой.</li>
  </ul>

  <p>Если для чистоты вёрстки…</p>
</article>

Зададим отступы списка и его элементов:

h1,
h2,
h3,
p,
ul, /* Ненумерованный список, unordered list */
ol, /* Нумерованный список, ordered list */
li { /* Элемент списка, list item */
  margin: 0;
}

* + li {
  margin-top: .4rem;
}

И настроим внешний вид списка:

* + li {
  margin-top: .4rem;
}

ul {
  list-style: none outside; /* Прячем буллиты */
  margin-left: 2rem;               /* Добавляем втяжку */
  padding-left: 0;
}

Настроим отступы у списков. Начнём с разметки:

<article>
  …
  <h2>Списки</h2>
  <p>Список, или перечень…</p>

  <p>Первый элемент перечня …</p>

  <p>Элементы списков обозначаются:</p>
  <ul>
    <li>арабскими цифрами с точкой;</li>
    <li>арабскими цифрами или русскими строчными буквами;</li>
    <li>с закрывающей скобкой;</li>
    <li>графическими маркерами или наборными знаками;</li>
    <li>втяжкой.</li>
  </ul>

  <p>Если для чистоты вёрстки…</p>
</article>

Зададим отступы списка и его элементов:

h1,
h2,
h3,
p,
ul, /* Ненумерованный список, unordered list */
ol, /* Нумерованный список, ordered list */
li { /* Элемент списка, list item */
  margin: 0;
}

* + li {
  margin-top: .4rem;
}

И настроим внешний вид списка:

* + li {
  margin-top: .4rem;
}

ul {
  list-style: none outside; /* Прячем буллиты */
  margin-left: 2rem;               /* Добавляем втяжку */
  padding-left: 0;
}

Вот что, в итоге, у нас получилось:

index.html

<article>
  <h1>Основной текст</h1>
  <p>Колонка…</p>

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

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

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

  <h3>Заголовки третьего уровня</h3>
  <p>Заголовки третьего уровня…</p>
  <p>Подзаголовки в иерархии…</p>
  
  <h2>Списки</h2>
  <p>Список, или перечень…</p>

  <p>Первый элемент перечня …</p>

  <p>Элементы списков обозначаются:</p>
  <ul>
    <li>арабскими цифрами с точкой;</li>
    <li>арабскими цифрами или русскими строчными буквами;</li>
    <li>с закрывающей скобкой;</li>
    <li>графическими маркерами или наборными знаками;</li>
    <li>втяжкой.</li>
  </ul>

  <p>Если для чистоты вёрстки…</p>
</article>

style.css

: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,
ul,
ol,
li {
  margin: 0;
}

article {
  max-width: 70%;
}

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

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;
}

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

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

h3 + p {
  margin-top: 0;
}

ul {
  list-style: none outside;
  margin-left: 2rem;
  padding-left: 0;
}

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

* + li {
  margin-top: .4rem;
}

Основной текст

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

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

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

Текст дробится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этой главе. В канонической швейцарской сетке, привязанной к базовым линиям, отступ между абзацами строго равен одной строке, поэтому его иногда называют «слепой строкой». На «бесконечной» экранной странице эта условность не имеет смысла, поэтому межабзацный отступ часто уменьшают до половины строки или даже сильнее.

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

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

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

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

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

Списки

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

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

Элементы списков обозначаются:

арабскими цифрами с точкой;
арабскими цифрами или русскими строчными буквами;
с закрывающей скобкой;
графическими маркерами или наборными знаками;
втяжкой.

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

Вот что, в итоге, у нас получилось:

index.html

<article>
  <h1>Основной текст</h1>
  <p>Колонка…</p>

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

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

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

  <h3>Заголовки третьего уровня</h3>
  <p>Заголовки третьего уровня…</p>
  <p>Подзаголовки в иерархии…</p>
  
  <h2>Списки</h2>
  <p>Список, или перечень…</p>

  <p>Первый элемент перечня …</p>

  <p>Элементы списков обозначаются:</p>
  <ul>
    <li>арабскими цифрами с точкой;</li>
    <li>арабскими цифрами или русскими строчными буквами;</li>
    <li>с закрывающей скобкой;</li>
    <li>графическими маркерами или наборными знаками;</li>
    <li>втяжкой.</li>
  </ul>

  <p>Если для чистоты вёрстки…</p>
</article>

style.css

: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,
ul,
ol,
li {
  margin: 0;
}

article {
  max-width: 70%;
}

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

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;
}

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

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

h3 + p {
  margin-top: 0;
}

ul {
  list-style: none outside;
  margin-left: 2rem;
  padding-left: 0;
}

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

* + li {
  margin-top: .4rem;
}

Основной текст

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

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

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

Текст дробится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этой главе. В канонической швейцарской сетке, привязанной к базовым линиям, отступ между абзацами строго равен одной строке, поэтому его иногда называют «слепой строкой». На «бесконечной» экранной странице эта условность не имеет смысла, поэтому межабзацный отступ часто уменьшают до половины строки или даже сильнее.

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

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

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

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

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

Списки

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

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

Элементы списков обозначаются:

арабскими цифрами с точкой;
арабскими цифрами или русскими строчными буквами;
с закрывающей скобкой;
графическими маркерами или наборными знаками;
втяжкой.

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

Выключка

Выключка задаётся свойством text-align с ключевыми словами left (левый флаг), center (по центру), right (правый флаг) и justify (по формату).