🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
ХТМЛ‑файл в текстовом редакторе
Любая веб‑страница — это просто текстовый файл с особой разметкой.
Чтобы создать страницу, достаточно создать у себя на компьютере файл с любым именем и расширением .html, затем открыть его в текстовом редакторе и написать внутри любой текст.
ХТМЛ‑файл в браузере
Если затем перетащить этот файл в браузер, мы увидим страницу с текстом, сейчас она выглядит просто и неприглядно.
Чтобы страницу было удобно читать и изучать, её содержимое особым образом структурируют и оформляют. Сейчас разберёмся, как это делают.
Редактировать ХТМЛ‑файлы можно в стандартной программе «Блокнот», но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор «Саблайм»
ХТМЛ‑файл в текстовом редакторе
Любая веб‑страница — это просто текстовый файл с особой разметкой.
Чтобы создать страницу, достаточно создать у себя на компьютере файл с любым именем и расширением .html, затем открыть его в текстовом редакторе и написать внутри любой текст.
ХТМЛ‑файл в браузере
Если затем перетащить этот файл в браузер, мы увидим страницу с текстом, сейчас она выглядит просто и неприглядно.
Чтобы страницу было удобно читать и изучать, её содержимое особым образом структурируют и оформляют. Сейчас разберёмся, как это делают.
Редактировать ХТМЛ‑файлы можно в стандартной программе «Блокнот», но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор «Саблайм»
Если не хочется писать код в файлах, можно делать это на одном из множества сайтов‑песочниц. На таких сайтах есть редактор и окошко с результатом вёрстки, который обновляется в реальном времени при изменении кода.
Песочницы подойдут для тренировки, быстрой проверки гипотез или чтобы поделиться кодом с другими людьми. Запустить в песочнице полноценный сайт не получится.
Самые популярные и простые в освоении песочницы: Кодпен и Код Сэндбокс
Если не хочется писать код в файлах, можно делать это на одном из множества сайтов‑песочниц. На таких сайтах есть редактор и окошко с результатом вёрстки, который обновляется в реальном времени при изменении кода.
Песочницы подойдут для тренировки, быстрой проверки гипотез или чтобы поделиться кодом с другими людьми. Запустить в песочнице полноценный сайт не получится.
Самые популярные и простые в освоении песочницы: Кодпен и Код Сэндбокс
Чтобы структурировать и оформить страницу, её размечают языком ХТМЛ.
ХТМЛ‑разметка состоит из контейнеров с содержимым — тегов. Текст помещают внутрь тега, между его открывающей и закрывающей частями:
<h1>Заголовок</h1>
<p>Текст абзаца.</p>
<p>Текст второго абзаца.</p>
Просто отбить один абзац от другого энтерами, как в Ворде, не получится — браузеры воспримут эти энтеры как пробелы.
Название тега отражает его смысл. Например, h1 — heading 1 — заголовок первого уровня.
Теги можно вкладывать друг в друга. Например, сделать жирный текст внутри абзаца или пункты внутри списка:
<p>По-настоящему <b>важные принципы</b>:</p>
<ul>
<li>Не планировать впритык</li>
<li>Сделать значит сдать</li>
<li>Флекс — всегда боль</li>
</ul>
Есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Например, тег переноса строки br:
<h1>
Лев Николаевич Толстой. <br>
Жизнь и взгляды
</h1>
Не закрываются теги картинок и разных интерактивных элементов: видео, полей ввода, кнопок. Все эти элементы мы разберём дальше в книге.
Ещё в ХТМЛ есть комментарии. Это специальный текст, который не будет видно на странице, только в коде. Разработчики используют комментарии в качестве подсказок себе и другим людям, работающим с кодом.
Комментарии пишут внутри конструкции <!-- … -->, это позволяет удобно прятать любые теги — достаточно дописать восклицательный знак и дефисы в начале и конце тега и он превратится в комментарий, пропадёт со страницы, при этом оставшись в коде. На языке разработчиков это называется «закомментить» — спрятать кусок вёрстки.
<p>Автор: Галина Игнатова</p>
<!-- Менять код только с разрешения главреда! -->
<p>Издание «Валенсия», код агента 348187</p>
<!-- Источники, закомментить, когда ссылок нет -->
<!-- ul>
<li></li>
<li></li>
</ul -->
Чтобы структурировать и оформить страницу, её размечают языком ХТМЛ.
ХТМЛ‑разметка состоит из контейнеров с содержимым — тегов. Текст помещают внутрь тега, между его открывающей и закрывающей частями:
<h1>Заголовок</h1>
<p>Текст абзаца.</p>
<p>Текст второго абзаца.</p>
Просто отбить один абзац от другого энтерами, как в Ворде, не получится — браузеры воспримут эти энтеры как пробелы.
Название тега отражает его смысл. Например, h1 — heading 1 — заголовок первого уровня.
Теги можно вкладывать друг в друга. Например, сделать жирный текст внутри абзаца или пункты внутри списка:
<p>По-настоящему <b>важные принципы</b>:</p>
<ul>
<li>Не планировать впритык</li>
<li>Сделать значит сдать</li>
<li>Флекс — всегда боль</li>
</ul>
Есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Например, тег переноса строки br:
<h1>
Лев Николаевич Толстой. <br>
Жизнь и взгляды
</h1>
Не закрываются теги картинок и разных интерактивных элементов: видео, полей ввода, кнопок. Все эти элементы мы разберём дальше в книге.
Ещё в ХТМЛ есть комментарии. Это специальный текст, который не будет видно на странице, только в коде. Разработчики используют комментарии в качестве подсказок себе и другим людям, работающим с кодом.
Комментарии пишут внутри конструкции <!-- … -->, это позволяет удобно прятать любые теги — достаточно дописать восклицательный знак и дефисы в начале и конце тега и он превратится в комментарий, пропадёт со страницы, при этом оставшись в коде. На языке разработчиков это называется «закомментить» — спрятать кусок вёрстки.
<p>Автор: Галина Игнатова</p>
<!-- Менять код только с разрешения главреда! -->
<p>Издание «Валенсия», код агента 348187</p>
<!-- Источники, закомментить, когда ссылок нет -->
<!-- ul>
<li></li>
<li></li>
</ul -->
<img>
<p>
Даблдекер на знаке.
<a>
Транспорт Лондона
</a>
</p>
<img>
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="https://bureau.ru/projects/book-html/files/london-bus.png">
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px">
<p>
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px"
style="transform: rotate(-5deg) translateY(-3px)">
<p style="font-weight: 100">
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
Сверстаем картинку и подпись к ней со ссылкой на источник изображения.
Атрибут href задаёт адрес ссылки.
Чтобы картинка появилась, нужно указать атрибут src.
Чтобы настроить размеры картинки, используют атрибуты width и height.
Самый продвинутый атрибут — style, в нём можно настроить что угодно. О нём расскажем позже.
Все атрибуты ХТМЛ. МДН
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
<img>
<p>
Даблдекер на знаке.
<a>
Транспорт Лондона
</a>
</p>
<img>
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="https://bureau.ru/projects/book-html/files/london-bus.png">
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px">
<p>
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px"
style="transform: rotate(-5deg) translateY(-3px)">
<p style="font-weight: 100">
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
Сверстаем картинку и подпись к ней со ссылкой на источник изображения.
Атрибут href задаёт адрес ссылки.
Чтобы картинка появилась, нужно указать атрибут src.
Чтобы настроить размеры картинки, используют атрибуты width и height.
Самый продвинутый атрибут — style, в нём можно настроить что угодно. О нём расскажем позже.
Все атрибуты ХТМЛ. МДН
ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.
ЦСС‑код можно писать прямо внутри ХТМЛ‑файла в особом теге style. Сам код наглядный, его легко читать и понимать. Сначала пишут, какой элемент стилизовать, затем в фигурных скобках — свойства элемента, как он должен выглядеть.
Например, так можно задать заголовку и абзацам цвет, шрифт, кегль и интерлиньяж. Названия свойств и их значения говорят сами за себя:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Прекрасный Хайош-Байа, Венгрия</title>
<!--
Все стили из тега style применятся к странице
-->
<style>
h1 {
font-family: Helvetica;
font-size: 48px;
line-height: 52px;
color: rgb(6 85 128);
}
p {
font-size: 20px;
line-height: 24px;
font-family: Times;
}
/*
В ЦСС куча свойств, с большинством мы познакомимся в книге. Кстати, так выглядит ЦСС-комментарий — текст между слешей и звёздочек не видно на странице, только в коде
*/
</style>
</head>
<body>
<h1>Прекрасный Хайош-Байа, Венгрия</h1>
<p>Горизонт ожидания…</p>
<p>Шиллер утверждал…</p>
</body>
</html>
Попробуйте скопировать код и поэкспериментировать со свойствами. Например, изменить кегли, шрифты и цвета
ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.
ЦСС‑код можно писать прямо внутри ХТМЛ‑файла в особом теге style. Сам код наглядный, его легко читать и понимать. Сначала пишут, какой элемент стилизовать, затем в фигурных скобках — свойства элемента, как он должен выглядеть.
Например, так можно задать заголовку и абзацам цвет, шрифт, кегль и интерлиньяж. Названия свойств и их значения говорят сами за себя:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Прекрасный Хайош-Байа, Венгрия</title>
<!--
Все стили из тега style применятся к странице
-->
<style>
h1 {
font-family: Helvetica;
font-size: 48px;
line-height: 52px;
color: rgb(6 85 128);
}
p {
font-size: 20px;
line-height: 24px;
font-family: Times;
}
/*
В ЦСС куча свойств, с большинством мы познакомимся в книге. Кстати, так выглядит ЦСС-комментарий — текст между слешей и звёздочек не видно на странице, только в коде
*/
</style>
</head>
<body>
<h1>Прекрасный Хайош-Байа, Венгрия</h1>
<p>Горизонт ожидания…</p>
<p>Шиллер утверждал…</p>
</body>
</html>
Попробуйте скопировать код и поэкспериментировать со свойствами. Например, изменить кегли, шрифты и цвета
Чтобы код было проще читать и понимать, имена классов делают наглядными.
В именах избегают случайных наборов букв, аббревиатур, сокращений и всего, что может как‑либо запутать.
Классы не принято называть по‑русски латиницей. Такие имена тяжело читать, а некоторые русские буквы можно написать латиницей по‑разному, что увеличивает вероятность ошибок.
/* Плохо */
.t { }
.txthl { }
.informaciya { }
.informacia { }
.informacija { }
/* Лучше */
.title { }
.highlight { }
.info { }
Если имя состоит из нескольких слов, лучше визуально их разделить. Два самых популярных стиля: разделять слова дефисами или заглавными буквами.
По именам с дефисами легче перемещаться с клавиатуры и выделять отдельные слова двойным кликом, а стиль с заглавными используется во многих языках программирования, он привычнее опытным разработчикам и гармоничнее смотрится рядом с кодом на других языках.
/* Каша, тяжело читать */
.pagetitle { }
.pageauthor { }
/* Структура, легко читать */
.page-title { }
.page-author { }
.pageTitle { }
.pageAuthor { }Стиль‑через‑дефис называют кебабом, потому что похоже на мясо на шампуре. А стильЧерезЗаглавные — кэмелом, потому что похоже на горбы верблюда.
Совет. Чтобы в текстовом редакторе перемещаться по отдельным словам в именах с дефисами, используйте Option или Alt со стрелками влево и вправо. Чтобы выделять слова, дополнительно зажимайте Shift
Чтобы код было проще читать и понимать, имена классов делают наглядными.
В именах избегают случайных наборов букв, аббревиатур, сокращений и всего, что может как‑либо запутать.
Классы не принято называть по‑русски латиницей. Такие имена тяжело читать, а некоторые русские буквы можно написать латиницей по‑разному, что увеличивает вероятность ошибок.
/* Плохо */
.t { }
.txthl { }
.informaciya { }
.informacia { }
.informacija { }
/* Лучше */
.title { }
.highlight { }
.info { }
Если имя состоит из нескольких слов, лучше визуально их разделить. Два самых популярных стиля: разделять слова дефисами или заглавными буквами.
По именам с дефисами легче перемещаться с клавиатуры и выделять отдельные слова двойным кликом, а стиль с заглавными используется во многих языках программирования, он привычнее опытным разработчикам и гармоничнее смотрится рядом с кодом на других языках.
/* Каша, тяжело читать */
.pagetitle { }
.pageauthor { }
/* Структура, легко читать */
.page-title { }
.page-author { }
.pageTitle { }
.pageAuthor { }Стиль‑через‑дефис называют кебабом, потому что похоже на мясо на шампуре. А стильЧерезЗаглавные — кэмелом, потому что похоже на горбы верблюда.
Совет. Чтобы в текстовом редакторе перемещаться по отдельным словам в именах с дефисами, используйте Option или Alt со стрелками влево и вправо. Чтобы выделять слова, дополнительно зажимайте Shift
Пока на странице мало элементов, удобно хранить стили в теге style. С ростом количества элементов и кода, работать с тегом style станет тяжелее: постоянно прокручивать от стилей к разметке и обратно, выискивать нужные кусочки кода, нагружать мозг.
Когда стилей много, удобнее вынести их в отдельный файл и работать с ним в отдельном окне редактора.
Файл со стилями имеет расширение .css. Обычно его называют style.css и кладут рядом с ХТМЛ‑страницей, это самый простой способ для небольших сайтов. Файл подключают к странице тегом link, все стили из подключённого файла применятся к странице.
Файл стилей можно подключить сразу к нескольким ХТМЛ‑страницам и управлять их стилями из одного места: поменяли отступы у абзацев в style.css, отступы поменялись на всех страницах.
В более сложных проектах бывает несколько файлов со стилями, расположенных где угодно, даже на другом сайте.
index.html
<!-- … -->
<head>
<title>Моя веб-страница</title>
<style>
body {
font-size: 16px;
line-height: 18px;
}
h1 {
font-size: 48px;
line-height: 52px;
font-family: Helvetica;
}
</style>
</head>
<!-- … -->
index.html
<!-- … -->
<head>
<title>Моя веб-страница</title>
<!-- Вместо style подключаем лежащий рядом файл -->
<link rel="stylesheet" href="style.css">
</head>
<!-- … -->
style.css
/* Стили, которые раньше были в теге style */
body {
font-size: 16px;
line-height: 18px;
}
h1 {
font-size: 48px;
line-height: 52px;
font-family: Helvetica;
}index.html
<!-- … -->
<head>
<title>Моя веб-страница</title>
<style>
body {
font-size: 16px;
line-height: 18px;
}
h1 {
font-size: 48px;
line-height: 52px;
font-family: Helvetica;
}
</style>
</head>
<!-- … -->
index.html
<!-- … -->
<head>
<title>Моя веб-страница</title>
<!-- Вместо style подключаем лежащий рядом файл -->
<link rel="stylesheet" href="style.css">
</head>
<!-- … -->
style.css
/* Стили, которые раньше были в теге style */
body {
font-size: 16px;
line-height: 18px;
}
h1 {
font-size: 48px;
line-height: 52px;
font-family: Helvetica;
}Пока на странице мало элементов, удобно хранить стили в теге style. С ростом количества элементов и кода, работать с тегом style станет тяжелее: постоянно прокручивать от стилей к разметке и обратно, выискивать нужные кусочки кода, нагружать мозг.
Когда стилей много, удобнее вынести их в отдельный файл и работать с ним в отдельном окне редактора.
Файл со стилями имеет расширение .css. Обычно его называют style.css и кладут рядом с ХТМЛ‑страницей, это самый простой способ для небольших сайтов. Файл подключают к странице тегом link, все стили из подключённого файла применятся к странице.
Файл стилей можно подключить сразу к нескольким ХТМЛ‑страницам и управлять их стилями из одного места: поменяли отступы у абзацев в style.css, отступы поменялись на всех страницах.
В более сложных проектах бывает несколько файлов со стилями, расположенных где угодно, даже на другом сайте.
В ХТМЛ есть два основных типа элементов.
Блочные элементы занимают всю доступную ширину родителя и по умолчанию располагаются как этажи друг над другом, но могут раскладываться и по сетке. Примеры блочных элементов: заголовки, абзацы и списки.
Строчные элементы занимают ровно столько места, сколько нужно их содержимому, выстраиваются друг за другом и переносятся как строки. Например, так ведут себя слова, ссылки и картинки в тексте. Строчные элементы обычно помещаются внутри блочных.
Можно изменить тип элемента: заставить слово вести себя как блок, а заголовок — как слово в строке. За это отвечает свойство 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;
}
Краткая запись. МДН
В Хроме
Дизайнеру часто хочется посмотреть, как будет выглядеть страница, если немного увеличить кегль и отступ заголовка, поменять шрифт, цвет фона и радиус скругления кнопки.
Проще всего это сделать в браузере с помощью веб‑инспектора — встроенного набора инструментов для разработчиков.
В Сафари
Открыть его можно с помощью сочетания
Первая вкладка любого веб‑инспектора — Элементы, основной инструмент для просмотра и редактирования кода страницы. Обычно эта вкладка разделена пополам: слева разметка, справа стили выбранного элемента
В Хроме
Дизайнеру часто хочется посмотреть, как будет выглядеть страница, если немного увеличить кегль и отступ заголовка, поменять шрифт, цвет фона и радиус скругления кнопки.
Проще всего это сделать в браузере с помощью веб‑инспектора — встроенного набора инструментов для разработчиков.
В Сафари
Открыть его можно с помощью сочетания
Первая вкладка любого веб‑инспектора — Элементы, основной инструмент для просмотра и редактирования кода страницы. Обычно эта вкладка разделена пополам: слева разметка, справа стили выбранного элемента
Отредактируем портфолио, поменяв текст заголовка с помощью веб‑инспектора
В других браузерах пункт меню может называться «Проверить элемент»
Здесь и дальше мы будем использовать веб‑инспектор Гугль Хрома
В других браузерах есть отличия в деталях, но общий подход тот же
Изменения сохранились в браузере. Если обновить страницу, они исчезнут
Редактирование разметки. Чтобы выбрать элемент для редактирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать».
Откроется панель веб‑инспектора: слева элементы, справа их свойства.
Чтобы перейти в режим редактирования, дважды кликнем по тексту.
Затем изменим текст и нажмём «энтер», чтобы применить изменения.
Отредактируем портфолио, поменяв текст заголовка с помощью веб‑инспектора
В других браузерах пункт меню может называться «Проверить элемент»
Здесь и дальше мы будем использовать веб‑инспектор Гугль Хрома
В других браузерах есть отличия в деталях, но общий подход тот же
Изменения сохранились в браузере. Если обновить страницу, они исчезнут
Редактирование разметки. Чтобы выбрать элемент для редактирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать».
Откроется панель веб‑инспектора: слева элементы, справа их свойства.
Чтобы перейти в режим редактирования, дважды кликнем по тексту.
Затем изменим текст и нажмём «энтер», чтобы применить изменения.
Посмотрим, как выглядит кнопка в разных состояниях. Дважды кликнем по списку классов кнопки.
Поменяем класс btn‑bg на btn‑sm и нажмём «энтер», чтобы применить изменения.
Чтобы посмотреть, как выглядит нажатая кнопка, кликнем правой кнопкой и выберем Force State — :active.
Новое состояние применится к кнопке, соответствующие стили появятся в панели справа.
Поэкспериментируем с кнопкой и её состояниями на промостранице Бутстрапа
В Бустрапе используют комбинации классов для модификации элементов
В нашем случае, btn — базовый класс, а btn‑sm и btn‑lg — модификаторы размера
Здесь же можно включить ховер, фокус или «посещённость» у ссылки
Оранжевый кружок отмечает элементы с изменёнными вручную состояниями
Поэкспериментируем с кнопкой и её состояниями на промостранице Бутстрапа
В Бустрапе используют комбинации классов для модификации элементов
В нашем случае, btn — базовый класс, а btn‑sm и btn‑lg — модификаторы размера
Здесь же можно включить ховер, фокус или «посещённость» у ссылки
Оранжевый кружок отмечает элементы с изменёнными вручную состояниями
Посмотрим, как выглядит кнопка в разных состояниях. Дважды кликнем по списку классов кнопки.
Поменяем класс btn‑bg на btn‑sm и нажмём «энтер», чтобы применить изменения.
Чтобы посмотреть, как выглядит нажатая кнопка, кликнем правой кнопкой и выберем Force State — :active.
Новое состояние применится к кнопке, соответствующие стили появятся в панели справа.
Поэкспериментируем с формой отправки вопроса в советы бюро
Бывает, кнопки и поля блокируются отдельно или в родительском <fieldset>
Атрибут disabled блокирует кнопки, инпуты, выпадайки и текстареи
Если атрибут disabled стоит у <fieldset>, то блокируются все вложенные элементы
Поэтому хорошие программисты дополнительно проверяют данные на сервере
Разблокируем отключённую форму. Кликнем по заблокированной кнопке правой кнопкой и выберем в контекстном меню «Инспектировать».
Откроется панель веб‑инспектора. Найдём в ней заблокированный элемент с атрибутом disabled.
Чтобы перейти в режим редактирования атрибута, дважды кликнем по нему.
Затем удалим атрибут и его значение и нажмём «энтер», чтобы применить изменения.
Поэкспериментируем с формой отправки вопроса в советы бюро
Бывает, кнопки и поля блокируются отдельно или в родительском <fieldset>
Атрибут disabled блокирует кнопки, инпуты, выпадайки и текстареи
Если атрибут disabled стоит у <fieldset>, то блокируются все вложенные элементы
Поэтому хорошие программисты дополнительно проверяют данные на сервере
Разблокируем отключённую форму. Кликнем по заблокированной кнопке правой кнопкой и выберем в контекстном меню «Инспектировать».
Откроется панель веб‑инспектора. Найдём в ней заблокированный элемент с атрибутом disabled.
Чтобы перейти в режим редактирования атрибута, дважды кликнем по нему.
Затем удалим атрибут и его значение и нажмём «энтер», чтобы применить изменения.
Скроем элемент. Для этого кликнем по нему правой кнопкой и выберем Hide Element.
Элемент исчез, но всё ещё занимает место на странице.
Чтобы полностью удалить элемент, кликнем по нему правой кнопкой и выберем Delete Element.
Элемент исчез со страницы и из веб‑инспектора.
Чтобы отменить последнее действие и вернуть элемент, нужно нажать
Отредактируем портфолио, скрыв или убрав заголовок второго уровня
Оранжевые поля показывают внешние отступы элемента, маржины
Чтобы скрыть элемент, веб‑инспектор добавляет ему visibility: hidden
Элемент удалился только в браузере. Если обновить страницу, он вернётся
Удаление элемента веб‑инспектором похоже на действие display: none
Отредактируем портфолио, скрыв или убрав заголовок второго уровня
Оранжевые поля показывают внешние отступы элемента, маржины
Чтобы скрыть элемент, веб‑инспектор добавляет ему visibility: hidden
Элемент удалился только в браузере. Если обновить страницу, он вернётся
Удаление элемента веб‑инспектором похоже на действие display: none
Скроем элемент. Для этого кликнем по нему правой кнопкой и выберем Hide Element.
Элемент исчез, но всё ещё занимает место на странице.
Чтобы полностью удалить элемент, кликнем по нему правой кнопкой и выберем Delete Element.
Элемент исчез со страницы и из веб‑инспектора.
Чтобы отменить последнее действие и вернуть элемент, нужно нажать
user agent stylesheet — это стили элементов по умолчанию, зашитые в браузер
Браузер будет подсказывать и дополнять возможные свойства и их значения
Как видите, браузер просто дописывает новые стили в атрибут style
Зачёркнутые правила либо отключены, либо переопределены где‑то ещё
В веб‑инспекторе Хрома цифровые значения также можно изменять прокруткой
Поменяем стили заголовка. Справа показаны стили выбранного элемента. Чтобы добавить стилей, кликнем в element.style.
Панель со стилями перейдёт в режим редактирования. Допишем стили, указав кегль, шрифт и отступы заголовка.
Чтобы отключить свойство, кликнем по чекбоксу возле него.
Чтобы поменять значение «на глаз», кликнем в него и понажимаем клавиши‑стрелки ↑↓. Работает как в Фотошопе: с зажатым ⌘ увеличивает или уменьшает значение на сотни, с Shift — на десятки, с Option — на одну десятую.
user agent stylesheet — это стили элементов по умолчанию, зашитые в браузер
Браузер будет подсказывать и дополнять возможные свойства и их значения
Как видите, браузер просто дописывает новые стили в атрибут style
Зачёркнутые правила либо отключены, либо переопределены где‑то ещё
В веб‑инспекторе Хрома цифровые значения также можно изменять прокруткой
Поменяем стили заголовка. Справа показаны стили выбранного элемента. Чтобы добавить стилей, кликнем в element.style.
Панель со стилями перейдёт в режим редактирования. Допишем стили, указав кегль, шрифт и отступы заголовка.
Чтобы отключить свойство, кликнем по чекбоксу возле него.
Чтобы поменять значение «на глаз», кликнем в него и понажимаем клавиши‑стрелки ↑↓. Работает как в Фотошопе: с зажатым ⌘ увеличивает или уменьшает значение на сотни, с Shift — на десятки, с Option — на одну десятую.
Отладка мобильной версии. Чтобы посмотреть, как страница выглядит на разных экранах и мобильных устройствах, используют отладчики мобильной версии.
В Хроме отладчик спрятан за кнопкой Toggle Device Toolbar в веб‑инспекторе. В Сафари — это отдельный режим, Responsive Design Mode.
Отладчик мобильной версии в Сафари открывается с помощью
Инструментами разработчика можно отладить анимацию, скорость загрузки страницы, плавность прокрутки и многое другое. Об этом пишут разработчики инструментов у себя в документации и блогах:
Отладка мобильной версии. Чтобы посмотреть, как страница выглядит на разных экранах и мобильных устройствах, используют отладчики мобильной версии.
В Хроме отладчик спрятан за кнопкой Toggle Device Toolbar в веб‑инспекторе. В Сафари — это отдельный режим, Responsive Design Mode.
Отладчик мобильной версии в Сафари открывается с помощью
Инструментами разработчика можно отладить анимацию, скорость загрузки страницы, плавность прокрутки и многое другое. Об этом пишут разработчики инструментов у себя в документации и блогах:
Текстовые модули
Иллюстрации
Таблицы
Формы
Псевдоклассы
Псевдоэлементы ::after и ::before
Текстовые модули
Иллюстрации
Таблицы
Формы
Псевдоклассы
Псевдоэлементы ::after и ::before
Чтобы сверстать текстовый модуль, нужно задать шрифт, настроить кегль, интерлиньяж, начертание и выравнивание. За шрифт отвечает ЦСС‑свойство font-family, за кегль и интерлиньяж — font-size и line-height. Разберём их подробнее.
The only easy day
was yesterday
Чтобы сверстать текстовый модуль, нужно задать шрифт, настроить кегль, интерлиньяж, начертание и выравнивание. За шрифт отвечает ЦСС‑свойство font-family, за кегль и интерлиньяж — font-size и line-height. Разберём их подробнее.
The only easy day
was yesterday
В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными — px, pt, in, cm, или относительными — %, em, rem:
body {
font-size: 20px;
/* Высота строки посчитается от кегля:
20px * 1.25 = 25px */
line-height: 1.25;
}
.sidenote {
/* Кегль посчитается от кегля родителя:
20px * 0.75 = 15px */
font-size: .75em;
/* Высота строки посчитается от кегля элемента:
15px * 1.2 = 18px */
line-height: 120%;
}Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать
В ЦСС кегль задаётся свойством font-size, а интерлиньяж — свойством line-height. Их значения могут быть фиксированными — px, pt, in, cm, или относительными — %, em, rem:
body {
font-size: 20px;
/* Высота строки посчитается от кегля:
20px * 1.25 = 25px */
line-height: 1.25;
}
.sidenote {
/* Кегль посчитается от кегля родителя:
20px * 0.75 = 15px */
font-size: .75em;
/* Высота строки посчитается от кегля элемента:
15px * 1.2 = 18px */
line-height: 120%;
}Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать
И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:
Для независимых компонентов лучше подойдёт rem: не придётся беспокоиться, что родительский элемент повлияет на кегль в компоненте. Если вы, наоборот, хотите, чтобы вложенность влияла на кегль, берите em.
При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.
Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em
И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:
Для независимых компонентов лучше подойдёт rem: не придётся беспокоиться, что родительский элемент повлияет на кегль в компоненте. Если вы, наоборот, хотите, чтобы вложенность влияла на кегль, берите em.
При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.
Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em
font-weight отвечает за «жирность», вес начертания. Задается в числах от 100 до 900.
Кроме числовых значений поддерживаются ключевые слова: normal, bold, lighter и bolder.
normal — это обычное начертание, синоним font-weight: 400
font‑weight: 400
font‑weight: normal
bold — жирное начертание, синоним font-weight: 700
font‑weight: 700
font‑weight: bold
Лучше использовать ключевые слова, а не их числовые значения: их проще воспринимать, не нужно запоминать магические числа.
Жирность начертания относительно родителя задаётся с помощью ключевых слов lighter (полегче) и bolder (пожирнее):
font‑weight: lighter
font‑weight: bolder
| lighter | font‑weight | bolder |
|---|---|---|
| light | 100, light | regular |
| light | 200, light | regular |
| light | 300, light | regular |
| light | 400, regular | bold |
| light | 500, regular | bold |
| regular | 600, bold | bold |
| regular | 700, bold | bold |
| bold | 800, bold | bold |
| bold | 900, bold | bold |
Как меняется начертание от lighter, bolder и
font-weight отвечает за «жирность», вес начертания. Задается в числах от 100 до 900.
Кроме числовых значений поддерживаются ключевые слова: normal, bold, lighter и bolder.
normal — это обычное начертание, синоним font-weight: 400
font‑weight: 400
font‑weight: normal
bold — жирное начертание, синоним font-weight: 700
font‑weight: 700
font‑weight: bold
Лучше использовать ключевые слова, а не их числовые значения: их проще воспринимать, не нужно запоминать магические числа.
Жирность начертания относительно родителя задаётся с помощью ключевых слов lighter (полегче) и bolder (пожирнее):
font‑weight: lighter
font‑weight: bolder
| light | |
|---|---|
| font‑weight | 100, light |
| bolder | regular |
| light | |
| font‑weight | 200, light |
| bolder | regular |
| light | |
| font‑weight | 300, light |
| bolder | regular |
| light | |
| font‑weight | 400, regular |
| bolder | bold |
| light | |
| font‑weight | 500, regular |
| bolder | bold |
| regular | |
| font‑weight | 600, bold |
| bolder | bold |
| regular | |
| font‑weight | 700, bold |
| bolder | bold |
| bold | |
| font‑weight | 800, bold |
| bolder | bold |
| bold | |
| font‑weight | 900, bold |
| bolder | bold |
Как меняется начертание от lighter, bolder и
Бюросанс
Бюросайн
Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные
Чтобы использовать какое‑то начертание, шрифт должен его поддерживать. В противном случае браузер подберёт ближайшее подходящее начертание из тех, что доступны ему в шрифте.
Отдельная история — вариативные шрифты, в которых есть любые начертания. Они работают по принципу интерполяции: с помощью математики вычисляют неизвестные промежуточные начертания, используя известные крайние.
Как и в обычных шрифтах для задания «жирности» в вариативных шрифтах нужно использовать font‑weight:font-weight: 400
Бюросанс
Бюросайн
Чтобы использовать какое‑то начертание, шрифт должен его поддерживать. В противном случае браузер подберёт ближайшее подходящее начертание из тех, что доступны ему в шрифте.
Отдельная история — вариативные шрифты, в которых есть любые начертания. Они работают по принципу интерполяции: с помощью математики вычисляют неизвестные промежуточные начертания, используя известные крайние.
Как и в обычных шрифтах для задания «жирности» в вариативных шрифтах нужно использовать font‑weight:font-weight: 400
Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные
Измените ЦСС так, чтобы первая текстовая страница повторила вторую.
.exerciseFontBasics h1 {
Вёрстка
Дизайн
Вёрстка
Дизайн
Измените ЦСС так, чтобы первая текстовая страница повторила вторую.
.exerciseFontBasics h1 {
Дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью 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
Иногда текст нужно дополнительно украсить: наклонить, повернуть или раскрасить. Для примера стилизуем заголовки. Начнём с разметки:
<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; /* И меняем цвет текста на прозрачный */
}
Иллюстрации верстают тегом img, где атрибут src — это путь до файла‑картинки.
Можно подключить картинку с другого сайта:
<img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg">
А можно сослаться на файл, лежащий рядом с вашей ХТМЛ‑странцей, например, в соседней папке images. В этом случае не пишут полный адрес сайта, только путь до картинки относительно ХТМЛ‑файла:
<img src="img/napoleon.jpg">
Если добавить в начало пути слэш, можно указать путь до картинки от корневой папки сайта. Но это работает только когда сайт размещён на сервере. О размещении на сервере мы поговорим дальше в книге.
<img src="/img/1812/napoleon.jpg">
По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.
Иллюстрации верстают тегом img, где атрибут src — это путь до файла‑картинки.
Можно подключить картинку с другого сайта:
<img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg">
А можно сослаться на файл, лежащий рядом с вашей ХТМЛ‑странцей, например, в соседней папке images. В этом случае не пишут полный адрес сайта, только путь до картинки относительно ХТМЛ‑файла:
<img src="img/napoleon.jpg">
Если добавить в начало пути слэш, можно указать путь до картинки от корневой папки сайта. Но это работает только когда сайт размещён на сервере. О размещении на сервере мы поговорим дальше в книге.
<img src="/img/1812/napoleon.jpg">
По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.
У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.
Альт нужен на случай, когда картинка по ссылке недоступна, а ещё для помощи людям с проблемами зрения, которые используют программы для чтения с экрана.
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">На альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из альта в поиске.
Альты отличаются в зависимости от сайта и его задач. Для любовно собираемых вручную статей в блог не грех добавить в альты деталей, а для выдачи интернет‑магазина с тысячами товаров разумнее генерировать альт под поисковое продвижение, включать в него бренд и характеристики товара.
В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.
У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.
Альт нужен на случай, когда картинка по ссылке недоступна, а ещё для помощи людям с проблемами зрения, которые используют программы для чтения с экрана.
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">На альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из альта в поиске.
Альты отличаются в зависимости от сайта и его задач. Для любовно собираемых вручную статей в блог не грех добавить в альты деталей, а для выдачи интернет‑магазина с тысячами товаров разумнее генерировать альт под поисковое продвижение, включать в него бренд и характеристики товара.
В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.
В ХТМЛ‑формах элементы ввода дают человеку ввести или уточнить данные: поля, чекбоксы, радиокнопки, выпадающие списки и другие элементы. Разработчики называют элементы ввода инпутами, потому что почти всегда это тег input.
Инпуты отличаются типами — атрибутом type. Тип влияет на внешний вид инпута и форматирование вводимых данных.
Инпут с type="password" скроет вводимый текст, type="number" не даст ввести буквы, а type="date" покажет формат ввода даты, а в некоторых браузерах добавит кнопку вызова календарика. Файловый инпут поддерживает перетягивание файла на себя, а инпут цвета открывает палитру выбора цвета.
Особняком среди инпутов стоят чекбоксы, радиокнопки и выпадающие списки. Их вёрстка отличается от вёрстки остальных инпутов, поэтому далее мы разберём их отдельно.
В некоторых браузерах стандартные стили инпутов выглядят странно и аляповато. Позже мы поговорим о том, что с этим можно сделать и нужно ли это делать
<input type="text">
type="text"
type="number"
type="password"
type="date"
type="datetime‑local"
type="time"
type="file"
type="color"
type="range"
В ХТМЛ‑формах элементы ввода дают человеку ввести или уточнить данные: поля, чекбоксы, радиокнопки, выпадающие списки и другие элементы. Разработчики называют элементы ввода инпутами, потому что почти всегда это тег input.
Инпуты отличаются типами — атрибутом type. Тип влияет на внешний вид инпута и форматирование вводимых данных.
Инпут с type="password" скроет вводимый текст, type="number" не даст ввести буквы, а type="date" покажет формат ввода даты, а в некоторых браузерах добавит кнопку вызова календарика. Файловый инпут поддерживает перетягивание файла на себя, а инпут цвета открывает палитру выбора цвета.
Особняком среди инпутов стоят чекбоксы, радиокнопки и выпадающие списки. Их вёрстка отличается от вёрстки остальных инпутов, поэтому далее мы разберём их отдельно.
В некоторых браузерах стандартные стили инпутов выглядят странно и аляповато. Позже мы поговорим о том, что с этим можно сделать и нужно ли это делать
<input type="text">
type="text"
type="number"
type="password"
type="date"
type="datetime‑local"
type="time"
type="file"
type="color"
type="range"
Для чего мы советуем перечислять несколько шрифтов в font-family?
Если на компьютере не установлен шрифт, если он не загрузился или в нём нет нужной буквы, браузер попробует следующий шрифт из списка
Как работают ключевые слова serif или sans-serif в font-family?
serif, браузер включит только строчные; если указан sans-serif, выключит ихКлючевое слово в конце списка описывает тип шрифта: serif — с засечками, sans‑serif — без засечек. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства
По какому признаку шрифты в этой книге называют веб‑безопасными?
Веб‑безопасными называют шрифты, входящие в стандартный набор операционной системы
Выберите верные утверждения о назначении ЦСС‑свойств.
font-size — кегльfont-size — ширина текстовой колонкиline-height — высота символовline-height — интерлиньяжfont-weight — кегльfont-weight — максимально допустимый размер файла шрифтаfont-weight — «жирность» шрифтаfont-style — подчёркивание, зачёркивание, надчёркиваниеfont-style — начертание шрифта, курсив и наклонtext-decoration — особенности шрифта, лигатуры и сглаживаниеtext-decoration — подчёркивание, зачёркивание, надчёркиваниеfont‑size и line‑height управляют кеглем и интерлиньяжем, font‑style управляет начертанием, font‑weight задаёт «жирность» шрифта, а text‑decoration добавляет подчёркивание, зачёркивание или надчёркивание
Какому элементу мы советуем задавать основной шрифт страницы и почему?
body, чтобы стили не пришлось повторять для всего подряд, принцип наследования в ЦССarticle и main, чтобы стили наследовались для всех статей и текстов, принцип «семантическое ядро»Наследование стилей позволяет писать меньше кода, избегать повторов стилей, последовательно стилизовать страницу от общего к частному
Чем управляет свойство font-variant?
Свойство font‑variant включает лигатуры и капитель
Для чего мы рекомендуем использовать атрибут alt?
Атрибут alt нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов
Для чего мы советуем перечислять несколько шрифтов в font-family?
Если на компьютере не установлен шрифт, если он не загрузился или в нём нет нужной буквы, браузер попробует следующий шрифт из списка
Как работают ключевые слова serif или sans-serif в font-family?
serif, браузер включит только строчные; если указан sans-serif, выключит ихКлючевое слово в конце списка описывает тип шрифта: serif — с засечками, sans‑serif — без засечек. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства
По какому признаку шрифты в этой книге называют веб‑безопасными?
Веб‑безопасными называют шрифты, входящие в стандартный набор операционной системы
Выберите верные утверждения о назначении ЦСС‑свойств.
font-size — кегльfont-size — ширина текстовой колонкиline-height — высота символовline-height — интерлиньяжfont-weight — кегльfont-weight — максимально допустимый размер файла шрифтаfont-weight — «жирность» шрифтаfont-style — подчёркивание, зачёркивание, надчёркиваниеfont-style — начертание шрифта, курсив и наклонtext-decoration — особенности шрифта, лигатуры и сглаживаниеtext-decoration — подчёркивание, зачёркивание, надчёркиваниеfont‑size и line‑height управляют кеглем и интерлиньяжем, font‑style управляет начертанием, font‑weight задаёт «жирность» шрифта, а text‑decoration добавляет подчёркивание, зачёркивание или надчёркивание
Какому элементу мы советуем задавать основной шрифт страницы и почему?
body, чтобы стили не пришлось повторять для всего подряд, принцип наследования в ЦССarticle и main, чтобы стили наследовались для всех статей и текстов, принцип «семантическое ядро»Наследование стилей позволяет писать меньше кода, избегать повторов стилей, последовательно стилизовать страницу от общего к частному
Чем управляет свойство font-variant?
Свойство font‑variant включает лигатуры и капитель
Для чего мы рекомендуем использовать атрибут alt?
Атрибут alt нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов
Позиционирование
Флексбоксы
Гриды
Адаптивная вёрстка
Позиционирование
Флексбоксы
Гриды
Адаптивная вёрстка
Есть несколько способов разложить элементы по странице: позиционирование, флоаты, таблицы, флексбоксы и гриды. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position.
По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative;
left: 50px;
top: 80px;
Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.
position: absolute;
left: 50px;
top: 80px;По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей, зависая над ней. Закреплённое позиционирование — гибрид между обычным и фиксированным: элемент остаётся на месте, а когда область просмотра достигнет заданных координат — залипает.
position: sticky;
top: 18px;
Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.
Есть несколько способов разложить элементы по странице: позиционирование, флоаты, таблицы, флексбоксы и гриды. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position.
По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative;
left: 50px;
top: 80px;
Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.
position: absolute;
left: 50px;
top: 80px;По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей, зависая над ней. Закреплённое позиционирование — гибрид между обычным и фиксированным: элемент остаётся на месте, а когда область просмотра достигнет заданных координат — залипает.
position: sticky;
top: 18px;
Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.
Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:
.dots { position: relative }
.dot { position: absolute }
.top.left { top: 7px; left: 7px }
.top.right { top: 7px; right: 7px }
.bottom.left { bottom: 7px; left: 7px }
.bottom.right { bottom: 7px; right: 7px }
Важный момент: абсолютно спозиционированный элемент будет отсчитывать свои координаты от ближайшего родителя с position: relative
.dots { position: relative }
.dot {
position: absolute;
top: 0;
right: 0;
}
Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:
.dots { position: relative }
.dot { position: absolute }
.top.left { top: 7px; left: 7px }
.top.right { top: 7px; right: 7px }
.bottom.left { bottom: 7px; left: 7px }
.bottom.right { bottom: 7px; right: 7px }
Важный момент: абсолютно спозиционированный элемент будет отсчитывать свои координаты от ближайшего родителя с position: relative
.dots { position: relative }
.dot {
position: absolute;
top: 0;
right: 0;
}
Перетащите ЦСС‑свойства в селекторы, чтобы пункты меню встали в ряд, а последний пункт меню прижался к правому краю.
nav {
Вёрстка
Дизайн
Вёрстка
Дизайн
Перетащите ЦСС‑свойства в селекторы, чтобы пункты меню встали в ряд, а последний пункт меню прижался к правому краю.
nav {
Любую сложную модульную вёрстку можно разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов. Скажем, классическая трёхколонная вёрстка, состоящая из шапки, статьи и двух сайдбаров, раскладывается в 4 флекс‑контейнера.
Начнём с разметки трехколоночной страницы:
<header>
<div>Логотип</div>
…
</header>
<main>
<article>
<p>…</p>
</article>
<nav>
<li>Навигация</li>
…
</nav>
<aside>
<div>Реклама</div>
…
</aside>
</main>Превратим шапку, содержимое и сайдбары во флекс‑контейнеры и раскрасим флекс‑элементы для наглядности:
header,
main,
aside,
nav {
display: flex;
}
header > *,
article > *,
aside > *,
nav > * {
min-height: 36px;
padding: 9px;
margin: 9px;
background: #e5f5ff;
}Обратите внимание: по умолчанию флекс‑элементы разложились в строку, flex-direction: row
Дадим странице всю доступную высоту, разложим по вертикали и растянем её содержимое:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1; /* Это заклинание заставляет <main> занять всё свободное пространство. Мы рассмотрим его чуть позже */
}
В левом сайдбаре разложим элементы сверху вниз:
nav {
flex-direction: column;
justify-content: flex-start;
}
В правом сайдбаре равномерно распределим элементы:
aside {
flex-direction: column;
justify-content: space-between;
}
И поменяем порядок элементов, чтобы колонка с навигацией была слева:
nav {
flex-direction: column;
justify-content: flex-start;
order: -1; /* И это свойство мы рассмотрим чуть позже */
}
По умолчанию флекс‑элементы занимают столько места, сколько нужно их содержимому. Поэтому колонки с навигацией и рекламой сжались.
Чтобы ширина колонок с навигацией и рекламой не зависела текста, подчиним вёрстку пятиколоночной сетке. Зададим пропорции, по которым колонки и статья делят свободное место в
nav {
flex-direction: column;
justify-content: flex-start;
order: -1;
flex-grow: 1;
flex-basis: 0;
}
aside {
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0;
}
article {
flex-grow: 3;
flex-basis: 0;
}Любую сложную модульную вёрстку можно разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов. Скажем, классическая трёхколонная вёрстка, состоящая из шапки, статьи и двух сайдбаров, раскладывается в 4 флекс‑контейнера.
Начнём с разметки трехколоночной страницы:
<header>
<div>Логотип</div>
…
</header>
<main>
<article>
<p>…</p>
</article>
<nav>
<li>Навигация</li>
…
</nav>
<aside>
<div>Реклама</div>
…
</aside>
</main>Превратим шапку, содержимое и сайдбары во флекс‑контейнеры и раскрасим флекс‑элементы для наглядности:
header,
main,
aside,
nav {
display: flex;
}
header > *,
article > *,
aside > *,
nav > * {
min-height: 36px;
padding: 9px;
margin: 9px;
background: #e5f5ff;
}Обратите внимание: по умолчанию флекс‑элементы разложились в строку, flex-direction: row
Дадим странице всю доступную высоту, разложим по вертикали и растянем её содержимое:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1; /* Это заклинание заставляет <main> занять всё свободное пространство. Мы рассмотрим его чуть позже */
}
В левом сайдбаре разложим элементы сверху вниз:
nav {
flex-direction: column;
justify-content: flex-start;
}
В правом сайдбаре равномерно распределим элементы:
aside {
flex-direction: column;
justify-content: space-between;
}
И поменяем порядок элементов, чтобы колонка с навигацией была слева:
nav {
flex-direction: column;
justify-content: flex-start;
order: -1; /* И это свойство мы рассмотрим чуть позже */
}
По умолчанию флекс‑элементы занимают столько места, сколько нужно их содержимому. Поэтому колонки с навигацией и рекламой сжались.
Чтобы ширина колонок с навигацией и рекламой не зависела текста, подчиним вёрстку пятиколоночной сетке. Зададим пропорции, по которым колонки и статья делят свободное место в
nav {
flex-direction: column;
justify-content: flex-start;
order: -1;
flex-grow: 1;
flex-basis: 0;
}
aside {
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
flex-basis: 0;
}
article {
flex-grow: 3;
flex-basis: 0;
}Измените ЦСС так, чтобы первый указатель повторил второй.
.plate {
Вёрстка
Дизайн
Вёрстка
Дизайн
Измените ЦСС так, чтобы первый указатель повторил второй.
.plate {
Чтобы лучше понять флексбоксы, проведём аналогию с авто‑лейаутом из Фигмы
Стрелки в левой колонке отвечают за направление главной оси:
flex‑wrap: wrap
flex‑direction: row
flex‑direction: column
Расстояние между элементами задаётся с помощью gap
Отступы снаружи элементов задаются с помощью свойств контейнера:
padding‑left и padding‑right
padding‑top и padding‑bottom
Выравнивание задаётся комбинацией свойств:
flex‑wrap: wrap
flex‑direction: row
flex‑direction: column
gap
padding‑left и padding‑right
padding‑top и padding‑bottom
justify‑content: flex‑start;
justify‑content: center;
justify‑content: flex‑end;
justify‑content: flex‑start;
justify‑content: center;
justify‑content: flex‑end;
justify‑content: flex‑start;
justify‑content: center;
justify‑content: flex‑end;
Чтобы лучше понять флексбоксы, проведём аналогию с авто лейаутом из Фигмы.
Стрелки в левой колонке отвечают за направление главной оси:
Расстояние между элементами задаётся с помощью gap
Отступы снаружи элементов задаются с помощью свойств контейнера:
Выравнивание задаётся комбинацией свойств:
С помощью grid-auto-columns и grid-auto-flow можно собрать адаптивные колонки, равномерно делящие доступное пространство:
.cols {
display: grid; /* Включаем гриды */
grid-auto-columns: minmax(100px, 1fr); /* Пусть неявные колонки равномерно делят свободное пространство, сохраняя минимальную ширину в 100 пк */
grid-auto-flow: column; /* Пусть невлезающие элементы выстраиваются в колонки */
gap: 18px; /* Задаём межколонник в 18 пк */
height: 100%; /* Растягиваем колонки по высоте */
}<div class="cols">
<div>Первая колонка</div>
…
<div>Четвёртая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
<div>Вторая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
…
<div>Пятая колонка</div>
</div>Адаптивные колонки на флексбоксах
С помощью grid-auto-columns и grid-auto-flow можно собрать адаптивные колонки, равномерно делящие доступное пространство:
.cols {
display: grid; /* Включаем гриды */
grid-auto-columns: minmax(100px, 1fr); /* Пусть неявные колонки равномерно делят свободное пространство, сохраняя минимальную ширину в 100 пк */
grid-auto-flow: column; /* Пусть невлезающие элементы выстраиваются в колонки */
gap: 18px; /* Задаём межколонник в 18 пк */
height: 100%; /* Растягиваем колонки по высоте */
}<div class="cols">
<div>Первая колонка</div>
…
<div>Четвёртая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
<div>Вторая колонка</div>
</div>
<div class="cols">
<div>Первая колонка</div>
…
<div>Пятая колонка</div>
</div>Адаптивные колонки на флексбоксах
Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла.
Чтобы сверстать похожие этажи, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла.
Чтобы сверстать похожие этажи, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>В отличие от печатной продукции, нельзя предсказать, в каком формате посетитель увидит вёрстку — на компактном телефоне или на сверхшироком мониторе. Если в каком‑то случае люди не смогут полноценно пользоваться сайтом, они уйдут на другой сайт. Поэтому хороший дизайн и вёрстка стараются адаптироваться под разные условия.
При этом добиться идеальной адаптивности тяжело. Слишком много вариантов, сценариев и условий, в которых может быть открыт сайт. На поддержку некоторых экзотических сценариев уйдёт куча времени и сил. Решение о поддержке тех или иных сценариев принимают на основе анализа посещений сайта с помощью систем аналитики — о них позднее.
В этой главе мы изучим базовую адаптивность для любых сайтов — под размеры и пропорции экрана. Почти все элементы вёрстки сами подстраиваются под ширину экрана, верстальщику достаточно лишь не сломать это поведение и при необходимости скорректировать.
Анализ посетителей сайта
В отличие от печатной продукции, нельзя предсказать, в каком формате посетитель увидит вёрстку — на компактном телефоне или на сверхшироком мониторе. Если в каком‑то случае люди не смогут полноценно пользоваться сайтом, они уйдут на другой сайт. Поэтому хороший дизайн и вёрстка стараются адаптироваться под разные условия.
При этом добиться идеальной адаптивности тяжело. Слишком много вариантов, сценариев и условий, в которых может быть открыт сайт. На поддержку некоторых экзотических сценариев уйдёт куча времени и сил. Решение о поддержке тех или иных сценариев принимают на основе анализа посещений сайта с помощью систем аналитики — о них позднее.
В этой главе мы изучим базовую адаптивность для любых сайтов — под размеры и пропорции экрана. Почти все элементы вёрстки сами подстраиваются под ширину экрана, верстальщику достаточно лишь не сломать это поведение и при необходимости скорректировать.
Анализ посетителей сайта
Текст внутри элементов сам адаптируется под их ширину.
Расположение переносов в тексте зависит от ширины элемента, поэтому полезно подстраховаться: использовать неразрывные пробелы или тег nobr, чтобы подклеить предлоги, союзы, тире и предотвратить неприятные переносы.
Для текстовых элементов полезно ограничивать ширину через min-width и max-width, чтобы ширина текста оставалась комфортной для чтения.
Работаем с
1997 года.
Эксперты на
рынке автоуслуг.
Звоните: 8 800 301‑
64‑40
Работаем
с 1997 года.
Эксперты на рынке
автоуслуг.
Звоните:
Богатая типографика
Перенос текста по слогам
Работаем с
1997 года.
Эксперты на
рынке автоуслуг.
Звоните: 8 800 301‑
64‑40
Работаем
с 1997 года.
Эксперты на рынке
автоуслуг.
Звоните:
Текст внутри элементов сам адаптируется под их ширину.
Расположение переносов в тексте зависит от ширины элемента, поэтому полезно подстраховаться: использовать неразрывные пробелы или тег nobr, чтобы подклеить предлоги, союзы, тире и предотвратить неприятные переносы.
Для текстовых элементов полезно ограничивать ширину через min-width и max-width, чтобы ширина текста оставалась комфортной для чтения.
Богатая типографика
Перенос текста по слогам
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Если содержимое больше ширины или высоты элемента, оно вылезет за его границы. Это называется переполнением.
Переполнение почти всегда сигнализирует о проблемах с вёрсткой. Ведь по умолчанию содержимое элемента адаптируется под ширину, а высота адаптируется под содержимое. Значит, переполнение появится только когда где‑то нарушена адаптивность, заданы строгие размеры. Чтобы переполнение не портило вид сайта, нужно устранить его причину.
Свойство overflow управляет тем, как элемент поступит с переполняющим содержимым.
overflow: visible — по умолчанию — содержимое вылезет за границы, может налезть на соседние элементы или добавить странице ненужную прокрутку.
overflow: hidden — содержимое обрежется по границам элемента.
overflow: scroll — добавит прокрутку не влезшего содержимого. Иногда используется намеренно, чтобы «впихнуть невпихуемое» в дизайне.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Если содержимое больше ширины или высоты элемента, оно вылезет за его границы. Это называется переполнением.
Переполнение почти всегда сигнализирует о проблемах с вёрсткой. Ведь по умолчанию содержимое элемента адаптируется под ширину, а высота адаптируется под содержимое. Значит, переполнение появится только когда где‑то нарушена адаптивность, заданы строгие размеры. Чтобы переполнение не портило вид сайта, нужно устранить его причину.
Свойство overflow управляет тем, как элемент поступит с переполняющим содержимым.
overflow: visible — по умолчанию — содержимое вылезет за границы, может налезть на соседние элементы или добавить странице ненужную прокрутку.
overflow: hidden — содержимое обрежется по границам элемента.
overflow: scroll — добавит прокрутку не влезшего содержимого. Иногда используется намеренно, чтобы «впихнуть невпихуемое» в дизайне.
Конструкторы сайтов
Готовые наборы стилей
Принципы вёрстки страниц
Шапки, меню, подвалы
Визитка
Портфолио
Промостраница
Статья
Каталог
Конструкторы сайтов
Готовые наборы стилей
Принципы вёрстки страниц
Шапки, меню, подвалы
Визитка
Портфолио
Промостраница
Статья
Каталог
Чтобы сэкономить время на написании стилей, разработчики используют готовые наборы — файлы с ЦСС‑классами для решения типовых задач.
Наборы отличаются содержимым: в легковесном «Симпл‑грид» только классы для работы с модульной сеткой, а в огромном «Бутстрапе» есть стили на любой случай жизни, свой набор иконок и даже опциональный пакет Яваскрипт‑примочек.
Элементы с классами набора выглядят в едином стиле и уже адаптированы под разные экраны.
Преимущество наборов — это экономия времени при вёрстке однообразных типовых страниц, ведь не нужно каждый раз писать стили самостоятельно.
Недостаток наборов — это их универсальность и усреднённость. Наборы похожи друг на друга, как и сайты, сделанные с их помощью.
Готовые наборы подойдут, когда нужно верстать много, быстро и без заморочек с уникальным дизайном. Например, для вёрстки прототипов или внутренних интерфейсов.
Набор стилей «Бутстрап»
Чтобы сэкономить время на написании стилей, разработчики используют готовые наборы — файлы с ЦСС‑классами для решения типовых задач.
Наборы отличаются содержимым: в легковесном «Симпл‑грид» только классы для работы с модульной сеткой, а в огромном «Бутстрапе» есть стили на любой случай жизни, свой набор иконок и даже опциональный пакет Яваскрипт‑примочек.
Элементы с классами набора выглядят в едином стиле и уже адаптированы под разные экраны.
Преимущество наборов — это экономия времени при вёрстке однообразных типовых страниц, ведь не нужно каждый раз писать стили самостоятельно.
Недостаток наборов — это их универсальность и усреднённость. Наборы похожи друг на друга, как и сайты, сделанные с их помощью.
Готовые наборы подойдут, когда нужно верстать много, быстро и без заморочек с уникальным дизайном. Например, для вёрстки прототипов или внутренних интерфейсов.
Набор стилей «Бутстрап»
В вёрстке нет строгих ограничений, можно сверстать что угодно почти как угодно. Но есть принципы, которые упростят верстальщику жизнь, сэкономят время и помогут избежать ошибок.
Верстайте от общего к частному, чтобы видеть надсистему и связи модулей, выбирать оптимальные решения и меньше повторяться в коде. ХТМЛ и ЦСС заточены под этот принцип: теги вкладываются, стили наследуются.
Следуйте методу прогрессивного джипега: страница всегда готова к публикации. Увеличивается степень проработанности, а общий вид всегда ясен.
Наследование стилей
Артемий Лебедев. Метод прогрессивного джипега
Чем больше кода, тем легче ошибиться. Избегайте избыточной вложенности, выносите повторяющиеся стили в классы, используйте наследование. Стремитесь делать код проще, насколько возможно, пока это не вредит функциональности и не противоречит здравому смыслу.
Лайфхак: отложите вёрстку на пару дней, затем посмотрите на неё свежим взглядом. Вы сразу найдёте, что улучшить в этой вёрстке или в будущих работах.
Наследование стилей
Выборочная стилизация. Классы
Для большинства дизайнерских задач есть подходящие инструменты: теги, атрибуты, стили, селекторы. Изучайте элементы и стили, выбирайте подходящие для своих задач. Это сделает код понятнее и надёжнее: стандартные элементы проверены, предсказуемо выглядят и ведут себя на всех устройствах и браузерах. Интерактивные элементы сразу обладают нужными функциями: кнопки нажимаются, ссылки переходят по страницам.
Элементы. МДН
Нестандартные инпуты
Одинаково оформленный и предсказуемый код быстрее читать, понятно, как добавить элементы и изменить существующие. Это особенно полезно при командной работе.
Следуйте единым правилам во всём коде. Называете классы через подчёркивание? Называйте так всегда и везде. Храните стили для мобильных в отдельном файле? Не пишите их в других местах.
Если в середине пути поняли, что система не самая удачная — не спешите всё переделывать, обычно это того не стоит. Сделайте заметку на будущее и в следующий раз выберите более удачную систему.
Лайфхак: как называть классы
Фёдор Борщёв. Не сомневаться в принятых решениях
Плохой старт
<header> <nav class="nav"> <a href="…">Главная</a> <a href="…">Каталог</a> <button type="button" class="btnCart"> Корзина <span class="counter">9+</span> </button> </nav> </header>
Хороший старт
<header> <!-- … --> </header> <body> <!-- … --> <body> <footer> <!-- … --> <footer>
Избыточно
<nav class="nav"> <li class="nav__item"> <a class="nav__itemLink" href="…">Главная</a> </li> <li class="nav__item"> <a class="nav__itemLink" href="…">Каталог</a> </li> <li class="nav__item"> <a class="nav__itemLink" href="…">Контакты</a> </li> </ul> </nav>
Нормально
<nav сlass="nav"> <a href="…">Главная</a> <a href="…">Каталог</a> <a href="…">Контакты</a> </nav>
Неправильно
<p class="headingLarge">Ближайшие мероприятия</p> <div class="button">Купить</div> <p><u>Все статьи автора</u></a>
Правильно
<h1>Ближайшие мероприятия</h1> <button type="button" class="button">Купить</button> <a href="…">Все статьи автора</a>
Непредсказуемо
<a class="item promoItem"> <p class="item-title">…</p> <p class="itemprice">…</p> </a> <div class="feature is-highlighted"> <h3 class="featureTitle">…</h3> <div class="featureText">…</div> </div>
Предсказуемо
<a class="item is__promo"> <p class="item__title">…</p> <p class="item__price">…</p> </a> <div class="feature is__highlighted"> <h3 class="feature__title">…</h3> <div class="feature__text">…</div> </div>
Плохой старт
<header> <nav class="nav"> <a href="…">Главная</a> <a href="…">Каталог</a> <button type="button" class="btnCart"> Корзина <span class="counter">9+</span> </button> </nav> </header>
Хороший старт
<header> <!-- … --> </header> <body> <!-- … --> <body> <footer> <!-- … --> <footer>
Избыточно
<nav class="nav"> <li class="nav__item"> <a class="nav__itemLink" href="…">Главная</a> </li> <li class="nav__item"> <a class="nav__itemLink" href="…">Каталог</a> </li> <li class="nav__item"> <a class="nav__itemLink" href="…">Контакты</a> </li> </ul> </nav>
Нормально
<nav сlass="nav"> <a href="…">Главная</a> <a href="…">Каталог</a> <a href="…">Контакты</a> </nav>
Неправильно
<p class="headingLarge">Ближайшие мероприятия</p> <div class="button">Купить</div> <p><u>Все статьи автора</u></a>
Правильно
<h1>Ближайшие мероприятия</h1> <button type="button" class="button">Купить</button> <a href="…">Все статьи автора</a>
Непредсказуемо
<a class="item promoItem"> <p class="item-title">…</p> <p class="itemprice">…</p> </a> <div class="feature is-highlighted"> <h3 class="featureTitle">…</h3> <div class="featureText">…</div> </div>
Предсказуемо
<a class="item is__promo"> <p class="item__title">…</p> <p class="item__price">…</p> </a> <div class="feature is__highlighted"> <h3 class="feature__title">…</h3> <div class="feature__text">…</div> </div>
В вёрстке нет строгих ограничений, можно сверстать что угодно почти как угодно. Но есть принципы, которые упростят верстальщику жизнь, сэкономят время и помогут избежать ошибок.
Верстайте от общего к частному, чтобы видеть надсистему и связи модулей, выбирать оптимальные решения и меньше повторяться в коде. ХТМЛ и ЦСС заточены под этот принцип: теги вкладываются, стили наследуются.
Следуйте методу прогрессивного джипега: страница всегда готова к публикации. Увеличивается степень проработанности, а общий вид всегда ясен.
Наследование стилей
Артемий Лебедев. Метод прогрессивного джипега
Чем больше кода, тем легче ошибиться. Избегайте избыточной вложенности, выносите повторяющиеся стили в классы, используйте наследование. Стремитесь делать код проще, насколько возможно, пока это не вредит функциональности и не противоречит здравому смыслу.
Лайфхак: отложите вёрстку на пару дней, затем посмотрите на неё свежим взглядом. Вы сразу найдёте, что улучшить в этой вёрстке или в будущих работах.
Наследование стилей
Выборочная стилизация. Классы
Для большинства дизайнерских задач есть подходящие инструменты: теги, атрибуты, стили, селекторы. Изучайте элементы и стили, выбирайте подходящие для своих задач. Это сделает код понятнее и надёжнее: стандартные элементы проверены, предсказуемо выглядят и ведут себя на всех устройствах и браузерах. Интерактивные элементы сразу обладают нужными функциями: кнопки нажимаются, ссылки переходят по страницам.
Элементы. МДН
Нестандартные инпуты
Одинаково оформленный и предсказуемый код быстрее читать, понятно, как добавить элементы и изменить существующие. Это особенно полезно при командной работе.
Следуйте единым правилам во всём коде. Называете классы через подчёркивание? Называйте так всегда и везде. Храните стили для мобильных в отдельном файле? Не пишите их в других местах.
Если в середине пути поняли, что система не самая удачная — не спешите всё переделывать, обычно это того не стоит. Сделайте заметку на будущее и в следующий раз выберите более удачную систему.
Лайфхак: как называть классы
Фёдор Борщёв. Не сомневаться в принятых решениях
Ваш дизайн может работать не на всех размерах экрана. На мобильном телефоне может не поместиться меню или некрасиво переноситься текст. Чтобы адаптировать страницу к мобильному телефону и другим устройствам, введём понятие «точек излома».
Точка излома, breakpoint, — ширина экрана, при которой одна версия вёрстки сменяется на другую. Например, при ширине экрана менее 991 пикселя меню могло бы занять всю ширину экрана и стать прокручиваемым. Используем для этого медиавыражения.
Чтобы решить, при каких условиях медиавыражения должны срабатывать, используют два подхода: по устройствам и по содержимому. В первом случае мы решаем, что у страницы есть отдельный дизайн для разных устройств, экранов: например, мобильных, лаптопов и десктопов. Затем для каждого из устройств определяем точки излома.
В большинстве популярных ЦСС‑фреймворков эти точки выглядят так:
| Узкие мобильные | < 576 пк |
| Мобильные | < 768 пк |
| Лаптопы | ≥ 768 пк |
| Десктопы | ≥ 992 пк |
| Широкие десктопы | ≥ 1400 пк |
Вы можете использовать любые другие значения, опираясь на статистику экранов посетителей сайта или на значения, заданные в вашем ЦСС‑фреймворке.
Например, на сайте бюро мы остановились на трёх типах устройств:
| Мобильные | ≤ 960 пк |
| Лаптопы | > 960 пк |
| Десктопы | > 1400 пк |
Советуем использовать как можно меньше устройств и точек излома. Чем их больше, тем больше вариантов раскладки нужно придумать, сверстать и проверить. Если шапка и подвал адаптируются к двум устройствам, это даёт
Медиавыражения
Ваш дизайн может работать не на всех размерах экрана. На мобильном телефоне может не поместиться меню или некрасиво переноситься текст. Чтобы адаптировать страницу к мобильному телефону и другим устройствам, введём понятие «точек излома».
Точка излома, breakpoint, — ширина экрана, при которой одна версия вёрстки сменяется на другую. Например, при ширине экрана менее 991 пикселя меню могло бы занять всю ширину экрана и стать прокручиваемым. Используем для этого медиавыражения.
Чтобы решить, при каких условиях медиавыражения должны срабатывать, используют два подхода: по устройствам и по содержимому. В первом случае мы решаем, что у страницы есть отдельный дизайн для разных устройств, экранов: например, мобильных, лаптопов и десктопов. Затем для каждого из устройств определяем точки излома.
В большинстве популярных ЦСС‑фреймворков эти точки выглядят так:
| Узкие мобильные | < 576 пк |
| Мобильные | < 768 пк |
| Лаптопы | ≥ 768 пк |
| Десктопы | ≥ 992 пк |
| Широкие десктопы | ≥ 1400 пк |
Вы можете использовать любые другие значения, опираясь на статистику экранов посетителей сайта или на значения, заданные в вашем ЦСС‑фреймворке.
Например, на сайте бюро мы остановились на трёх типах устройств:
| Мобильные | ≤ 960 пк |
| Лаптопы | > 960 пк |
| Десктопы | > 1400 пк |
Советуем использовать как можно меньше устройств и точек излома. Чем их больше, тем больше вариантов раскладки нужно придумать, сверстать и проверить. Если шапка и подвал адаптируются к двум устройствам, это даёт
Медиавыражения
Приведём примеры вёрстки типичных шапок, меню и подвалов сайтов. Сосредоточимся только на раскладке элементов, оставив типографику на усмотрение читателю.
Одни и те же элементы можно сверстать, используя разные способы: гриды, флексбоксы или строчные элементы. Поэтому вёрстка в этой и последующих главах — это не эталоны, высеченные в камне, а лишь примеры решения типовых задач в вёрстке.
Приведём примеры вёрстки типичных шапок, меню и подвалов сайтов. Сосредоточимся только на раскладке элементов, оставив типографику на усмотрение читателю.
Одни и те же элементы можно сверстать, используя разные способы: гриды, флексбоксы или строчные элементы. Поэтому вёрстка в этой и последующих главах — это не эталоны, высеченные в камне, а лишь примеры решения типовых задач в вёрстке.
Типичная шапка из трёх элементов: логотипа, меню и телефона
В контейнере <nav> — navigation — собирают ссылки для навигации по сайту
Если не свешивать круглый логотип за линию сетки, он будет казаться сдвинутым
Шапка и подвал сайта чаще всего имеют форму строк, прижатых к верху и низу страницы
Мы используем max‑content, а не min‑content, чтобы пункты меню из нескольких слов не переносились
Аналогично можно было бы выделить текущий пункт меню начертанием или цветом
По умолчанию содержимое грид‑ячеек выравнивается по верхнему краю
В гридах align‑items управляет выравниванием по вертикали, а justify‑items — по горизонтали
В гридах justify‑self управляет выравниванием внутри ячейки
Иногда подчёркивание делают с помощью border‑bottom, background‑image или box‑shadow
Сверстаем простую шапку «в линию», встречающуюся на большинстве сайтов. Сосредоточимся только на раскладке, опустив типографику и стили для сброса.
Вёрстка с чистого листа
Начнём с разметки. Соберём шапку в контейнере <header>. Для логотипа возьмём див с картинкой, завёрнутой в ссылку на главную страницу. Меню соберём в ненумерованный список <ul>. Телефон сделаем кликабельной ссылкой с хитрым протоколом tel:
<header class="header">
<div class="logo">
<a href="/">
<img src="logo.svg">
</a>
</div>
<nav class="nav">
<ul>
<li class="nav__item">
<a href="/products/">Продукция</a>
</li>
<li class="nav__item">
<a href="/services/">Услуги</a>
</li>
<li class="nav__item is__active">
<a href="/blog/">Блог</a>
</li>
<li class="nav__item">
<a href="/contacts/">Контакты</a>
</li>
</ul>
</nav>
<div class="tel">
<a href="tel:+74954005050">
+7 495 400‑50‑50
</a>
</div>
</header>
Стилизуем логотип. Зафиксируем его размеры и свесим кружок логотипа за линии сетки:
.logo {
width: 40px;
height: 40px;
margin: 0 -5px;
}
Стилизуем меню. Включим гриды и разложим пункты меню по колонкам:
.nav ul {
display: grid;
grid-auto-flow: column;
}
Определим автоматические колонки по максимальному содержимому и зададим отступ между пунктами меню:
.nav ul {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 20px;
}
Стилизуем пункты меню. Увеличим кликабельную область ссылок и стилизуем текущий пункт меню:
.nav ul {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 20px;
align-items: center;
}
.nav__item a {
position: relative;
z-index: 1;
}
.nav__item a::before {
content: '';
position: absolute;
inset: -3px -7px;
z-index: -1;
}
.nav__item.is__active a {
color: #fff;
text-decoration: none;
}
.nav__item.is__active a::before {
background-color: #ff5722;
border-radius: 8px;
}
Настроим раскладку шапки в целом. Включим гриды и разложим логотип, меню и телефон по колонкам. Заодно добавим шапке верхний падинг и сделаем её контейнером‑обёрткой, чтобы она не прилипала к краям и правильно управляла своей шириной:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding-top: 10px;
}<header class="header layoutContainer">
<!-- … -->
</header>Обёртка для страницы
Отцентрируем всё по вертикали:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding-top: 10px;
align-items: center;
line-height: 1;
}
Отожмём телефон к правому краю:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding: 10px;
align-items: center;
}
.header .tel {
justify-self: end;
}Уберём подчеркивания у ссылок в шапке:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding: 10px;
align-items: center;
}
.header .tel {
justify-self: end;
}
.header a {
text-decoration: none;
}Типичная шапка из трёх элементов: логотипа, меню и телефона
В контейнере <nav> — navigation — собирают ссылки для навигации по сайту
Если не свешивать круглый логотип за линию сетки, он будет казаться сдвинутым
Шапка и подвал сайта чаще всего имеют форму строк, прижатых к верху и низу страницы
Мы используем max‑content, а не min‑content, чтобы пункты меню из нескольких слов не переносились
Аналогично можно было бы выделить текущий пункт меню начертанием или цветом
По умолчанию содержимое грид‑ячеек выравнивается по верхнему краю
В гридах align‑items управляет выравниванием по вертикали, а justify‑items — по горизонтали
В гридах justify‑self управляет выравниванием внутри ячейки
Иногда подчёркивание делают с помощью border‑bottom, background‑image или box‑shadow
Сверстаем простую шапку «в линию», встречающуюся на большинстве сайтов. Сосредоточимся только на раскладке, опустив типографику и стили для сброса.
Вёрстка с чистого листа
Начнём с разметки. Соберём шапку в контейнере <header>. Для логотипа возьмём див с картинкой, завёрнутой в ссылку на главную страницу. Меню соберём в ненумерованный список <ul>. Телефон сделаем кликабельной ссылкой с хитрым протоколом tel:
<header class="header">
<div class="logo">
<a href="/">
<img src="logo.svg">
</a>
</div>
<nav class="nav">
<ul>
<li class="nav__item">
<a href="/products/">Продукция</a>
</li>
<li class="nav__item">
<a href="/services/">Услуги</a>
</li>
<li class="nav__item is__active">
<a href="/blog/">Блог</a>
</li>
<li class="nav__item">
<a href="/contacts/">Контакты</a>
</li>
</ul>
</nav>
<div class="tel">
<a href="tel:+74954005050">
+7 495 400‑50‑50
</a>
</div>
</header>
Стилизуем логотип. Зафиксируем его размеры и свесим кружок логотипа за линии сетки:
.logo {
width: 40px;
height: 40px;
margin: 0 -5px;
}
Стилизуем меню. Включим гриды и разложим пункты меню по колонкам:
.nav ul {
display: grid;
grid-auto-flow: column;
}
Определим автоматические колонки по максимальному содержимому и зададим отступ между пунктами меню:
.nav ul {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 20px;
}
Стилизуем пункты меню. Увеличим кликабельную область ссылок и стилизуем текущий пункт меню:
.nav ul {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 20px;
align-items: center;
}
.nav__item a {
position: relative;
z-index: 1;
}
.nav__item a::before {
content: '';
position: absolute;
inset: -3px -7px;
z-index: -1;
}
.nav__item.is__active a {
color: #fff;
text-decoration: none;
}
.nav__item.is__active a::before {
background-color: #ff5722;
border-radius: 8px;
}
Настроим раскладку шапки в целом. Включим гриды и разложим логотип, меню и телефон по колонкам. Заодно добавим шапке верхний падинг и сделаем её контейнером‑обёрткой, чтобы она не прилипала к краям и правильно управляла своей шириной:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding-top: 10px;
}<header class="header layoutContainer">
<!-- … -->
</header>Обёртка для страницы
Отцентрируем всё по вертикали:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding-top: 10px;
align-items: center;
line-height: 1;
}
Отожмём телефон к правому краю:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding: 10px;
align-items: center;
}
.header .tel {
justify-self: end;
}Уберём подчеркивания у ссылок в шапке:
.header {
display: grid;
grid-template-columns: min-content max-content 1fr;
column-gap: 20px;
padding: 10px;
align-items: center;
}
.header .tel {
justify-self: end;
}
.header a {
text-decoration: none;
}Визитка — это страница с текстом о себе. Часто визитку совмещают с резюме, добавляя опыт работы, навыки, доклады и выступления на конференциях. Большинство визиток состоит из текста, списка ссылок и фотографии автора, задающей настроение. Они не очень объёмные, но с типографическими изысками.
Визитка — это страница с текстом о себе. Часто визитку совмещают с резюме, добавляя опыт работы, навыки, доклады и выступления на конференциях. Большинство визиток состоит из текста, списка ссылок и фотографии автора, задающей настроение. Они не очень объёмные, но с типографическими изысками.
Добавим мобильную версию. Зафиксируем поля страницы, сделаем одну колонку и максимум рядов по содержимому. Порядок элементов не меняем.
@media (width < 768px) {
.layoutContainer {
padding: 20px 20px 30px; /* Меняем резиновые поля на фиксированные */
}
.about {
grid-template-columns: 1fr; /* Одна колонка */
grid-auto-flow: row; /* Столько рядов, сколько нужно, с высотой по содержимому */
grid-auto-rows: max-content;
gap: 20px;
}
.about .photo {
width: 100%; /* Тянем фотографию на всю ширину экрана */
}
.about h1 {
font-size: 14.5vw; /* Увеличиваем кегль заголовка */
}
.about .text > :last-child {
order: -1; /* На мобильных первым идёт второй абзац */
}
}
Учусь на второй ступени Школы дизайнеров Бюро Горбунова.
Проектирую сайты и мобильные приложения, использую ФФФ, «травлю леску».
Добавим мобильную версию. Зафиксируем поля страницы, сделаем одну колонку и максимум рядов по содержимому. Порядок элементов не меняем.
@media (width < 768px) {
.layoutContainer {
padding: 20px 20px 30px; /* Меняем резиновые поля на фиксированные */
}
.about {
grid-template-columns: 1fr; /* Одна колонка */
grid-auto-flow: row; /* Столько рядов, сколько нужно, с высотой по содержимому */
grid-auto-rows: max-content;
gap: 20px;
}
.about .photo {
width: 100%; /* Тянем фотографию на всю ширину экрана */
}
.about h1 {
font-size: 14.5vw; /* Увеличиваем кегль заголовка */
}
.about .text > :last-child {
order: -1; /* На мобильных первым идёт второй абзац */
}
}
Учусь на второй ступени Школы дизайнеров Бюро Горбунова.
Проектирую сайты и мобильные приложения, использую ФФФ, «травлю леску».
Дизайнеры, редакторы, руководители и программисты показывают в портфолио то, что сделали, в чём участвовали и чего добились. Поэтому большинство портфолио — это набор иллюстраций с подписями и ссылками. Продвинутое портфолио — это витрина, где у каждого проекта есть отдельная страница с рассказом о работе над ним.
Чаще всего встречаются характерные виды вёрстки портфолио: «лента», «плитка» и «рубрикатор».
Лента состоит из типовых модулей — карточек проектов. Чаще всего в хронологическом порядке, где новое сверху.
Плитка представляет собой модульную кладку из прямоугольников, иногда разных размеров и пропорций. В отличие от ленты, модули расположены не друг под другом, а плотно упакованы по рядам — слева направо, сверху вниз.
Рубрикатор составлен из модулей с разными форматами по рубрикам: например последний крупный проект, плитка, новости или логотипы клиентов.
Артём Горбунов. Типографика и вёрстка. Главная страница
Дизайнеры, редакторы, руководители и программисты показывают в портфолио то, что сделали, в чём участвовали и чего добились. Поэтому большинство портфолио — это набор иллюстраций с подписями и ссылками. Продвинутое портфолио — это витрина, где у каждого проекта есть отдельная страница с рассказом о работе над ним.
Чаще всего встречаются характерные виды вёрстки портфолио: «лента», «плитка» и «рубрикатор».
Лента состоит из типовых модулей — карточек проектов. Чаще всего в хронологическом порядке, где новое сверху.
Плитка представляет собой модульную кладку из прямоугольников, иногда разных размеров и пропорций. В отличие от ленты, модули расположены не друг под другом, а плотно упакованы по рядам — слева направо, сверху вниз.
Рубрикатор составлен из модулей с разными форматами по рубрикам: например последний крупный проект, плитка, новости или логотипы клиентов.
Артём Горбунов. Типографика и вёрстка. Главная страница
Добавим мобильную версию «в лоб» — перейдём на две колонки:
.projects {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: max-content;
column-gap: 20px;
row-gap: 20px;
}
.project {
padding: 10px 10px 20px;
border-radius: 4px;
background: #f3f5f4;
min-height: 33vh;
overflow: hidden;
}
.project.sizeS {
grid-column: auto / span 1;
}
.project.sizeM {
grid-column: auto / span 2;
}
.project.sizeL {
grid-column: auto / span 4;
}Добавим мобильную версию «в лоб» — перейдём на две колонки:
.projects {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: max-content;
column-gap: 20px;
row-gap: 20px;
}
.project {
padding: 10px 10px 20px;
border-radius: 4px;
background: #f3f5f4;
min-height: 33vh;
overflow: hidden;
}
.project.sizeS {
grid-column: auto / span 1;
}
.project.sizeM {
grid-column: auto / span 2;
}
.project.sizeL {
grid-column: auto / span 4;
}Задача промостраницы — продать товар или услугу, собрать контактную информацию посетителей. Наполнение зависит от того, что и кому продаём. Обычно это разные комбинации картинок продукта и текста о его преимуществах.
На промах обычно размещают призыв к действию (call to action) — модуль с кнопкой покупки, формой регистрации или телефоном для связи.
Разберём вёрстку промостраницы на примере бюро.
Задача промостраницы — продать товар или услугу, собрать контактную информацию посетителей. Наполнение зависит от того, что и кому продаём. Обычно это разные комбинации картинок продукта и текста о его преимуществах.
На промах обычно размещают призыв к действию (call to action) — модуль с кнопкой покупки, формой регистрации или телефоном для связи.
Разберём вёрстку промостраницы на примере бюро.
Иногда нет времени или возможности верстать сложную типографику заголовка.
Можно сделать заголовок картинкой, но это плохо для поисковых роботов и программ чтения с экрана.
Трюк: разместите поверх картинки визуально скрытый «честный» заголовок. Поставьте текст как можно точнее по картинке, чтобы выделение текста выглядело адекватно.
Скройте текст, сделав его прозрачным.
Опасность. Используйте трюк исключительно для дублирования текста, содержащегося на картинке. Намеренное скрытие текста от пользователей называется гостингом (ghosting) и сурово наказывается поисковиками, вплоть до исключения сайта из поисковой выдачи.
<div class="fakeHeading">
<!-- По возможности используйте СВГ -->
<img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами">
<h1 class="fakeHeadingHidden">
Переговоры <br>
и отношения <br>
с клиентами
</h1>
</div>
.fakeHeading {
max-width: 100%;
position: relative;
overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}
.fakeHeadingImg {
display: block;
width: 100%;
}
.fakeHeadingHidden {
position: absolute;
top: 0;
left: 0;
font-size: 5vw;
color: transparent;
/* Подгоняем текст по к картинке */
margin: 0;
text-transform: uppercase;
font-size: 12.2vw;
line-height: 1.05;
}
Иногда нет времени или возможности верстать сложную типографику заголовка.
Можно сделать заголовок картинкой, но это плохо для поисковых роботов и программ чтения с экрана.
Трюк: разместите поверх картинки визуально скрытый «честный» заголовок. Поставьте текст как можно точнее по картинке, чтобы выделение текста выглядело адекватно.
Скройте текст, сделав его прозрачным.
Опасность. Используйте трюк исключительно для дублирования текста, содержащегося на картинке. Намеренное скрытие текста от пользователей называется гостингом (ghosting) и сурово наказывается поисковиками, вплоть до исключения сайта из поисковой выдачи.
<div class="fakeHeading">
<!-- По возможности используйте СВГ -->
<img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами">
<h1 class="fakeHeadingHidden">
Переговоры <br>
и отношения <br>
с клиентами
</h1>
</div>
.fakeHeading {
max-width: 100%;
position: relative;
overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}
.fakeHeadingImg {
display: block;
width: 100%;
}
.fakeHeadingHidden {
position: absolute;
top: 0;
left: 0;
font-size: 5vw;
color: transparent;
/* Подгоняем текст по к картинке */
margin: 0;
text-transform: uppercase;
font-size: 12.2vw;
line-height: 1.05;
}
Залипающая кнопка. Чтобы кнопка оставалась на виду при прокрутке, её можно зафиксировать с помощью position: fixed. Но чтобы ограничить диапазон прокрутки и кнопка не залезала в шапку и подвал, лучше использовать position: sticky в «шахте».
<div class="promo">
<!-- … -->
<div class="stickyShaft">
<div class="stickyContent">…</div>
</div>
</div>
.stickyShaft {
position: absolute;
right: 32px;
bottom: 144px;
top: 75vh;
width: 0;
}
.stickyContent {
position: sticky;
top: calc(100vh - 75px);
}
Залипающая кнопка. Чтобы кнопка оставалась на виду при прокрутке, её можно зафиксировать с помощью position: fixed. Но чтобы ограничить диапазон прокрутки и кнопка не залезала в шапку и подвал, лучше использовать position: sticky в «шахте».
<div class="promo">
<!-- … -->
<div class="stickyShaft">
<div class="stickyContent">…</div>
</div>
</div>
.stickyShaft {
position: absolute;
right: 32px;
bottom: 144px;
top: 75vh;
width: 0;
}
.stickyContent {
position: sticky;
top: calc(100vh - 75px);
}
Современная интерактивная статья содержит фотографии, инфографику, видео и аудио, анимацию, перебивки и сноски разного формата — для красоты, интересной и понятной подачи материала.
Разберём приёмы вёрстки интерактивной статьи.
Вёрстка базовой текстовой страницы:
Текстовые модули
Захари Смол и Рамси Тейлор. How The Legend of Zelda Changed the Game
Современная интерактивная статья содержит фотографии, инфографику, видео и аудио, анимацию, перебивки и сноски разного формата — для красоты, интересной и понятной подачи материала.
Разберём приёмы вёрстки интерактивной статьи.
Вёрстка базовой текстовой страницы:
Текстовые модули
Захари Смол и Рамси Тейлор. How The Legend of Zelda Changed the Game
Сайдноуты — это примечания на полях. Убедитесь, что размер полей достаточен и поставьте туда сайдноуты абсолютом:
/* Абсолют и вынос на поля только когда позволяет ширина экрана */
@media (width > 768px) {
.layer {
--sideWidth: 5em; /* Ширину сайдноута — в переменную, чтобы не повторяться */
position: relative; /* Для работы абсолютного позиционирования внутри слоя */
padding-right: calc(var(--sideWidth) + 1em); /* Поля больше ширины сайдноута, чтобы был отступ от текста */
}
.sidenote {
width: var(--sideWidth);
position: absolute;
right: 0;
}
}
<div class="layer">
<p>…</p>
<div class="sidenote">
<a href="…">Интерфейс — зло</a>
</div>
<p>…</p>
<p>…</p>
</div>
Сайдноуты — это примечания на полях. Убедитесь, что размер полей достаточен и поставьте туда сайдноуты абсолютом:
/* Абсолют и вынос на поля только когда позволяет ширина экрана */
@media (width > 768px) {
.layer {
--sideWidth: 5em; /* Ширину сайдноута — в переменную, чтобы не повторяться */
position: relative; /* Для работы абсолютного позиционирования внутри слоя */
padding-right: calc(var(--sideWidth) + 1em); /* Поля больше ширины сайдноута, чтобы был отступ от текста */
}
.sidenote {
width: var(--sideWidth);
position: absolute;
right: 0;
}
}
<div class="layer">
<p>…</p>
<div class="sidenote">
<a href="…">Интерфейс — зло</a>
</div>
<p>…</p>
<p>…</p>
</div>
У сайдноутов с абсолютным позиционированием есть проблема.
Чтобы на широком экране они встали на поля, в разметке сайдноут должен стоять над текстом, к которому относится.
На узком экране, когда абсолют не применяется, сайдноут остаётся над текстом и это неправильно по смыслу, ведь сайдноут — примечание к тексту.
<div class="layer">
<div class="sidenote">…</div>
<p>…</p>
</div>
Самый простой способ исправить это без программирования — продублировать сайдноуты в разметке над и под текстом, на узком экране прятать один и показывать другой.
В идеале — запрограммировать сайт, чтобы он создавал такие копии сайдноутов автоматически.
<div class="layer">
<div class="sidenote">…</div>
<p>…</p>
<div class="sidenote is__sm">…</div>
</div>
.sidenote:not(.is__sm) {
display: none;
}
@media (width > 768px) {
.sidenote.is__sm {
display: none;
}
.sidenote:not(.is__sm) {
display: block;
}
}
У сайдноутов с абсолютным позиционированием есть проблема.
Чтобы на широком экране они встали на поля, в разметке сайдноут должен стоять над текстом, к которому относится.
На узком экране, когда абсолют не применяется, сайдноут остаётся над текстом и это неправильно по смыслу, ведь сайдноут — примечание к тексту.
<div class="layer">
<div class="sidenote">…</div>
<p>…</p>
</div>
Самый простой способ исправить это без программирования — продублировать сайдноуты в разметке над и под текстом, на узком экране прятать один и показывать другой.
В идеале — запрограммировать сайт, чтобы он создавал такие копии сайдноутов автоматически.
<div class="layer">
<div class="sidenote">…</div>
<p>…</p>
<div class="sidenote is__sm">…</div>
</div>
.sidenote:not(.is__sm) {
display: none;
}
@media (width > 768px) {
.sidenote.is__sm {
display: none;
}
.sidenote:not(.is__sm) {
display: block;
}
}
Для цитат есть специальные теги, советуем использовать именно их: страница будет понятнее поисковым роботам и программам чтения с экрана.
Цитаты внутри текста верстают тегом q.
Тег оборачивает содержимое в кавычки, советуем сразу отключить это в ЦСС и расставлять кавычки вручную. Так проще работать с вложенными кавычками: когда внутри цитаты есть слова в кавычках, используют другой вид кавычек. А главное — кавычки в тексте не потеряются при копировании, в отличие от ЦСС‑кавычек.
<p>
М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>
q {
/* Отключаем ЦСС-кавычки */
quotes: none;
/* Стилизуем по вкусу */
font-style: italic;
}Пример: Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора
М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»
.
Для цитат есть специальные теги, советуем использовать именно их: страница будет понятнее поисковым роботам и программам чтения с экрана.
Цитаты внутри текста верстают тегом q.
Тег оборачивает содержимое в кавычки, советуем сразу отключить это в ЦСС и расставлять кавычки вручную. Так проще работать с вложенными кавычками: когда внутри цитаты есть слова в кавычках, используют другой вид кавычек. А главное — кавычки в тексте не потеряются при копировании, в отличие от ЦСС‑кавычек.
<p>
М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>
q {
/* Отключаем ЦСС-кавычки */
quotes: none;
/* Стилизуем по вкусу */
font-style: italic;
}Пример: Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора
М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»
.
Можно хранить аудиофайлы у себя и использовать стандартный плеер браузера:
<audio src="./audio.mp3" controls>
</audio>Или использовать для создания плеера стороннюю библиотеку. Например, «Жуэль» Ильи Бирмана:
<a href="./dd-34.mp3" class="jouele">
Думаем дальше № 34 — «Раньше вообще без штанов бегали» с Женей Арутюновым
</a>
Дизайн стандартного плеера отличается в разных браузерах и повлиять на него из ЦСС толком нельзя
Библиотеки дают простор для стилизации плеера и дополнительные функции, вроде объединения треков в плейлист.
Дизайн стандартного плеера отличается в разных браузерах и повлиять на него из ЦСС толком нельзя
Библиотеки дают простор для стилизации плеера и дополнительные функции, вроде объединения треков в плейлист.
Можно хранить аудиофайлы у себя и использовать стандартный плеер браузера:
<audio src="./audio.mp3" controls>
</audio>Или использовать для создания плеера стороннюю библиотеку. Например, «Жуэль» Ильи Бирмана:
<a href="./dd-34.mp3" class="jouele">
Думаем дальше № 34 — «Раньше вообще без штанов бегали» с Женей Арутюновым
</a>
Социокнопки позволяют поделиться страницей в соцсетях и чатах.
Кнопки можно сверстать самому, но придётся изучить нюансы настройки кнопки для каждой соцсети.
Быстрее и проще взять готовое решение. Например, в «Лайкли» Ильи Бирмана создание кнопок максимально упрощено: подключите библиотеку, создайте элементы с особыми классами и всё заработает само. Есть несколько готовых тем оформления и возможность самому стилизовать кнопки под вид сайта.
<script src="./likely.js"></script>
<link rel="stylesheet" href="./likely.css">
<!-- … -->
<div class="likely">
<div class="telegram">Отправить</div>
<div class="vkontakte">Поделиться</div>
<div class="xcom"></div>
<div class="facebook"></div>
<div class="linkedin"></div>
<div class="whatsapp"></div>
<div class="viber"></div>
<div class="pinterest">Запинить</div>
</div>
Лайкли: социокнопки, которые не стыдно поставить. Подключение и инструкция
Социокнопки позволяют поделиться страницей в соцсетях и чатах.
Кнопки можно сверстать самому, но придётся изучить нюансы настройки кнопки для каждой соцсети.
Быстрее и проще взять готовое решение. Например, в «Лайкли» Ильи Бирмана создание кнопок максимально упрощено: подключите библиотеку, создайте элементы с особыми классами и всё заработает само. Есть несколько готовых тем оформления и возможность самому стилизовать кнопки под вид сайта.
Лайкли: социокнопки, которые не стыдно поставить. Подключение и инструкция
<script src="./likely.js"></script>
<link rel="stylesheet" href="./likely.css">
<!-- … -->
<div class="likely">
<div class="telegram">Отправить</div>
<div class="vkontakte">Поделиться</div>
<div class="xcom"></div>
</div>