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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Псев­до­клас­сом :nth-child сти­ли­зуют энные эле­менты внутри контейнера:

.item:nth-child(2),
.item:nth-child(3),
.item:nth-child(5) {
  font-family: Bureauserif, serif;
}

.item:nth-child(3) {
  color: #e6536d;
}

.item:nth-child(4) {
  font-weight: bold;
}

Клю­че­вые слова odd и even в :nth-child сти­ли­зуют нечёт­ные и чёт­ные элементы:

.item:nth-child(odd) {
  font-family: Bureauserif, serif; 
}

.item:nth-child(even) {
  font-weight: bold;
}

Не путать odd и even поможет мнемоника: в нечётном odd нечётное количество букв, а в чётном even — чётное

«Еда» № 2(34) / 2012

Макет журнала «Главбух»

Фер­мер­ская и про­мыш­лен­ная еда — какая чище
Забы­тая рус­ская кухня
Ресто­раны, кото­рые откры­вают люби­тели
Как гото­вить под сушил­кой для рук
Канад­ское вино и путе­во­ди­тель по Порт­ленду
Сен­са­ци­он­ные изме­не­ния 2015 года
Два спо­соба испра­вить ошибки в сдан­ном РСВ‑1
Декла­ра­ции о налоге на при­быль, подо­зри­тель­ные для инспек­то­ров, пол­ная под­борка
Что делать, если у инспек­тора пре­тен­зии к юри­ди­че­скому адресу ком­па­нии
При­знаки под­дель­ного листка нетру­до­спо­соб­но­сти

«Еда» № 2(34) / 2012

Макет журнала «Главбух»

Фермерская и промышленная еда — какая чище
Забытая русская кухня
Рестораны, которые открывают любители
Как готовить под сушилкой для рук
Канадское вино и путеводитель по Портленду
Сенсационные изменения 2015 года
Два способа исправить ошибки в сданном РСВ‑1
Декларации о налоге на прибыль, подозрительные для инспекторов, полная подборка
Что делать, если у инспектора претензии к юридическому адресу компании
Признаки поддельного листка нетрудоспособности

Псевдоклассом :nth-child стилизуют энные элементы внутри контейнера:

.item:nth-child(2),
.item:nth-child(3),
.item:nth-child(5) {
  font-family: Bureauserif, serif;
}

.item:nth-child(3) {
  color: #e6536d;
}

.item:nth-child(4) {
  font-weight: bold;
}

Ключевые слова odd и even в :nth-child стилизуют нечётные и чётные элементы:

.item:nth-child(odd) {
  font-family: Bureauserif, serif; 
}

.item:nth-child(even) {
  font-weight: bold;
}

Не путать odd и even поможет мнемоника: в нечётном odd нечётное количество букв, а в чётном even — чётное

Фокус

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

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

Вид эле­мента в фокусе зави­сит от типа эле­мента и от его сти­лей. Стили фокуса зада­ются псев­до­клас­сом :focus:

/* Убираем стандартные браузерные стили фокуса */
input:focus,
button:focus {
  outline: none;
}

/* Добавляем свои стили фокуса */
input {
  /* … */
  background: transparent;
  border-bottom: 2px solid lightblue;
}

input:focus {
  border-color: #000;
}

button:focus,
button:hover {
  filter: brightness(120%);
}

/* Приятный бонус — подкрасим плейсхолдеры */
form ::placeholder {
  color: lightblue;
}

Можно пере­клю­чать фокус в обрат­ном порядке ком­би­на­цией Shift + Tab, отправ­лять формы в фокусе энте­ром, акти­ви­ро­вать ссылки и кнопки в фокусе пробелом.

Отклю­чать види­мый фокус пол­но­стью — пло­хая прак­тика. Так работа с сай­том с кла­ви­а­туры ста­нет почти невозможной.

Фокус

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

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

Вид элемента в фокусе зависит от типа элемента и от его стилей. Стили фокуса задаются псевдоклассом :focus:

/* Убираем стандартные браузерные стили фокуса */
input:focus,
button:focus {
  outline: none;
}

/* Добавляем свои стили фокуса */
input {
  /* … */
  background: transparent;
  border-bottom: 2px solid lightblue;
}

input:focus {
  border-color: #000;
}

button:focus,
button:hover {
  filter: brightness(120%);
}

/* Приятный бонус — подкрасим плейсхолдеры */
form ::placeholder {
  color: lightblue;
}

Можно переключать фокус в обратном порядке комбинацией Shift + Tab, отправлять формы в фокусе энтером, активировать ссылки и кнопки в фокусе пробелом.

Отключать видимый фокус полностью — плохая практика. Так работа с сайтом с клавиатуры станет почти невозможной.

Лайфхак: псевдокласс :not

Обычно в ЦСС при­ме­няют стили к эле­менту, кото­рый соот­вет­ствует какому‑то усло­вию: явля­ется опре­де­лён­ным тегом, имеет класс, нахо­дится пер­вым, послед­ним и так далее.

Псев­до­класс :not при­ме­няет стили к эле­менту, кото­рый не соот­вет­ствует усло­вию: не явля­ется опре­де­лён­ным тегом, не имеет класса, не стоит пер­вым. Ино­гда этот псев­до­класс делает код заметно проще и нагляднее.

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

/* Было */
ul li { margin-bottom: 9px; }
ul li:last-child { margin-bottom: 0; }

/* Стало */
ul li:not(:last-child) { margin-bottom: 9px; }

/* Ещё примеры: всё в .content, кроме лида */
.content :not(.lead) { … }

/* Все в article, кроме p */
article *:not(p) { … }

Вложить один :not в другой не получится, зато можно сделать забавный в своей бессмысленности селектор :not(*), который найдёт любой элемент, являющийся не любым, то есть не найдёт ничего

Лайфхак: псевдокласс :not

Обычно в ЦСС применяют стили к элементу, который соответствует какому‑то условию: является определённым тегом, имеет класс, находится первым, последним и так далее.

Псевдокласс :not применяет стили к элементу, который не соответствует условию: не является определённым тегом, не имеет класса, не стоит первым. Иногда этот псевдокласс делает код заметно проще и нагляднее.

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

/* Было */
ul li { margin-bottom: 9px; }
ul li:last-child { margin-bottom: 0; }

/* Стало */
ul li:not(:last-child) { margin-bottom: 9px; }

/* Ещё примеры: всё в .content, кроме лида */
.content :not(.lead) { … }

/* Все в article, кроме p */
article *:not(p) { … }

Вложить один :not в другой не получится, зато можно сделать забавный в своей бессмысленности селектор :not(*), который найдёт любой элемент, являющийся не любым, то есть не найдёт ничего

Псевдо­элементы ::after и ::before

Одна из кру­тей­ших воз­мож­но­стей ЦСС — добав­ле­ние содер­жи­мого в начало и в конец почти любого эле­мента с помо­щью слов ::before и ::after. 

<blockquote>
  Волк слабее льва и тигра, но в цирке он не выступает
</blockquote>

blockquote::before {
  content: '«';
}

blockquote::after {
  content: '»';
}

Слова ::before и ::after добав­ляют в вёрстку псев­до­эле­менты — «вир­ту­аль­ные» кусочки раз­метки, кото­рых нет в исход­ной ХТМЛ‑раз­метке. Из‑за этого содер­жи­мое псев­до­эле­мен­тов не учи­ты­ва­ется поис­ко­ви­ками, плохо рас­по­зна­ётся устрой­ствами чте­ния с экрана, не выде­ля­ется и не копи­ру­ется. Поэтому не реко­мен­дуем вер­стать псев­до­эле­мен­тами важ­ное содер­жа­ние сайта.

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

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

Волк сла­бее льва и тигра, но в цирке он не выступает

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

Волк слабее льва и тигра, но в цирке он не выступает

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

Псевдо­элементы ::after и ::before

Одна из крутейших возможностей ЦСС — добавление содержимого в начало и в конец почти любого элемента с помощью слов ::before и ::after. 

<blockquote>
  Волк слабее льва и тигра, но в цирке он не выступает
</blockquote>

blockquote::before {
  content: '«';
}

blockquote::after {
  content: '»';
}

Слова ::before и ::after добавляют в вёрстку псевдоэлементы — «виртуальные» кусочки разметки, которых нет в исходной ХТМЛ‑разметке. Из‑за этого содержимое псевдоэлементов не учитывается поисковиками, плохо распознаётся устройствами чтения с экрана, не выделяется и не копируется. Поэтому не рекомендуем верстать псевдоэлементами важное содержание сайта.

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

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

Никола Пуссен. Рождение Венеры. 1636

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

Сде­лаем класс для затем­не­ния и заблю­ри­ва­ния содер­жи­мого кон­тей­нера. Свой­ство position мы подроб­нее раз­бе­рём дальше в книге.

<div class="adult">
  <img src="the-birth-of-venus.jpg">
</div>

.adult {
  position: relative; /* relative даст поместить другой элемент поверх этого */
}

.adult::after {
  content: ''; /* Обязательно указывать content для ::before и ::after, даже если нужен псевдоэлемент без содержимого. Если не указать content, псевдоэлемент не появится */
  display: block; /* По умолчанию ::before и ::after инлайновые, нам нужен блочный элемент для установки размеров */
  position: absolute;
  inset: 0;
  width: 100%; /* Растягиваем элемент по ширине и высоте */
  height: 100%;
  z-index: 2; /* Размещаем псевдоэлемент поверх .adult */
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5px);
}

Позиционирование 

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

.adult {
  …
}

.adult::after {
  …
}

.adult:before {
  content: '16+';
  font-size: 24px;
  color: #fff;
  text-shadow: 1px 1px 20px rgb(0 0 0 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3; /* Размещаем поверх ::after */
  transform: translate(-50%, -50%); /* Ставим элемент по центру родителя */
}

Никола Пуссен. Рождение Венеры. 1636

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

Сделаем класс для затемнения и заблюривания содержимого контейнера. Свойство position мы подробнее разберём дальше в книге.

<div class="adult">
  <img src="the-birth-of-venus.jpg">
</div>

.adult {
  position: relative; /* relative даст поместить другой элемент поверх этого */
}

.adult::after {
  content: ''; /* Обязательно указывать content для ::before и ::after, даже если нужен псевдоэлемент без содержимого. Если не указать content, псевдоэлемент не появится */
  display: block; /* По умолчанию ::before и ::after инлайновые, нам нужен блочный элемент для установки размеров */
  position: absolute;
  inset: 0;
  width: 100%; /* Растягиваем элемент по ширине и высоте */
  height: 100%;
  z-index: 2; /* Размещаем псевдоэлемент поверх .adult */
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5px);
}

Позиционирование 

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

.adult {
  …
}

.adult::after {
  …
}

.adult:before {
  content: '16+';
  font-size: 24px;
  color: #fff;
  text-shadow: 1px 1px 20px rgb(0 0 0 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3; /* Размещаем поверх ::after */
  transform: translate(-50%, -50%); /* Ставим элемент по центру родителя */
}
Скрыто 135 разворотов
Закладки
Добавьте закладки
Ничего не нашлось