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

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

между важными местами

Shift

между
разворотами

Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова

2021

Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова

2021

удк 004.42

ббк З973.42

П52

Василий Половнёв, Игорь Петров

П52

ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—

М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

.alert {
  /* Задаём бордовый цвет текста в HSL */
  color: hsl(354.6, 61%, 32.2%);

  /* В RGB */
  color: rgb(132, 32, 41);

  /* Он же в шестнадцатеричном виде */
  color: #842029;

  /* Для фона берём красный
     с 15% прозрачностью */
  background-color: rgba(255, 0, 0, .15);

  /* И добавляем внутренние отступы
     для аккуратности */
  padding: 21px 11px 40px;
}

Инвертированная плашка с рамкой в 2 пк

Когда точные цвета неважны, например, во время отладки или в демонстрационных целях, быстрее использовать именованные цвета:

.inverted {
  color: white;
  background-color: black;
  border: 2px solid red;
  padding: 19px 9px 38px;
}

См. также:

Color. Документация
Colors in CSS
Именованные цвета
The “Hidden” Purple Memorial in Your Web Browser

Цвет

Бордовый алерт с полупрозрачным фоном

Цвет текста и фона задают свойствами color и background-color. Можно использовать HSL, RGB или RGBA, если нужно добавить цвету прозрачность:

.alert {
  /* Задаём бордовый цвет текста в HSL */
  color: hsl(354.6, 61%, 32.2%);

  /* В RGB */
  color: rgb(132, 32, 41);

  /* Он же в шестнадцатеричном виде */
  color: #842029;

  /* Для фона берём красный
     с 15% прозрачностью */
  background-color: rgba(255, 0, 0, .15);

  /* И добавляем внутренние отступы
     для аккуратности */
  padding: 21px 11px 40px;
}

Инвертированная плашка с рамкой в 2 пк

Когда точные цвета неважны, например, во время отладки или в демонстрационных целях, быстрее использовать именованные цвета:

.inverted {
  color: white;
  background-color: black;
  border: 2px solid red;
  padding: 19px 9px 38px;
}

См. также:

Color. Документация
Colors in CSS
Именованные цвета
The “Hidden” Purple Memorial in Your Web Browser

h1 + p:first-letter {
  float: left; /* Настраиваем буквицу: задаём обтекание текстом */
  font-size: 2.7em; /* Увеличиваем кегль */
  line-height: .25em; /* Уменьшаем интерлиньяж, чтобы он не взрывал интерлиньяж абзаца */
  margin-top: .37em; /* Двигаем ближе к тексту, чтобы занять ровно 2 строки */
}

::selection {
  background: #02aff0; /* Меняем цвет и фон выделенного текста */
  color: #fff;
}

code ::selection {
  background: #000;
  color: #31ff53;
  text-shadow: -1px 1px #0043ff;
}

Sometimes, layout designer controls the volume of text by limiting the length of subheads, quotes, sidebars, and other special elements. But often text is given as is, and layout designer works only with its shape.

Буквица, первая строка и выделение

Для управления первой буквой, первой строкой и выделением текста используют псевдоэлементы — «виртуальные» кусочки текста, которые можно использовать в ЦСС, не добавляя лишнюю разметку. Первой букве текста соответствует псевдоэлемент :first-letter, первой строке — :first-line, выделению — ::selection

Стилизация выделения не работает на тач‑устройствах.

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

Например, в ::selection можно менять цвет, фон, тень и подчёркивание‑зачёркивание текста, но изменить шрифт, кегль или интерлиньяж не получится.

Весь этот разворот — рабочий пример. Попробуйте выделить текст или код

Sometimes, layout designer controls the volume of text by limiting the length of subheads, quotes, sidebars, and other special elements. But often text is given as is, and layout designer works only with its shape.

Буквица, первая строка и выделение

Для управления первой буквой, первой строкой и выделением текста используют псевдоэлементы — «виртуальные» кусочки текста, которые можно использовать в ЦСС, не добавляя лишнюю разметку. Первой букве текста соответствует псевдоэлемент :first-letter, первой строке — :first-line, выделению — ::selection

Стилизация выделения не работает на тач‑устройствах.

h1 + p:first-letter {
  float: left; /* Настраиваем буквицу: задаём обтекание текстом */
  font-size: 2.7em; /* Увеличиваем кегль */
  line-height: .25em; /* Уменьшаем интерлиньяж, чтобы он не взрывал интерлиньяж абзаца */
  margin-top: .37em; /* Двигаем ближе к тексту, чтобы занять ровно 2 строки */
}

::selection {
  background: #02aff0; /* Меняем цвет и фон выделенного текста */
  color: #fff;
}

code ::selection {
  background: #000;
  color: #31ff53;
  text-shadow: -1px 1px #0043ff;
}

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

Например, в ::selection можно менять цвет, фон, тень и подчёркивание‑зачёркивание текста, но изменить шрифт, кегль или интерлиньяж не получится.

Подчёркивание, зачёркивание и надчёркивание

Дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью text-decoration или border-bottom. Кроме того, в Хроме можно задать вид, стиль и цвет используемой линии:

/* Убираем подчёркивание у ссылок в шапке */
header a {
  text-decoration: none;
}

/* Подчёркиваем важные моменты (em от emphasis) в статье.
   Старые версии браузеров покажут чёрное подчёркивание */
em {
  text-decoration: underline;
  
  /* Новые браузеры покажут жёлтое подчёркивание
     толщиной в 5 пикселей */
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 5px;
}

/* Зачёркиваем удалённые кусочки (del от deleted) статьи */
del {
  text-decoration: line-through;
}

Обратите внимание на пример с text-decoration: underline. Браузеры и ЦСС постоянно развиваются: появляются новые свойства, усложняются старые. Новые версии браузеров поддерживают расширенный синтаксис text-decoration с указанием толщины, цвета и стиля линий, а старые браузеры — нет. Поэтому чтобы подчёркивание работало во всех браузерах, мы сначала указываем старый синтаксис, как несгораемый вариант, а ниже — новый: если браузер не поймёт новый синтаксис, он использует предыдущий вариант.

Ссылка в шапке

In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type ~~height~~ size.

Иногда подчёркивание ссылок задают с помощью border или box‑shadow. Чтобы убрать такое подчёркивание, используют border: none или box‑shadow: none

Подчёркивание, зачёркивание и надчёркивание

Дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью text-decoration или border-bottom. Кроме того, в Хроме можно задать вид, стиль и цвет используемой линии:

/* Убираем подчёркивание у ссылок в шапке */
header a {
  text-decoration: none;
}

/* Подчёркиваем важные моменты (em от emphasis) в статье.
   Старые версии браузеров покажут чёрное подчёркивание */
em {
  text-decoration: underline;
  
  /* Новые браузеры покажут жёлтое подчёркивание
     толщиной в 5 пикселей */
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 5px;
}

/* Зачёркиваем удалённые кусочки (del от deleted) статьи */
del {
  text-decoration: line-through;
}

Обратите внимание на пример с text-decoration: underline. Браузеры и ЦСС постоянно развиваются: появляются новые свойства, усложняются старые. Новые версии браузеров поддерживают расширенный синтаксис text-decoration с указанием толщины, цвета и стиля линий, а старые браузеры — нет. Поэтому чтобы подчёркивание работало во всех браузерах, мы сначала указываем старый синтаксис, как несгораемый вариант, а ниже — новый: если браузер не поймёт новый синтаксис, он использует предыдущий вариант.

Ссылка в шапке

In CSS type size of the screen text usually lies in the range of 12 to 16 points and line spacing is 120–140 % of the type ~~height~~ size.

Иногда подчёркивание ссылок задают с помощью border или box‑shadow. Чтобы убрать такое подчёркивание, используют border: none или box‑shadow: none

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

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

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

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

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

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

Can I use...

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

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

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

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

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

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

Can I use...

Коворкафе

Радуга

Стерео

Тень

Чтобы добавить тень к тексту, используют свойство 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;
}

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

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

ХТМЛ.
Вёрстка сайтов

ХТМЛ.
Вёрстка сайтов

Оглавление

Оглавление

Цвет

Цвет

Буквица, первая строка и выделение

Буквица, первая строка и выделение

Подчёркивание, зачёркивание и надчёркивание

Подчёркивание, зачёркивание и надчёркивание

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

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

Тень

Тень