Заголовки, текст и ссылки
Типографика — это вид текста: размеры заголовков, межстрочный интервал, отступы между абзацами. Pico задаёт её для всех текстовых тегов, поэтому статья блога читается удобно без единой строчки своего CSS.
Заголовки и подзаголовок
Заголовки <h1>–<h6> получают размеры по убыванию и отступы. Если под заголовком нужна поясняющая строка, оберните их в <hgroup> — Pico сделает вторую строку мельче и приглушённой:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<hgroup>
<h1>Сетка без медиазапросов</h1>
<p>12 марта · 5 минут чтения</p>
</hgroup>
<p>Свойство grid-template-columns умеет само подстраивать число колонок под ширину экрана.</p>В превью — крупный заголовок, под ним серая строка с датой и обычный абзац. Без <hgroup> дата выглядела бы как ещё один абзац основного текста.
Выделения в тексте
Pico оформляет строчные теги из учебника:
| Тег | Как выглядит |
|---|---|
<strong>, <em> | Жирный и курсив |
<mark> | Жёлтая подсветка |
<small> | Мелкий текст |
<code>, <kbd> | Код на сером фоне, клавиша на тёмном |
<del>, <ins> | Зачёркнутый и подчёркнутый текст |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<p>Нажмите <kbd>Ctrl</kbd> + <kbd>S</kbd>, чтобы сохранить файл <code>style.css</code>.</p>
<p><mark>Обновлено:</mark> пример работает во всех современных браузерах.</p>
<blockquote>
Хорошая вёрстка начинается с правильных тегов.
<footer><cite>— Анна</cite></footer>
</blockquote>
<hr>
<p><small>Записи публикуются по пятницам.</small></p>Клавиши выглядят как кнопки клавиатуры, имя файла — как код, слово «Обновлено» подсвечено. Цитата отделена полосой слева, а <hr> рисует тонкую линию.
Ссылки
Обычная ссылка окрашена в основной цвет и подчёркивается при наведении. Для второстепенных ссылок есть класс secondary (серый цвет), для контрастных — contrast (цвет текста):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<p>
<a href="#">Читать запись</a> ·
<a href="#" class="secondary">Все записи</a> ·
<a href="#" class="contrast">Об авторе</a>
</p>Три ссылки: голубая, серая и почти чёрная. Эти классы есть только в обычной сборке pico.min.css.
Частая ошибка
Выбирать заголовок по размеру: поставить <h4> под <h1>, потому что <h2> «слишком крупный». Уровни заголовков описывают структуру документа, по ним ориентируются программы чтения с экрана. Пишите уровни по порядку, а размер при необходимости меняйте через CSS.