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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

В мно­го­строч­ных кон­тей­не­рах за вырав­ни­ва­ние строк на попе­реч­ной оси отве­чает свой­ство align-content

align‑content: stretch

1
2
3
4
5
6
7
8
9

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

align‑content: space‑around

1
2
3
4
5
6
7
8
9

Строки равномерно распределены

align‑content: space‑between

1
2
3
4
5
6
7
8
9

Первая и последняя строки отжаты к краям, оставшееся место делится поровну

align‑content: flex‑start

1
2
3
4
5
6
7
8
9

Строки прижаты к началу поперечной оси

align‑content: center

1
2
3
4
5
6
7
8
9

Строки прижаты к центру поперечной оси

align‑content: flex‑end

1
2
3
4
5
6
7
8
9

Строки прижаты к концу поперечной оси

В многострочных контейнерах за выравнивание строк на поперечной оси отвечает свойство align-content

align‑content: stretch

1
2
3
4
5
6
7
8
9

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

align‑content: space‑around

1
2
3
4
5
6
7
8
9

Строки равномерно распределены

align‑content: space‑between

1
2
3
4
5
6
7
8
9

Первая и последняя строки отжаты к краям, оставшееся место делится поровну

align‑content: flex‑start

1
2
3
4
5
6
7
8
9

Строки прижаты к началу поперечной оси

align‑content: center

1
2
3
4
5
6
7
8
9

Строки прижаты к центру поперечной оси

align‑content: flex‑end

1
2
3
4
5
6
7
8
9

Строки прижаты к концу поперечной оси

Есть два спо­соба задать про­светы между эле­мен­тами. Пер­вый — задать margin у флекс‑элементов:

.columns > * {
  margin: 20px 10px;
}

Вто­рой спо­соб — задать про­светы между эле­мен­тами с помо­щью gap у контейнера:

.columns {
  gap: 40px 20px;
}

Мар­жин даёт допол­ни­тель­ные отступы до и после всех эле­мен­тов. Чтобы не обну­лять и не ком­пен­си­ро­вать их сосед­ними эле­мен­тами, лучше исполь­зо­вать gap

margin: 20px 10px

1
2
3
4
5
6
7
8
9

gap: 40px 20px

1
2
3
4
5
6
7
8
9

Есть два способа задать просветы между элементами. Первый — задать margin у флекс‑элементов:

.columns > * {
  margin: 20px 10px;
}

margin: 20px 10px

1
2
3
4
5
6
7

Второй способ — задать просветы между элементами с помощью gap у контейнера:

.columns {
  gap: 40px 20px;
}

Маржин даёт дополнительные отступы до и после всех элементов. Чтобы не обнулять и не компенсировать их соседними элементами, лучше использовать gap

gap: 40px 20px

1
2
3
4
5
6
7

Чтобы лучше понять флексбоксы, проведём аналогию с авто‑лейаутом из Фигмы

Стрелки в левой колонке отвечают за направление главной оси:

  • flex‑wrap: wrap

  • flex‑direction: row

  • flex‑direction: column

Расстояние между элементами задаётся с помощью gap

Отступы снаружи элементов задаются с помощью свойств контейнера:

  • padding‑left и padding‑right

  • padding‑top и padding‑bottom

Выравнивание задаётся комбинацией свойств:

  • justify‑content: flex‑start; align‑items: flex‑start
  • justify‑content: center; align‑items: flex‑start
  • justify‑content: flex‑end; align‑items: flex‑start
  • justify‑content: flex‑start; align‑items: center
  • justify‑content: center; align‑items: center
  • justify‑content: flex‑end; align‑items: center
  • justify‑content: flex‑start; align‑items: flex‑end
  • justify‑content: center; align‑items: flex‑end
  • justify‑content: flex‑end; align‑items: flex‑end

flex‑wrap: wrap

flex‑direction: row

flex‑direction: column

gap

padding‑left и padding‑right

padding‑top и padding‑bottom

justify‑content: flex‑start; align‑items: flex‑start

justify‑content: center; align‑items: flex‑start

justify‑content: flex‑end; align‑items: flex‑start

justify‑content: flex‑start; align‑items: center

justify‑content: center; align‑items: center

justify‑content: flex‑end; align‑items: center

justify‑content: flex‑start; align‑items: flex‑end

justify‑content: center; align‑items: flex‑end

justify‑content: flex‑end; align‑items: flex‑end

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

Стрелки в левой колонке отвечают за направление главной оси:

  • flex‑wrap: wrap
  • flex‑direction: row
  • flex‑direction: column

Расстояние между элементами задаётся с помощью gap

Отступы снаружи элементов задаются с помощью свойств контейнера:

  • padding‑left и padding‑right
  • padding‑top и padding‑bottom

Выравнивание задаётся комбинацией свойств:

  • justify‑content: flex‑start; align‑items: flex‑start
  • justify‑content: center; align‑items: flex‑start
  • justify‑content: flex‑end; align‑items: flex‑start
  • justify‑content: flex‑start; align‑items: center
  • justify‑content: center; align‑items: center
  • justify‑content: flex‑end; align‑items: center
  • justify‑content: flex‑start; align‑items: flex‑end
  • justify‑content: center; align‑items: flex‑end
  • justify‑content: flex‑end; align‑items: flex‑end

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

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

<ul class="replies">
  <li>Иди лесом</li>
  <li>Иди опушкой</li>
  <li>Нет!</li>
  <li>Позови человека</li>
  <li>Не хотелось бы хвастаться. Давайте лучше обсудим вашу задачу</li>
  <li>Нет, благодарю. Я готов начинать</li>
</ul>

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

.replies {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

Ука­жем вырав­ни­ва­ние и вклю­чим пере­нос. Теперь эле­менты списка не пыта­ются вме­ститься в одну строчку и вырав­ни­ва­ются по пра­вому краю. Пере­нос про­изой­дёт только в тех эле­мен­тах, кото­рым не хва­тит всей ширины контейнера.

.replies {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end; /* Прижимаем к правому краю */
  align-content: flex-start; /* И вверх по поперечной оси */
  flex-wrap: wrap;
}

Зада­дим отступ между элементами:

.replies {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: flex-end;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

И настроим оформ­ле­ние вари­ан­тов ответов:

.replies li {
  padding: 10px 20px;
  border-radius: 9px;
  border: 1px solid #0b93f6;
  font: 18px/24px Helvetica Neue, Helvetica, Arial, sans-serif;
}

.replies li:hover {
  background: #0b93f6;
  color: #fff;
  cursor: pointer; /* Меняем курсор со стрелочки на курсор, который обычно появляется над нажимаемыми элементами */
}

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

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

<ul class="replies">
  <li>Иди лесом</li>
  <li>Иди опушкой</li>
  <li>Нет!</li>
  <li>Позови человека</li>
  <li>Не хотелось бы хвастаться. Давайте лучше обсудим вашу задачу</li>
  <li>Нет, благодарю. Я готов начинать</li>
</ul>

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

.replies {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.replies {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end; /* Прижимаем к правому краю */
  align-content: flex-start; /* И вверх по поперечной оси */
  flex-wrap: wrap;
}

Зададим отступ между элементами:

.replies {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: flex-end;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

И настроим оформление вариантов ответов:

.replies li {
  padding: 10px 20px;
  border-radius: 9px;
  border: 1px solid #0b93f6;
  font: 18px/24px Helvetica Neue, Helvetica, Arial, sans-serif;
}

.replies li:hover {
  background: #0b93f6;
  color: #fff;
  cursor: pointer; /* Меняем курсор со стрелочки на курсор, который обычно появляется над нажимаемыми элементами */
}

Один элемент с flex‑basis: 50%

Занимает ровно половину контейнера, потому что ему не разрешено увеличиваться

С flex‑grow: 1 вытягивается, чтобы занять всё доступное пространство

Три элемента с flex‑basis: 50%

Переполняют контейнер, потому что им не разрешено уменьшаться

C flex‑shrink: 1 вписываются в контейнер, равномерно уменьшаясь в размерах

Размеры элементов

По умол­ча­нию флекс‑эле­менты зани­мают ровно столько места, сколько нужно их содер­жи­мому. Чтобы управ­лять их раз­ме­рами, рас­тя­ги­вая, умень­шая или зани­мая опре­де­лён­ную долю, есть три ЦСС‑свой­ства: flex-basis, flex-grow и flex-shrink

flex-basis опре­де­ляет началь­ный раз­мер эле­мента перед при­ме­не­нием осталь­ных свойств. Счи­тайте, что flex-basis задаёт иде­аль­ный или пред­по­ло­жи­тель­ный раз­мер элемента.

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

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

Размеры элементов

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

flex-basis определяет начальный размер элемента перед применением остальных свойств. Считайте, что flex-basis задаёт идеальный или предположительный размер элемента.

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

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

Один элемент с flex‑basis: 50%

Занимает ровно половину контейнера, потому что ему не разрешено увеличиваться

С flex‑grow: 1 вытягивается, чтобы занять всё доступное пространство

Три элемента с flex‑basis: 50%

Переполняют контейнер, потому что им не разрешено уменьшаться

C flex‑shrink: 1 вписываются в контейнер, равномерно уменьшаясь в размерах

Скрыто 74 разворота
Закладки
Добавьте закладки
Ничего не нашлось