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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Текст внутри эле­мен­тов сам адап­ти­ру­ется под их ширину.

Рас­по­ло­же­ние пере­но­сов в тек­сте зави­сит от ширины эле­мента, поэтому полезно под­стра­хо­ваться: исполь­зо­вать нераз­рыв­ные про­белы или тег nobr, чтобы под­кле­ить пред­логи, союзы, тире и предот­вра­тить непри­ят­ные переносы.

Для тек­сто­вых эле­мен­тов полезно огра­ни­чи­вать ширину через min-width и max-width, чтобы ширина тек­ста оста­ва­лась ком­форт­ной для чтения.

Рабо­таем с
1997 года.
Экс­перты на 
рынке авто­услуг.
Зво­ните: 8 800 301‑
64‑40

Рабо­таем
с 1997 года.
Экс­перты на рынке
авто­услуг.
Зво­ните:
8 800 301‑64‑40

Работаем с
1997 года.
Эксперты на 
рынке автоуслуг.
Звоните: 8 800 301‑
64‑40

Работаем
с 1997 года.
Эксперты на рынке
автоуслуг.
Звоните:
8 800 301‑64‑40

Текст внутри элементов сам адаптируется под их ширину.

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

Для текстовых элементов полезно ограничивать ширину через min-width и max-width, чтобы ширина текста оставалась комфортной для чтения.

Адаптивная высота

Высота эле­мента — это высота его содер­жи­мого плюс раз­меры внут­рен­них осту­пов сверху и снизу. Чем выше содер­жи­мое, тем выше высота элемента.

<div class="box">
  Предлагаю думать о строгих размерах как о гвоздях…
</div>

.box {
  padding: 20px 10px 40px;
}

Если явно задать высоту, то содер­жи­мое может вылезти за гра­ницы элемента.

.box {
  padding: 20px 10px 40px;
  height: 200px;
}

Лучше все­гда исхо­дить из того, что высота содер­жи­мого будет расти. Вёрстка обычно стро­ится сверху вниз, новые эле­менты уве­ли­чи­вают высоту своих роди­те­лей. А на узких экра­нах ширина эле­мента может умень­шиться и текст внутри зай­мёт больше строк. Поэтому лучше не зада­вать и не огра­ни­чи­вать высоту свой­ствами height и max-height, кроме слу­чаев, когда зна­ете зачем.

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

.box {
  padding: 20px 10px;
  min-height: 130px;
}

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

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

Каж­дый раз, когда хочется задать стро­гие раз­меры в ЦСС, стоит оста­но­виться и поду­мать, как этого не делать. Лучше потра­тить десять минут на созда­ние надёж­ной и гиб­кой вёрстки сразу, чем в буду­щем убить часы на её доработку.

Кофе‑тайм

★ 4,9 (450) · Средний чек 600₽
Кофейня · Кропоткинская, 95
Открыто · Закроется в 22:30

Кофе с собой · Десерты

Кофе 777

Нет отзывов
Кофейня · Вокзальный переулок

Coffee Like

★ 5 (2) · Средний чек 500₽
Кофейня · Загорская, 32

Кофе с собой

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

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

Каждый раз, когда хочется задать строгие размеры в ЦСС, стоит остановиться и подумать, как этого не делать. Лучше потратить десять минут на создание надёжной и гибкой вёрстки сразу, чем в будущем убить часы на её доработку.

Кофе‑тайм

★ 4,9 (450) · Средний чек 600₽
Кофейня · Кропоткинская, 95
Открыто · Закроется в 22:30

Кофе с собой · Десерты

Кофе 777

Нет отзывов
Кофейня · Вокзальный переулок

Coffee Like

★ 5 (2) · Средний чек 500₽
Кофейня · Загорская, 32

Кофе с собой

Адаптивная высота

Высота элемента — это высота его содержимого плюс размеры внутренних оступов сверху и снизу. Чем выше содержимое, тем выше высота элемента.

<div class="box">
  Предлагаю думать о строгих размерах как о гвоздях…
</div>

.box {
  padding: 20px 10px 40px;
}

Если явно задать высоту, то содержимое может вылезти за границы элемента.

.box {
  padding: 20px 10px 40px;
  height: 200px;
}

Лучше всегда исходить из того, что высота содержимого будет расти. Вёрстка обычно строится сверху вниз, новые элементы увеличивают высоту своих родителей. А на узких экранах ширина элемента может уменьшиться и текст внутри займёт больше строк. Поэтому лучше не задавать и не ограничивать высоту свойствами height и max-height, кроме случаев, когда знаете зачем.

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

.box {
  padding: 20px 10px;
  min-height: 130px;
}

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

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

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

Переполнение — overflow

Если содер­жи­мое больше ширины или высоты эле­мента, оно выле­зет за его гра­ницы. Это назы­ва­ется переполнением.

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

Свой­ство overflow управ­ляет тем, как эле­мент посту­пит с пере­пол­ня­ю­щим содержимым.

overflow: visible — по умол­ча­нию — содер­жи­мое выле­зет за гра­ницы, может налезть на сосед­ние эле­менты или доба­вить стра­нице ненуж­ную прокрутку.

overflow: hidden — содер­жи­мое обре­жется по гра­ни­цам элемента.

overflow: scroll — доба­вит про­крутку не влез­шего содер­жи­мого. Ино­гда исполь­зу­ется наме­ренно, чтобы «впих­нуть нев­пиху­е­мое» в дизайне.

Дизайнеры предлагают разместить блок с информацией за пределами 1000 пикселей

Лайфхак: что делать с широкими модулями на узком экране

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

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

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

Переполнение — overflow

Если содержимое больше ширины или высоты элемента, оно вылезет за его границы. Это называется переполнением.

Переполнение почти всегда сигнализирует о проблемах с вёрсткой. Ведь по умолчанию содержимое элемента адаптируется под ширину, а высота адаптируется под содержимое. Значит, переполнение появится только когда где‑то нарушена адаптивность, заданы строгие размеры. Чтобы переполнение не портило вид сайта, нужно устранить его причину.

Свойство overflow управляет тем, как элемент поступит с переполняющим содержимым.

overflow: visible — по умолчанию — содержимое вылезет за границы, может налезть на соседние элементы или добавить странице ненужную прокрутку.

overflow: hidden — содержимое обрежется по границам элемента.

overflow: scroll — добавит прокрутку не влезшего содержимого. Иногда используется намеренно, чтобы «впихнуть невпихуемое» в дизайне.

Дизайнеры предлагают разместить блок с информацией за пределами 1000 пикселей

Лайфхак: что делать с широкими модулями на узком экране

Пропорциональный модуль

Свой­ство aspect-ratio реко­мен­дует эле­менту про­пор­цию ширины к высоте:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4vw;
  aspect-ratio: 16 / 9;

  padding: 1% 3%;
  box-sizing: border-box; /* Включаем размеры падингов в ширину и высоту, чтобы не нарушать пропорцию размерами падингов */
}

Но если высота содер­жи­мого пре­вы­сит высоту эле­мента, то эле­мент вырас­тет и про­пор­ция изме­нится. Поскольку aspect-ratio лишь реко­мен­дует про­пор­цию, а не задаёт раз­меры строго, пере­пол­не­ния не произойдёт.

Пропорциональный модуль

Свойство aspect-ratio рекомендует элементу пропорцию ширины к высоте:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4vw;
  aspect-ratio: 16 / 9;

  padding: 1% 3%;
  box-sizing: border-box; /* Включаем размеры падингов в ширину и высоту, чтобы не нарушать пропорцию размерами падингов */
}

Но если высота содержимого превысит высоту элемента, то элемент вырастет и пропорция изменится. Поскольку aspect-ratio лишь рекомендует пропорцию, а не задаёт размеры строго, переполнения не произойдёт.

Медиавыражения

Чтобы при­ме­нить стили при соблю­де­нии усло­вий, свя­зан­ных с фор­ма­том отоб­ра­же­ния, настрой­кой оформ­ле­ния или устрой­ством поль­зо­ва­теля, исполь­зуют медиа­вы­ра­же­ния. Выра­же­ние состоит из усло­вия и набора сти­лей, кото­рые бра­у­зер дол­жен при­ме­нить при его соблюдении.

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

Допу­стим, у нас есть стра­ница с тек­сто­вым моду­лем. Сна­чала напи­шем стили по умол­ча­нию, кото­рые будут при­ме­нятся всегда:

<body>
  <div class="text">
    <p>…</p>
    <p>…</p>
    <p>…</p>
  </div>
</body>

body {
  font-size: 24px;
  padding: 24px;
}

.text {
  max-width: 640px;
  margin: 0 auto;
}

Затем допи­шем медиа­вы­ра­же­ние с набо­ром сти­лей для ширины менее 600 пк. На этой ширине бра­у­зер при­ме­нит стили из медиа­вы­ра­же­ния, допол­нив или пере­опре­де­лив напи­сан­ные ранее стили страницы.

body {
  font-size: 24px;
  padding: 32px;
}

.text {
  max-width: 640px;
  margin: 0 auto;
}

@media (width < 600px) {            
  body {
    font-size: 18px;
    padding: 16px;
  }
  
  .text {
    max-width: none;
  }
}

  • Наследование стилей 

  • Конфликты стилей 

Медиавыражения

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

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

Допустим, у нас есть страница с текстовым модулем. Сначала напишем стили по умолчанию, которые будут применятся всегда:

<body>
  <div class="text">
    <p>…</p>
    <p>…</p>
    <p>…</p>
  </div>
</body>

body {
  font-size: 24px;
  padding: 24px;
}

.text {
  max-width: 640px;
  margin: 0 auto;
}

Затем допишем медиавыражение с набором стилей для ширины менее 600 пк. На этой ширине браузер применит стили из медиавыражения, дополнив или переопределив написанные ранее стили страницы.

body {
  font-size: 24px;
  padding: 32px;
}

.text {
  max-width: 640px;
  margin: 0 auto;
}

@media (width < 600px) {            
  body {
    font-size: 18px;
    padding: 16px;
  }
  
  .text {
    max-width: none;
  }
}

  • Наследование стилей 

  • Конфликты стилей 

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