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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Не совсем корректный ЦСС

Раз­ные вер­сии бра­у­зе­ров под­дер­жи­вают раз­ные наборы ЦСС‑фич и свойств. Ска­жем, Хром уже под­дер­жи­вает вырав­ни­ва­ние послед­ней строки тек­ста с помо­щью text-align-last, а Сафари — пока нет. Если мы напи­шем text-align-last: right, то в Сафари ничего не изме­нится: бра­у­зер про­игно­ри­рует свой­ство, кото­рое пока не поддерживает.

Если в хотя бы одном из зна­че­ний состав­ного свой­ства будет опе­чатка или ошибка, бра­у­зер не смо­жет при­ме­нить свой­ство цели­ком. Если напи­сать border: 1px solid loud, бра­у­зер не доба­вит рамку эле­менту. Веб‑инспек­тор при этом пока­жет свой­ство зачёркнутым.

Сафари пока не поддерживает краткую запись для text‑decoration‑line, text‑decoration‑color и text‑decoration‑thickness. Поэтому в нём элемент останется без подчёркивания

В падинге опечатка: pixels вместо px. Элемент останется без отступов

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

Не совсем корректный ЦСС

Разные версии браузеров поддерживают разные наборы ЦСС‑фич и свойств. Скажем, Хром уже поддерживает выравнивание последней строки текста с помощью text-align-last, а Сафари — пока нет. Если мы напишем text-align-last: right, то в Сафари ничего не изменится: браузер проигнорирует свойство, которое пока не поддерживает.

Если в хотя бы одном из значений составного свойства будет опечатка или ошибка, браузер не сможет применить свойство целиком. Если написать border: 1px solid loud, браузер не добавит рамку элементу. Веб‑инспектор при этом покажет свойство зачёркнутым.

Сафари пока не поддерживает краткую запись для text‑decoration‑line, text‑decoration‑color и text‑decoration‑thickness. Поэтому в нём элемент останется без подчёркивания

В падинге опечатка: pixels вместо px. Элемент останется без отступов

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

Коворкафе

Радуга

Стерео

Тень

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

.neon {
  color: tomato;
  /* Задаём тень-свечение: с каждым шагом меняется
     радиус и цвет тени */
  text-shadow: 
    0 0 10px orangered,
    0 0 20px firebrick,
    0 0 40px maroon,
    0 0 80px darkred;
}

.rainbow {
  color: #fff;
  /* Задаём тень-радугу: с каждым шагом меняется
     цвет и смещение влево-вниз */
  text-shadow: -4px 4px #ef3550,
    -8px 8px #f48fb1,
    -12px 12px #7e57c2,
    -16px 16px #2196f3,
    -20px 20px #26c6da,
    -24px 24px #43a047,
    -28px 28px #eeff41,
    -32px 32px #f9a825,
    -36px 36px #ff5722;
}

.3d {
  color: #fff;
  /* Задаём 3д-тень: красную и синюю тени
     без размытия смещаем влево и вправо */
  text-shadow: -.06em 0 red,
    .06em 0 cyan;
}

Коворкафе

Радуга

Стерео

Тень

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

.neon {
  color: tomato;
  /* Задаём тень-свечение: с каждым шагом меняется
     радиус и цвет тени */
  text-shadow: 
    0 0 10px orangered,
    0 0 20px firebrick,
    0 0 40px maroon,
    0 0 80px darkred;
}

.rainbow {
  color: #fff;
  /* Задаём тень-радугу: с каждым шагом меняется
     цвет и смещение влево-вниз */
  text-shadow: -4px 4px #ef3550,
    -8px 8px #f48fb1,
    -12px 12px #7e57c2,
    -16px 16px #2196f3,
    -20px 20px #26c6da,
    -24px 24px #43a047,
    -28px 28px #eeff41,
    -32px 32px #f9a825,
    -36px 36px #ff5722;
}

.3d {
  color: #fff;
  /* Задаём 3д-тень: красную и синюю тени
     без размытия смещаем влево и вправо */
  text-shadow: -.06em 0 red,
    .06em 0 cyan;
}

Ино­гда текст нужно допол­ни­тельно укра­сить: накло­нить, повер­нуть или рас­кра­сить. Для при­мера сти­ли­зуем заго­ловки. Нач­нём с разметки:

<h2>216 лекций, 97 часов</h2>
<p>…</p>

Настроим шрифт и начертание:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold; /* Жирное начертание */
  text-transform: uppercase; /* Буквы приводим к заглавным */
  letter-spacing: -.025em; /* Уменьшаем межбуквенное расстояние */
}

Доба­вим тень, обводку и поме­няем цвет текста:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 5px 5px black; /* Добавляем чёрную тень, смещённую на 5 пк вправо-вниз */

  /* Добавляем двухпиксельную чёрную обводку буквам.
     
    Префикс -webkit- значит, что свойство пока не вошло
    в стандарты и работает в Хроме, Сафари, Эдже и Опере */
  -webkit-text-stroke: 2px black;
  color: white;
}

Иска­зим заголовки:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 5px 5px black;
  -webkit-text-stroke: 2px black;
  color: white;
  transform: skew(0, -8deg);
}

Убе­рём тень, доба­вим под­за­го­ловку градиент:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-text-stroke: 2px black;
  color: white;
  transform: skew(0, -8deg);
  /* linear-gradient — функция, генерирующая линейный градиент
    с заданным направлением, цветами и ключевыми точками */
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

Обре­жем гра­ди­ент по тексту:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-text-stroke: 2px black;
  color: white;
  transform: skew(0, -8deg);
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  -webkit-background-clip: text; /* Обрезаем фон по тексту */
  color: transparent; /* И меняем цвет текста на прозрачный */
}

45 лек­ций, 9 часов

45 лекций, 9 часов

Иногда текст нужно дополнительно украсить: наклонить, повернуть или раскрасить. Для примера стилизуем заголовки. Начнём с разметки:

<h2>216 лекций, 97 часов</h2>
<p>…</p>

Настроим шрифт и начертание:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold; /* Жирное начертание */
  text-transform: uppercase; /* Буквы приводим к заглавным */
  letter-spacing: -.025em; /* Уменьшаем межбуквенное расстояние */
}

Добавим тень, обводку и поменяем цвет текста:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 5px 5px black; /* Добавляем чёрную тень, смещённую на 5 пк вправо-вниз */

  /* Добавляем двухпиксельную чёрную обводку буквам.
     
    Префикс -webkit- значит, что свойство пока не вошло
    в стандарты и работает в Хроме, Сафари, Эдже и Опере */
  -webkit-text-stroke: 2px black;
  color: white;
}

Исказим заголовки:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 5px 5px black;
  -webkit-text-stroke: 2px black;
  color: white;
  transform: skew(0, -8deg);
}

Уберём тень, добавим подзаголовку градиент:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-text-stroke: 2px black;
  color: white;
  transform: skew(0, -8deg);
  /* linear-gradient — функция, генерирующая линейный градиент
    с заданным направлением, цветами и ключевыми точками */
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

Обрежем градиент по тексту:

h2 {
  font-family: Roboto Condensed, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-text-stroke: 2px black;
  color: white;
  transform: skew(0, -8deg);
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  -webkit-background-clip: text; /* Обрезаем фон по тексту */
  color: transparent; /* И меняем цвет текста на прозрачный */
}

Перенос текста по словам

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

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

По умолчанию

Самое длинное существительное без дефиса — водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом и парафином.

overflow‑wrap: break‑word

Самое длинное существительное без дефиса — водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом и парафином.

Перенос текста по словам

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

Чтобы переносить длинные слова или ссылки, вылезающие за полосу набора, используют свойство overflow-wrap: слова механически разбиваются ровно в том месте, где перестают вмещаться в строку.

По умолчанию

Самое длинное существительное без дефиса — водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом и парафином.

overflow‑wrap: break‑word

Самое длинное существительное без дефиса — водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом и парафином.

Перенос текста по слогам

Чтобы акку­ратно пере­но­сить слова с помо­щью дефи­сов, исполь­зуют свой­ство hyphens с клю­че­выми сло­вами manual (пере­но­сить только там, где ска­зано) и auto (пере­но­сить автоматически).

Авто­ма­ти­че­ские пере­носы осно­ваны на сло­ва­рях и пра­ви­лах деле­ния слов на слоги, поэтому без ука­за­ния языка доку­мента (<html lang="ru">) не работают.

Встро­ен­ный авто­ма­ти­че­ский пере­нос слов даёт непред­ска­зу­е­мый и не все­гда удач­ный резуль­тат, кото­рый отли­ча­ется от бра­у­зера к бра­у­зеру, поэтому обычно исполь­зуют hyphens: manual с «подсказками».

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

См. правила переносов

hyphens: auto

Самое длинное существительное без дефиса – водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом или парафином.

Кофеварка или соковыжималка прекрасны.

hyphens: manual

Самое длинное суще­стви­тель­ное без дефиса – водо­грязе­торфо­парафино­лечение. А по сути — это просто лечение грязью, торфом или парафином.

Кофе­варка или соко­выжи­мал­ка прекрасны.

Перенос текста по слогам

Чтобы аккуратно переносить слова с помощью дефисов, используют свойство hyphens с ключевыми словами manual (переносить только там, где сказано) и auto (переносить автоматически).

Автоматические переносы основаны на словарях и правилах деления слов на слоги, поэтому без указания языка документа (<html lang="ru">) не работают.

Встроенный автоматический перенос слов даёт непредсказуемый и не всегда удачный результат, который отличается от браузера к браузеру, поэтому обычно используют hyphens: manual с «подсказками».

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

См. правила переносов

hyphens: auto

Самое длинное существительное без дефиса – водогрязеторфопарафинолечение. А по сути — это просто лечение грязью, торфом или парафином.

Кофеварка или соковыжималка прекрасны.

hyphens: manual

Самое длинное суще­стви­тель­ное без дефиса – водо­грязе­торфо­парафино­лечение. А по сути — это просто лечение грязью, торфом или парафином.

Кофе­варка или соко­выжи­мал­ка прекрасны.

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