- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вертикальный ритм текста</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Вертикальный ритм</h1>
<p>В веб-дизайне существует понятие «вертикальный ритм текста». Оно достаточно сложное и мы не будем глубоко в него вдаваться. Отметим лишь, что хороший вертикальный ритм улучшает восприятие текста.</p>
<h1>Правило относительных размеров</h1>
<p>Чтобы сохранить вертикальный ритм и хорошую читабельность текста при любом размере шрифта, нужно задавать размеры шрифта, межстрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.</p>
<p>Тогда, как бы пользователь ни изменял размер шрифта, ваш текст останется читабельным и удобным для восприятия. В этом задании вы потренируетесь использовать относительные единицы измерения.</p>
</body>
</html>
CSS
body {
font-size: 12px;
line-height: 16px;
}
h1 {
margin-top: 12px;
font-size: 16px;
}
p {
margin-top: 6px;
margin-bottom: 6px;
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Для
bodyзадайтеfont-size: 24px;. Смотрите, как слипся текст. - Для
bodyзадайте межстрочный интервал1.3. - Для заголовка измените размер шрифта на
1.3em, а отступ сверху на0.7em. - Для абзацев измените отступы на
0.5em.