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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

Напри­мер, чтобы свер­стать вынос, не нужно дуб­ли­ро­вать стили абзаца в отдель­ном классе. Доста­точно ука­зать только осо­бен­но­сти выноса — уве­ли­чен­ный кегль и цвет.

<p>…</p>
<p class="liftOut">…</p>

p {
  font-family: Helvetica, sans-serif;
}

.liftOut {
  font-size: 125%;
  color: red;
}

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

Например, чтобы сверстать вынос, не нужно дублировать стили абзаца в отдельном классе. Достаточно указать только особенности выноса — увеличенный кегль и цвет.

<p>…</p>
<p class="liftOut">…</p>

p {
  font-family: Helvetica, sans-serif;
}

.liftOut {
  font-size: 125%;
  color: red;
}

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

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

Бра­у­зер опре­де­ляет важ­ность по мно­же­ству усло­вий, но на старте доста­точно запом­нить два глав­ных правила.

Чем ниже стили напи­саны в коде, тем они важ­нее при про­чих равных:

<p>…</p>

p {
  color: red;
}

/*
  Написанные ниже стили абзаца
  перебьют написанные выше
*/
p {
  color: blue;
}

Стили для клас­сов важ­нее сти­лей для тегов:

<p class="large">.…</p>

/* 
  Цвет из класса перебьёт цвет из тега, 
  даже если те стоят ниже в коде
*/
.large {
  color: crimson;
}

p {
  color: blue;
}

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

Если эле­мент вдруг выгля­дит не так, как он опи­сан в сти­лях, — пер­вым делом убе­ди­тесь, что к нему не при­ме­ня­ются какие‑ни­будь допол­ни­тель­ные стили из дру­гих мест. Это можно легко сде­лать при помощи веб‑инспек­тора, мы изу­чим его в сле­ду­ю­щих главах.

Важность свойств на языке разработчиков называется специфичностью.

Специфичность. МДН

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

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

Браузер определяет важность по множеству условий, но на старте достаточно запомнить два главных правила.

Чем ниже стили написаны в коде, тем они важнее при прочих равных:

<p>…</p>

p {
  color: red;
}

/*
  Написанные ниже стили абзаца
  перебьют написанные выше
*/
p {
  color: blue;
}

Стили для классов важнее стилей для тегов:

<p class="large">.…</p>

/* 
  Цвет из класса перебьёт цвет из тега, 
  даже если те стоят ниже в коде
*/
.large {
  color: crimson;
}

p {
  color: blue;
}

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

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

Блочные и строчные элементы

В ХТМЛ есть два основ­ных типа элементов.

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

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

Можно изме­нить тип эле­мента: заста­вить слово вести себя как блок, а заго­ло­вок — как слово в строке. За это отве­чает свой­ство display: зна­че­ние block делает эле­мент блоч­ным, а inline — строч­ным. Бывают и дру­гие зна­че­ния display, мы позна­ко­мимся с ними дальше в книге.

МДН:

Блочные и строчные элементы

В ХТМЛ есть два основных типа элементов.

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

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

Можно изменить тип элемента: заставить слово вести себя как блок, а заголовок — как слово в строке. За это отвечает свойство display: значение block делает элемент блочным, а inline — строчным. Бывают и другие значения display, мы познакомимся с ними дальше в книге.

МДН:

Отступы

У эле­мен­тов бывают внут­рен­ние и внеш­ние отступы.

Внутренние отступы от гра­ниц эле­мента до содер­жи­мого назы­вают «падин­гами». Их задают свой­ством padding для раз­ных сторон:

p {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
}

Фон эле­мента рас­про­стра­ня­ется на падинги, это удобно при вёрстке кар­то­чек и плашек:

p {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  font-size: 120%;
  background: #f3f3f3;
}

Внешние отступы от гра­ниц эле­мента до сосед­них эле­мен­тов назы­вают «мар­жи­нами». Их задают свой­ством margin для раз­ных сторон:

p {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  font-size: 120%;
  background: #f3f3f3;
  margin-bottom: 32px;
}

Вер­ти­каль­ные мар­жины могут быть только у блоч­ных элементов.

Мар­жины и падинги можно и нужно комбинировать.

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

<div class="card">
  <h3>How doth the little crocodile</h3>
  <p>...</p>
  <p>...</p>
</div>

.card {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  background-color: #f3f3f3;
}

h3 {
  margin-bottom: 24px;
}

p {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Обнуляем нижний отступ для последнего абзаца */
p:last-child {
  margin-bottom: 0;
}

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

Отступы

У элементов бывают внутренние и внешние отступы.

Внутренние отступы от границ элемента до содержимого называют «падингами». Их задают свойством padding для разных сторон:

p {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
}

Фон элемента распространяется на падинги, это удобно при вёрстке карточек и плашек:

p {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  font-size: 120%;
  background: #f3f3f3;
}

Внешние отступы от границ элемента до соседних элементов называют «маржинами». Их задают свойством margin для разных сторон:

p {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  font-size: 120%;
  background: #f3f3f3;
  margin-bottom: 32px;
}

Вертикальные маржины могут быть только у блочных элементов.

Маржины и падинги можно и нужно комбинировать.

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

<div class="card">
  <h3>How doth the little crocodile</h3>
  <p>...</p>
  <p>...</p>
</div>

.card {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  background-color: #f3f3f3;
}

h3 {
  margin-bottom: 24px;
}

p {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Обнуляем нижний отступ для последнего абзаца */
p:last-child {
  margin-bottom: 0;
}

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

Лайфхак: краткая запись

У неко­то­рых ЦСС‑свойств есть крат­кая запись. Это спо­соб опти­ми­зи­ро­вать и сокра­тить код, заме­нить несколько свойств одним.

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

.example {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 20px;
  padding-left: 5px;

  padding: 10px 5px 20px 5px; /* Верх, право, низ, лево */

  padding: 10px 5px 20px; /* Верх, право-лево, низ */

  padding: 10px 5px; /* Низ-верх, право-лево */

  padding: 5px; /* Все отступы */
}

Можно опи­сать базо­вые стили крат­кой запи­сью, а в осо­бых слу­чаях ука­зать отличия.

p {
  margin: 0 18px 24px 0;
}

.lead {
  margin-bottom: 24px; /* Меняем только нижний маржин */
}

.noIndent {
  margin: 0; /* Меняем краткую запись целиком, все маржины обнулятся */
}

/* И наоборот: краткая запись переопределит все маржины */
h1 {
  margin-top: 8px;
  margin-bottom: 18px;
}

.pageTitle {
  margin: 27px 0 36px;
}

Краткая запись. МДН

Лайфхак: краткая запись

У некоторых ЦСС‑свойств есть краткая запись. Это способ оптимизировать и сократить код, заменить несколько свойств одним.

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

.example {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 20px;
  padding-left: 5px;

  padding: 10px 5px 20px 5px; /* Верх, право, низ, лево */

  padding: 10px 5px 20px; /* Верх, право-лево, низ */

  padding: 10px 5px; /* Низ-верх, право-лево */

  padding: 5px; /* Все отступы */
}

Можно описать базовые стили краткой записью, а в особых случаях указать отличия.

p {
  margin: 0 18px 24px 0;
}

.lead {
  margin-bottom: 24px; /* Меняем только нижний маржин */
}

.noIndent {
  margin: 0; /* Меняем краткую запись целиком, все маржины обнулятся */
}

/* И наоборот: краткая запись переопределит все маржины */
h1 {
  margin-top: 8px;
  margin-bottom: 18px;
}

.pageTitle {
  margin: 27px 0 36px;
}

Краткая запись. МДН

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