Используя таблицу интегралов элементарных функций, получим: турбулентность волнообразна. Волна доступна. Теорема традиционно искажает неопровержимый вектор.
🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
между важными местами
Shift
между
разворотами
разворотами
ХТМЛ.
Вёрстка сайтов
Издательство Бюро Горбунова
2021
ХТМЛ.
Вёрстка сайтов
Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
П52
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
удк 004.42
ббк З973.42
П52
П52
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Знакомство с ХТМЛ
ХТМЛ‑файл в текстовом редакторе
Что такое веб‑страница
Любая веб‑страница — это просто текстовый файл с особой разметкой.
Чтобы создать страницу, достаточно создать у себя на компьютере файл с любым именем и расширением .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 -->
Скрыт 1 разворот
Скрыт 1 разворот
<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, в нём можно настроить что угодно. О нём расскажем позже.
Все атрибуты ХТМЛ. МДН
Скрыт 1 разворот
Скрыт 1 разворот
Знакомство с ЦСС
ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.
ЦСС‑код можно писать прямо внутри ХТМЛ‑файла в особом теге 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>
Попробуйте скопировать код и поэкспериментировать со свойствами. Например, изменить кегли, шрифты и цвета
Скрыт 1 разворот
Скрыт 1 разворот
Лайфхак: как называть классы
Чтобы код было проще читать и понимать, имена классов делают наглядными.
В именах избегают случайных наборов букв, аббревиатур, сокращений и всего, что может как‑либо запутать.
Классы не принято называть по‑русски латиницей. Такие имена тяжело читать, а некоторые русские буквы можно написать латиницей по‑разному, что увеличивает вероятность ошибок.
/* Плохо */
.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, отступы поменялись на всех страницах.
В более сложных проектах бывает несколько файлов со стилями, расположенных где угодно, даже на другом сайте.
Скрыто 3 разворота
Скрыто 3 разворота
Блочные и строчные элементы
В ХТМЛ есть два основных типа элементов.
Блочные элементы занимают всю доступную ширину родителя и по умолчанию располагаются как этажи друг над другом, но могут раскладываться и по сетке. Примеры блочных элементов: заголовки, абзацы и списки.
Строчные элементы занимают ровно столько места, сколько нужно их содержимому, выстраиваются друг за другом и переносятся как строки. Например, так ведут себя слова, ссылки и картинки в тексте. Строчные элементы обычно помещаются внутри блочных.
Можно изменить тип элемента: заставить слово вести себя как блок, а заголовок — как слово в строке. За это отвечает свойство 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.
Отладчик мобильной версии в Сафари открывается с помощью
Что дальше
Инструментами разработчика можно отладить анимацию, скорость загрузки страницы, плавность прокрутки и многое другое. Об этом пишут разработчики инструментов у себя в документации и блогах:
1
Модули
Текстовые модули
Иллюстрации
Таблицы
Формы
Псевдоклассы
Псевдоэлементы :after и :before
1
Модули
Текстовые модули
Иллюстрации
Таблицы
Формы
Псевдоклассы
Псевдоэлементы :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
Скрыто 5 разворотов
Скрыто 5 разворотов
Кегль и интерлиньяж
В ЦСС кегль задаётся свойством 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%;
}Обратите внимание: значения в рамочке в этой книге можно менять, попробуйте их подвигать
Скрыт 1 разворот
Скрыт 1 разворот
Лайфхак: em или rem?
И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:
20px
1.2em
20px×1.224px
20px×1.224px
0.625em
24px×0.62515px
0.8em
15px×0.812px
15px×0.812px
20px
1.2rem
20px×1.224px
20px×1.224px
0.625rem
20px×0.62512.5px
20px×0.62512.5px
0.8rem
20px×0.816px
20px×0.816px
Для независимых компонентов лучше подойдёт rem: не придётся беспокоиться, что родительский элемент повлияет на кегль в компоненте. Если вы, наоборот, хотите, чтобы вложенность влияла на кегль, берите em.
При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.
Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em
Лайфхак: em или rem?
И em, и rem — относительные величины. Разница между ними в том, что em считается относительно кегля родительского элемента, а rem — относительно корневого. Сравните:
20px
1.2em
20px×1.224px
20px×1.224px
0.625em
24px×0.62515px
0.8em
15px×0.812px
15px×0.812px
20px
1.2rem
20px×1.224px
20px×1.224px
0.625rem
20px×0.62512.5px
20px×0.62512.5px
0.8rem
20px×0.816px
20px×0.816px
Для независимых компонентов лучше подойдёт rem: не придётся беспокоиться, что родительский элемент повлияет на кегль в компоненте. Если вы, наоборот, хотите, чтобы вложенность влияла на кегль, берите em.
При использовании rem кегль на корневом элементе (:root) лучше не задавать в пикселях. Браузеры позволяют настроить базовый кегль текста. Если задать кегль в пикселях, эта настройка не сработает, cлабовидящим, возможно, придётся зумить страницу.
Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задавайте базовый относительно него. То есть, вместо font-size: 18px — font-size: 1.125em
Скрыто 9 разворотов
Скрыто 9 разворотов
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
Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные
Скрыт 1 разворот
Скрыт 1 разворот
Упражнение: кегль, шрифты, выключка и регистр
Измените ЦСС так, чтобы первая текстовая страница повторила вторую.
.exerciseFontBasics h1 {
Вёрстка
Дизайн
Вёрстка
Дизайн
Упражнение: кегль, шрифты, выключка и регистр
Измените ЦСС так, чтобы первая текстовая страница повторила вторую.
.exerciseFontBasics h1 {
Скрыто 2 разворота
Скрыто 2 разворота
Подчёркивание, зачёркивание и надчёркивание
Дополнительно оформить текст подчёркиванием, зачёркиванием или надчёркиванием можно с помощью 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
Скрыто 2 разворота
Скрыто 2 разворота
Иногда текст нужно дополнительно украсить: наклонить, повернуть или раскрасить. Для примера стилизуем заголовки. Начнём с разметки:
<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; /* И меняем цвет текста на прозрачный */
}
Скрыто 5 разворотов
Скрыто 5 разворотов
Иллюстрации
Иллюстрации верстают тегом 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 в процентах от родителя.
Скрыт 1 разворот
Скрыт 1 разворот
Атрибут alt
У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.
Альт нужен на случай, когда картинка по ссылке недоступна, а ещё для помощи людям с проблемами зрения, которые используют программы для чтения с экрана.
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">На альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из альта в поиске.
Альты отличаются в зависимости от сайта и его задач. Для любовно собираемых вручную статей в блог не грех добавить в альты деталей, а для выдачи интернет‑магазина с тысячами товаров разумнее генерировать альт под поисковое продвижение, включать в него бренд и характеристики товара.
В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.
Атрибут 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"
Скрыто: «Псевдоклассы» и «Псевдоэлементы :after и :before»
Скрыто: «Псевдоклассы» и «Псевдоэлементы :after и :before»
Тест по разделу «Модули»
Для чего мы советуем перечислять несколько шрифтов в 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 нужен на случай, когда картинка по ссылке недоступна, для помощи людям, которые используют программы чтения с экрана, и для поисковых роботов
Ответьте на все вопросы теста, чтобы узнать результат.
2
Расстановка
Позиционирование
Флексбоксы
Гриды
Адаптивная вёрстка
2
Расстановка
Позиционирование
Флексбоксы
Гриды
Адаптивная вёрстка
Позиционирование
Есть несколько способов разложить элементы по странице: позиционирование, флоаты, таблицы, флексбоксы и гриды. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position.
По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:
Static
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Relative
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative;
left: 50px;
top: 80px;
Absolute
Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.
position: absolute;
left: 50px;
top: 80px;По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.
Fixed и sticky
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей, зависая над ней. Закреплённое позиционирование — гибрид между обычным и фиксированным: элемент остаётся на месте, а когда область просмотра достигнет заданных координат — залипает.
position: sticky;
top: 18px;
Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.
Позиционирование
Есть несколько способов разложить элементы по странице: позиционирование, флоаты, таблицы, флексбоксы и гриды. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position.
По умолчанию блоки выстраиваются друг под другом. С помощью position можно изменить это поведение и разместить элемент в любом месте страницы, задав ему координаты свойствами top, right, left и bottom. Есть пять значений свойства:
Static
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Relative
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative;
left: 50px;
top: 80px;
Absolute
Элемент с абсолютным позиционированием располагается по заданным координатам, а из того места, где он был, удаляется.
position: absolute;
left: 50px;
top: 80px;По умолчанию эти координаты отсчитываются от окна. Но если у элемента есть родитель с position: relative или absolute, то координаты будут отсчитываться уже от него.
Fixed и sticky
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей, зависая над ней. Закреплённое позиционирование — гибрид между обычным и фиксированным: элемент остаётся на месте, а когда область просмотра достигнет заданных координат — залипает.
position: sticky;
top: 18px;
Чаще всего используется для «залипающих» элементов. Например, с помощью position: sticky залипают иконки закладки и поиска в нашей книге. Аналогично работает и этот разворот: страница с примером залипает с position: sticky, а другая прокручивается.
position: relative
Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:
.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;
}
position: relative
Относительное позиционирование чаще всего используют для создания контекста, в котором будут абсолютно позиционироваться другие вложенные элементы:
.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;
}
Скрыто 11 разворотов
Скрыто 11 разворотов
Упражнение: применение флексбокса
Перетащите ЦСС‑свойства в селекторы, чтобы пункты меню встали в ряд, а последний пункт меню прижался к правому краю.
nav {
Вёрстка
Дизайн
Вёрстка
Дизайн
Упражнение: применение флексбокса
Перетащите ЦСС‑свойства в селекторы, чтобы пункты меню встали в ряд, а последний пункт меню прижался к правому краю.
nav {
Скрыт 1 разворот
Скрыт 1 разворот
Любую сложную модульную вёрстку можно разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов. Скажем, классическая трёхколонная вёрстка, состоящая из шапки, статьи и двух сайдбаров, раскладывается в 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 {
Скрыто 4 разворота
Скрыто 4 разворота
Чтобы лучше понять флексбоксы, проведём аналогию с авто‑лейаутом из Фигмы
Стрелки в левой колонке отвечают за направление главной оси:
flex‑wrap: wrap
flex‑direction: row
flex‑direction: column
Расстояние между элементами задаётся с помощью gap
Отступы снаружи элементов задаются с помощью свойств контейнера:
padding‑left и padding‑right
padding‑top и padding‑bottom
Выравнивание задаётся комбинацией свойств:
- justify‑content: flex‑start;
align‑items: flex‑start - justify‑content: center;
align‑items: flex‑start - justify‑content: flex‑end;
align‑items: flex‑start - justify‑content: flex‑start;
align‑items: center - justify‑content: center;
align‑items: center - justify‑content: flex‑end;
align‑items: center - justify‑content: flex‑start;
align‑items: flex‑end - justify‑content: center;
align‑items: flex‑end - justify‑content: flex‑end;
align‑items: flex‑end
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;
Чтобы лучше понять флексбоксы, проведём аналогию с авто лейаутом из Фигмы.
Стрелки в левой колонке отвечают за направление главной оси:
- flex‑wrap: wrap
- flex‑direction: row
- flex‑direction: column
Расстояние между элементами задаётся с помощью gap
Отступы снаружи элементов задаются с помощью свойств контейнера:
- padding‑left и padding‑right
- padding‑top и padding‑bottom
Выравнивание задаётся комбинацией свойств:
- justify‑content: flex‑start;
align‑items: flex‑start - justify‑content: center;
align‑items: flex‑start - justify‑content: flex‑end;
align‑items: flex‑start - justify‑content: flex‑start;
align‑items: center - justify‑content: center;
align‑items: center - justify‑content: flex‑end;
align‑items: center - justify‑content: flex‑start;
align‑items: flex‑end - justify‑content: center;
align‑items: flex‑end - justify‑content: flex‑end;
align‑items: flex‑end
Скрыто 20 разворотов
Скрыто 20 разворотов
С помощью 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>Адаптивные колонки на флексбоксах
Скрыто 2 разворота
Скрыто 2 разворота
Если в качестве значений 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>Скрыто 6 разворотов
Скрыто 6 разворотов
Адаптивная вёрстка
В отличие от печатной продукции, нельзя предсказать, в каком формате посетитель увидит вёрстку — на компактном телефоне или на сверхшироком мониторе. Если в каком‑то случае люди не смогут полноценно пользоваться сайтом, они уйдут на другой сайт. Поэтому хороший дизайн и вёрстка стараются адаптироваться под разные условия.
При этом добиться идеальной адаптивности тяжело. Слишком много вариантов, сценариев и условий, в которых может быть открыт сайт. На поддержку некоторых экзотических сценариев уйдёт куча времени и сил. Решение о поддержке тех или иных сценариев принимают на основе анализа посещений сайта с помощью систем аналитики — о них позднее.
В этой главе мы изучим базовую адаптивность для любых сайтов — под размеры и пропорции экрана. Почти все элементы вёрстки сами подстраиваются под ширину экрана, верстальщику достаточно лишь не сломать это поведение и при необходимости скорректировать.
Анализ посетителей сайта
Адаптивная вёрстка
В отличие от печатной продукции, нельзя предсказать, в каком формате посетитель увидит вёрстку — на компактном телефоне или на сверхшироком мониторе. Если в каком‑то случае люди не смогут полноценно пользоваться сайтом, они уйдут на другой сайт. Поэтому хороший дизайн и вёрстка стараются адаптироваться под разные условия.
При этом добиться идеальной адаптивности тяжело. Слишком много вариантов, сценариев и условий, в которых может быть открыт сайт. На поддержку некоторых экзотических сценариев уйдёт куча времени и сил. Решение о поддержке тех или иных сценариев принимают на основе анализа посещений сайта с помощью систем аналитики — о них позднее.
В этой главе мы изучим базовую адаптивность для любых сайтов — под размеры и пропорции экрана. Почти все элементы вёрстки сами подстраиваются под ширину экрана, верстальщику достаточно лишь не сломать это поведение и при необходимости скорректировать.
Анализ посетителей сайта
Скрыт 1 разворот
Скрыт 1 разворот
Текст внутри элементов сам адаптируется под их ширину.
Расположение переносов в тексте зависит от ширины элемента, поэтому полезно подстраховаться: использовать неразрывные пробелы или тег nobr, чтобы подклеить предлоги, союзы, тире и предотвратить неприятные переносы.
Для текстовых элементов полезно ограничивать ширину через min-width и max-width, чтобы ширина текста оставалась комфортной для чтения.
Работаем с
1997 года.
Эксперты на
рынке автоуслуг.
Звоните: 8 800 301‑
64‑40
Работаем
с 1997 года.
Эксперты на рынке
автоуслуг.
Звоните:
Богатая типографика
Перенос текста по слогам
Работаем с
1997 года.
Эксперты на
рынке автоуслуг.
Звоните: 8 800 301‑
64‑40
Работаем
с 1997 года.
Эксперты на рынке
автоуслуг.
Звоните:
Текст внутри элементов сам адаптируется под их ширину.
Расположение переносов в тексте зависит от ширины элемента, поэтому полезно подстраховаться: использовать неразрывные пробелы или тег nobr, чтобы подклеить предлоги, союзы, тире и предотвратить неприятные переносы.
Для текстовых элементов полезно ограничивать ширину через min-width и max-width, чтобы ширина текста оставалась комфортной для чтения.
Богатая типографика
Перенос текста по слогам
Скрыт 1 разворот
Скрыт 1 разворот
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Переполнение — overflow
Если содержимое больше ширины или высоты элемента, оно вылезет за его границы. Это называется переполнением.
Переполнение почти всегда сигнализирует о проблемах с вёрсткой. Ведь по умолчанию содержимое элемента адаптируется под ширину, а высота адаптируется под содержимое. Значит, переполнение появится только когда где‑то нарушена адаптивность, заданы строгие размеры. Чтобы переполнение не портило вид сайта, нужно устранить его причину.
Свойство overflow управляет тем, как элемент поступит с переполняющим содержимым.
overflow: visible — по умолчанию — содержимое вылезет за границы, может налезть на соседние элементы или добавить странице ненужную прокрутку.
overflow: hidden — содержимое обрежется по границам элемента.
overflow: scroll — добавит прокрутку не влезшего содержимого. Иногда используется намеренно, чтобы «впихнуть невпихуемое» в дизайне.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Поскольку по умолчанию содержимое адаптируется под ширину элемента, а высота элемента адаптируется под содержимое, то переполнение может появиться только если где‑то нарушена стандартная адаптивность, заданы строгие размеры.
Переполнение — overflow
Если содержимое больше ширины или высоты элемента, оно вылезет за его границы. Это называется переполнением.
Переполнение почти всегда сигнализирует о проблемах с вёрсткой. Ведь по умолчанию содержимое элемента адаптируется под ширину, а высота адаптируется под содержимое. Значит, переполнение появится только когда где‑то нарушена адаптивность, заданы строгие размеры. Чтобы переполнение не портило вид сайта, нужно устранить его причину.
Свойство overflow управляет тем, как элемент поступит с переполняющим содержимым.
overflow: visible — по умолчанию — содержимое вылезет за границы, может налезть на соседние элементы или добавить странице ненужную прокрутку.
overflow: hidden — содержимое обрежется по границам элемента.
overflow: scroll — добавит прокрутку не влезшего содержимого. Иногда используется намеренно, чтобы «впихнуть невпихуемое» в дизайне.
Скрыто: страницы, спецэффекты
Скрыто: страницы, спецэффекты
Скрыто: контроль качества, тестирование вёрстки
Скрыто: контроль качества, тестирование вёрстки
Скрыто: хостинг и домен, шаринг в соцсети, аналитика и статистика посещений
Скрыто: хостинг и домен, шаринг в соцсети, аналитика и статистика посещений
Скрыто: работа с верстальщиком
Скрыто: работа с верстальщиком