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

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

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

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

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

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

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

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

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

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

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

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

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 114 разворотов
Пер­вая колонка
Вто­рая колонка
Тре­тья колонка
Чет­вёр­тая колонка
Пер­вая колонка
Вто­рая колонка
Пер­вая колонка
Вто­рая колонка
Тре­тья колонка
Чет­вёр­тая колонка
Пятая колонка

flex-grow: 1 удобно исполь­зо­вать для созда­ния адап­тив­ных коло­нок, рав­но­мерно деля­щих доступ­ное пространство:

.cols {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 18px;
}

.cols > * {
  flex-grow: 1;
  flex-basis: 0;
}
<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Четвёртая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Пятая колонка</div>
</div>
Первая колонка
Вторая колонка
Третья колонка
Чет­вёр­тая колонка
Первая колонка
Вторая колонка
Первая колонка
Вторая колонка
Третья колонка
Чет­вёр­тая колонка
Пятая колонка

flex-grow: 1 удобно использовать для создания адаптивных колонок, равномерно делящих доступное пространство:

.cols {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 18px;
}

.cols > * {
  flex-grow: 1;
  flex-basis: 0;
}
<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Четвёртая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
</div>

<div class="cols">
  <div>Первая колонка</div>
  …
  <div>Пятая колонка</div>
</div>

Чтобы управ­лять поряд­ком отдель­ных эле­мен­тов во флекс‑кон­тей­нере, исполь­зуют свой­ство order. По умол­ча­нию его зна­че­ние равно 0. Соот­вет­ственно, эле­менты с order: 1 ста­нут в конце глав­ной оси, а эле­менты с order: -1 — в начале.

Возь­мём адап­тив­ные колонки из преды­ду­щего примера:

.cols {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 18px;
}

.cols > * {
  flex-grow: 1;
  flex-basis: 0;
}

Пере­ста­вим вто­рую колонку в начало и дадим ей вдвое больше места:

.cols > *:nth-child(2) {
  order: -1;
  flex-grow: 2;
}

Чаще всего order исполь­зуют для адап­та­ции в мобиль­ной вер­сии. Ска­жем, если в двух колон­ках идёт текст, опи­сы­ва­ю­щий иллю­стра­цию, а в послед­ней колонке сама иллю­стра­ция, то в мобиль­ной вер­сии стоит пере­ста­вить изоб­ра­же­ние в начало с помо­щью order: -1

Пер­вая
колонка
Вто­рая
колонка
Тре­тья
колонка
Чет­вёр­тая
колонка
Пер­вая
колонка
Вто­рая
колонка
Тре­тья
колонка
Чет­вёр­тая
колонка
Первая
колонка
Вторая
колонка
Третья
колонка
Четвёртая
колонка
Первая
колонка
Вторая
колонка
Третья
колонка
Четвёртая
колонка

Чтобы управлять порядком отдельных элементов во флекс‑контейнере, используют свойство order. По умолчанию его значение равно 0. Соответственно, элементы с order: 1 станут в конце главной оси, а элементы с order: -1 — в начале.

Возьмём адаптивные колонки из предыдущего примера:

.cols {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 18px;
}

.cols > * {
  flex-grow: 1;
  flex-basis: 0;
}

Переставим вторую колонку в начало и дадим ей вдвое больше места:

.cols > *:nth-child(2) {
  order: -1;
  flex-grow: 2;
}

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

flex‑basis: 400px
flex‑basis: 400px

Два элемента с flex‑basis: 400px вмещаются в контейнер шириной 900 пк

flex‑basis: 600px; flex‑shrink: 0
flex‑basis: 600px; flex‑shrink: 0

Два элемента с flex‑basis: 600px и flex‑shrink: 0 не вмещаются в контейнер

flex‑basis: 600px; flex‑shrink: 0
flex‑basis: 600px; flex‑shrink: 1

Первый элемент занимает 600 пк, а второй уменьшается, чтобы вместиться в контейнер

flex‑basis: 600px; flex‑shrink: 2
flex‑basis: 600px; flex‑shrink: 1

Первый элемент уменьшается в два раза быстрее второго

flex‑shrink

Свой­ство flex-shrink задаёт коэф­фи­ци­ент, опре­де­ля­ю­щий, какую долю недо­ста­ю­щего места отдаст эле­мент. flex-shrink исполь­зуют, чтобы обо­зна­чить, какие эле­менты умень­ша­ются, какие нет и с какой ско­ро­стью. Пред­по­ло­жим, что в кон­тей­нере с двумя эле­мен­тами у пер­вого эле­мента задан flex-shrink: 2, а у вто­рого — flex-shrink: 1. Тогда пер­вый эле­мент осво­бо­дит в два раза больше места для остав­шихся эле­мен­тов, чем второй.

flex-shrink зада­ётся без­раз­мер­ными поло­жи­тель­ными чис­лами. Зна­че­ние по умол­ча­нию равно 1 — если места не хва­тит, эле­менты умень­шатся равномерно.

Пример четырёхколоночной сетки на флексбоксе 

flex‑shrink

Свойство flex-shrink задаёт коэффициент, определяющий, какую долю недостающего места отдаст элемент. flex-shrink используют, чтобы обозначить, какие элементы уменьшаются, какие нет и с какой скоростью. Предположим, что в контейнере с двумя элементами у первого элемента задан flex-shrink: 2, а у второго — flex-shrink: 1. Тогда первый элемент освободит в два раза больше места для оставшихся элементов, чем второй.

flex-shrink задаётся безразмерными положительными числами. Значение по умолчанию равно 1 — если места не хватит, элементы уменьшатся равномерно.

flex‑basis: 100px
flex‑basis: 100px

Два элемента с flex‑basis: 100px вмещаются в контейнер шириной 345 пк

flex‑basis: 200px; flex‑shrink: 0
flex‑basis: 200px; flex‑shrink: 0

Два элемента с flex‑basis: 200px и flex‑shrink: 0 не вмещаются в контейнер

flex‑basis: 200px; flex‑shrink: 0
flex‑basis: 200px; flex‑shrink: 1

Первый элемент занимает 200 пк, а второй уменьшается, чтобы вместиться в контейнер

flex‑basis: 200px; flex‑shrink: 2
flex‑basis: 200px; flex‑shrink: 1

Первый элемент уменьшается в два раза быстрее второго

Пример четырёхколоночной сетки на флексбоксе 

Песочница

Поэкс­пе­ри­мен­ти­руйте со свой­ствами флексбокса.

flex‑direction

Направ­ле­ние глав­ной оси

align‑items

Вырав­ни­ва­ние по попе­реч­ной оси

justify‑content

Вырав­ни­ва­ние по глав­ной оси

ЦСС

Примеры

Результат

1
2
3
4

Результат

1
2
3
4

ЦСС

Песочница

Поэкспериментируйте со свойствами флексбокса.

flex‑direction

Направление главной оси

align‑items

Выравнивание по поперечной оси

justify‑content

Выравнивание по главной оси

Примеры

Тест

Выберите верные утверждения о раскладке элементов с помощью position.

absolute располагает элемент по заданным координатам относительно ближайшего родителя с position: relative или относительно body, если родителей с position: relative нет
fixed располагает элемент над страницей, элемент зависает над ней в указанных координатах
static создаёт контекст, в котором будут абсолютно позиционироваться другие элементы
sticky значение по умолчанию, элементы просто выстраиваются друг под другом

Элементы с position: absolute и fixed перестают занимать место в потоке элементов и переносятся в указанные координаты. При этом элемент с position: absolute прокручивается вместе со страницей, а элемент с position: fixed висит над ней

Что в этой книге считается ключевой идеей раскладки флексбоксами?

Управление выравниванием элементов через комментарии разработчикам
Флексбокс фиксирует бюджет и срок сдачи вёрстки, оставляя гибким функционал
Введение главной и поперечной осей, по которым раскладываются флекс‑элементы
Автоматическая раскладка элементов «кирпичной кладкой», как в Пинтересе
Флекс‑элементы перестают занимать место и перемещаются к заданным координатам
Введение направляющих и ячеек, в которые будет раскладываться содержимое
Разработчики придумали флексбоксы чтобы «флексить» — хвастаться своей вёрсткой перед другими

Флексбокс заставляет вложенные элементы раскладываться и выравниваться по двум осям: главной и поперечной

Каким свойством включается раскладка флексбоксами внутри элемента?

flex: 1
flex: on
flexbox: true
display: flex
display: flexbox
visibility: flex
align-items: flex

display: flex включит раскладку флексбоксами. Элемент станет флекс‑контейнером, а вложенные в него элементы — флекс‑элементами

Выберите верные утверждения о назначении ЦСС‑свойств.

flex-direction управляет направлением главной оси
flex-direction управляет направлением поперечной оси
justify-content управляет расположением элементов на поперечной оси
justify-content управляет расположением элементов на главной оси
align-items управляет высотой элементов
align-items управляет расположением элементов на поперечной оси
align-items управляет расположением элементов на главной оси

flex‑direction задаёт направление главной оси. justify‑content задаёт выравнивание по главной оси, а align‑items — по поперечной

Какое свойство задаёт выравнивание флекс‑элементам по отдельности на поперечной оси?

align-self
justify-content
self-align
element-position
list-style-position

align‑self отвечает за расположение отдельного элемент на поперечной оси

Что по умолчанию происходит с элементами, не вмещающимися во флекс‑контейнер?

Исчезают вместе с контейнером
Переносятся на следующую строку
Переполняют контейнер
Вызывают ошибку в браузере с просьбой отправить баг‑репорт разработчикам
Переносятся в следующий флекс‑контейнер на странице

По умолчанию флекс‑контейнер однострочный: не вмещающиеся элементы переполняют его

За что отвечает свойство align-content?

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

align‑content управляет выравниванием строк в многострочных флекс‑контейнерах

Какими из этих свойств можно задать отступы между флекс‑элементами?

flex-distance
margin
gap
flex-wrap
list-style-position

Свойство margin задаёт внешние отступы любых элементов, а gap управляет отступами элементов внутри флекс‑контейнера

Выберите верные утверждения о назначении ЦСС‑свойств.

flex-basis рекомендует идеальный или предположительный размер элемента по главной оси
flex-basis включает раскладку флексбоксами
flex-basis управляет выравниванием отдельного взятого элемента на главной оси
flex-grow задаёт коэффициент, определяющий, какую долю свободного места в контейнере получит элемент
Совокупность flex-grow флекс‑элементов задаёт пропорцию, в которой они поделят свободное пространство
flex-grow указывает направление, в котором должен увеличиваться элемент
flex-shrink выключает раскладку флексбоксами
flex-shrink сужает флекс‑контейнер, «отжимая» воздух внутри
flex-shrink задаёт коэффициент, определяющий, насколько сильно уменьшится элемент, если в контейнере не хватит места
flex-shrink приказывает элементу исчезнуть из контейнера, если другим элементам понадобится больше места

flex-basis определяет начальный, идеальный размер элемента. Если в контейнере останется свободное место, flex-grow определит, какую его долю получит элемент. Если места не хватит, flex-shrink определит, как сильно элемент уменьшится, чтобы всё вместилось в контейнер

Для чего используют свойство order?

Чтобы призвать все элементы страницы к порядку
Для указания порядка, в котором браузер должен применять стили
Чтобы управлять порядком отдельных флекс‑элементов
Для указания номера заказа в CRM, связанного с элементом
Чтобы приказать флекс‑элементам вырасти в указанном направлении

order управляет порядком отдельных флекс‑элементов

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Выберите верные утверждения о раскладке элементов с помощью position.

absolute располагает элемент по заданным координатам относительно ближайшего родителя с position: relative или относительно body, если родителей с position: relative нет
fixed располагает элемент над страницей, элемент зависает над ней в указанных координатах
static создаёт контекст, в котором будут абсолютно позиционироваться другие элементы
sticky значение по умолчанию, элементы просто выстраиваются друг под другом

Элементы с position: absolute и fixed перестают занимать место в потоке элементов и переносятся в указанные координаты. При этом элемент с position: absolute прокручивается вместе со страницей, а элемент с position: fixed висит над ней

Что в этой книге считается ключевой идеей раскладки флексбоксами?

Управление выравниванием элементов через комментарии разработчикам
Флексбокс фиксирует бюджет и срок сдачи вёрстки, оставляя гибким функционал
Введение главной и поперечной осей, по которым раскладываются флекс‑элементы
Автоматическая раскладка элементов «кирпичной кладкой», как в Пинтересе
Флекс‑элементы перестают занимать место и перемещаются к заданным координатам
Введение направляющих и ячеек, в которые будет раскладываться содержимое
Разработчики придумали флексбоксы чтобы «флексить» — хвастаться своей вёрсткой перед другими

Флексбокс заставляет вложенные элементы раскладываться и выравниваться по двум осям: главной и поперечной

Каким свойством включается раскладка флексбоксами внутри элемента?

flex: 1
flex: on
flexbox: true
display: flex
display: flexbox
visibility: flex
align-items: flex

display: flex включит раскладку флексбоксами. Элемент станет флекс‑контейнером, а вложенные в него элементы — флекс‑элементами

Выберите верные утверждения о назначении ЦСС‑свойств.

flex-direction управляет направлением главной оси
flex-direction управляет направлением поперечной оси
justify-content управляет расположением элементов на поперечной оси
justify-content управляет расположением элементов на главной оси
align-items управляет высотой элементов
align-items управляет расположением элементов на поперечной оси
align-items управляет расположением элементов на главной оси

flex‑direction задаёт направление главной оси. justify‑content задаёт выравнивание по главной оси, а align‑items — по поперечной

Какое свойство задаёт выравнивание флекс‑элементам по отдельности на поперечной оси?

align-self
justify-content
self-align
element-position
list-style-position

align‑self отвечает за расположение отдельного элемент на поперечной оси

Что по умолчанию происходит с элементами, не вмещающимися во флекс‑контейнер?

Исчезают вместе с контейнером
Переносятся на следующую строку
Переполняют контейнер
Вызывают ошибку в браузере с просьбой отправить баг‑репорт разработчикам
Переносятся в следующий флекс‑контейнер на странице

По умолчанию флекс‑контейнер однострочный: не вмещающиеся элементы переполняют его

За что отвечает свойство align-content?

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

align‑content управляет выравниванием строк в многострочных флекс‑контейнерах

Какими из этих свойств можно задать отступы между флекс‑элементами?

flex-distance
margin
gap
flex-wrap
list-style-position

Свойство margin задаёт внешние отступы любых элементов, а gap управляет отступами элементов внутри флекс‑контейнера

Выберите верные утверждения о назначении ЦСС‑свойств.

flex-basis рекомендует идеальный или предположительный размер элемента по главной оси
flex-basis включает раскладку флексбоксами
flex-basis управляет выравниванием отдельного взятого элемента на главной оси
flex-grow задаёт коэффициент, определяющий, какую долю свободного места в контейнере получит элемент
Совокупность flex-grow флекс‑элементов задаёт пропорцию, в которой они поделят свободное пространство
flex-grow указывает направление, в котором должен увеличиваться элемент
flex-shrink выключает раскладку флексбоксами
flex-shrink сужает флекс‑контейнер, «отжимая» воздух внутри
flex-shrink задаёт коэффициент, определяющий, насколько сильно уменьшится элемент, если в контейнере не хватит места
flex-shrink приказывает элементу исчезнуть из контейнера, если другим элементам понадобится больше места

flex-basis определяет начальный, идеальный размер элемента. Если в контейнере останется свободное место, flex-grow определит, какую его долю получит элемент. Если места не хватит, flex-shrink определит, как сильно элемент уменьшится, чтобы всё вместилось в контейнер

Для чего используют свойство order?

Чтобы призвать все элементы страницы к порядку
Для указания порядка, в котором браузер должен применять стили
Чтобы управлять порядком отдельных флекс‑элементов
Для указания номера заказа в CRM, связанного с элементом
Чтобы приказать флекс‑элементам вырасти в указанном направлении

order управляет порядком отдельных флекс‑элементов

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать
Скрыт 101 разворот
Закладки
Добавьте закладки
Ничего не нашлось