Введение в CSS
CSS отвечает за внешний вид. Учимся подключать стили и писать первые правила.
Что такое CSS
CSS (Cascading Style Sheets) — каскадные таблицы стилей. Ключевое слово здесь «каскад»: правила применяются по порядку и дополняют друг друга. Одно правило выглядит так:
селектор {
свойство: значение;
свойство: значение;
}p {
color: #38bdf8;
font-size: 16px;
}Каждое существующее правило — либо как есть, либо «каскадом» передаётся потомкам.
Три способа подключения
| Способ | Пример | Когда применять |
|---|---|---|
| Отдельный файл | <link rel="stylesheet" href="style.css"> | Всегда, в продакшене |
Тег <style> | в <head> | Прототипы, одноразовые страницы |
Атрибут style | <p style="color:red"> | Почти никогда |
style перебивает тег <style>, а тот — внешний файл. Лучший подход — внешний файл и минимум «инлайна».Базовые свойства
Самые частые инструменты оформления текста:
header {
background-color: #1e293b;
color: #e2e8f0;
}
h1 {
font-family: "Segoe UI", sans-serif;
font-size: 32px;
font-weight: 700;
text-align: center;
}
.link {
color: #38bdf8;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}Раскроем каждое:
color/background-color— цвет текста и фона;font-family— шрифт (с запасным вариантом);font-size— размер шрифта;font-weight— насыщенность (жирность);text-align— выравнивание;text-decoration— подчёркивание и прочее;:hover— псевдокласс для состояния «на курсоре».
Цвета в CSS
p { color: red; } /* по имени */
p { color: #ff0000; } /* hex */
p { color: rgb(255, 0, 0); } /* rgb */
p { color: rgba(255, 0, 0, 0.5); } /* + прозрачность */Единицы измерения
| Единица | От чего зависит | Пример |
|---|---|---|
px | пиксели экрана | границы, бордеры |
% | размер родителя | ширина блоков |
rem | размер корневого font-size | шрифты, отступы |
em | размер родительского шрифта | внутренние отступы |
vh / vw | высота/ширина окна | герой-секции |
font-size: 16px на <html> и дальше работают в rem — так размеры масштабируются при изменении шрифта пользователем.Живой пример
Стилизуем карточку за один шаг. Слева «голый» HTML, справа — то же, но с CSS:
с CSS 🎨
Наследование и каскад
Некоторые свойства передаются от родителя детям автоматически. Классика — цвет и шрифт:
body {
color: #e2e8f0; /* унаследуется всеми текстами */
font-family: Arial, sans-serif;
}А вот margin, padding, border и background не наследуются — просто потому, что иначе отступы «поехали» бы по всей странице.
| Свойство | Наследуется? |
|---|---|
color, font-*, text-align, line-height | да |
margin, padding, width, height | нет |
border, background, display | нет |
Reset и Normalize
У браузеров разные стили «по умолчанию»: у одних у <ul> большие отступы, у других маленькие. Чтобы стартовать с чистого листа, подключают сброс:
/* Классический reset — решительно всё обнуляем */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}CSS-переменные (custom properties)
В CSS можно объявлять собственные переменные — они задаются в двойном дефисе и работают везде ниже по дереву:
:root {
--accent: #38bdf8;
--gap: 16px;
--radius: 12px;
}
.card {
color: var(--accent);
border-radius: var(--radius);
padding: var(--gap);
}:root, и вся страница перекрашивается. На этом строятся переключатели «тёмная тема».Адаптивные размеры: clamp()
Функция clamp() задаёт размер с минимумом, желаемым значением и максимумом. Идеальна для шрифтов, растущих с шириной окна:
h1 {
font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
}Это означает: не меньше 1.5rem, стремиться к 3vw + 1rem, но не больше 3rem. Никаких media queries для одного заголовка.
vw старается подстроиться под ширину окна. Но ставить огромные clamp() значения легко перестараться на огромных мониторах — всегда ограничивайте максимум.Приоритет правил и !important
Когда два правила спорят, побеждает: инлайн-стиль > селектор по id > класс > тег. Если результат всё равно не тот, в ход идёт !important:
p { color: #38bdf8 !important; } /* перебьёт класс и id */!important можно, то отбить уже нечем, кроме !important же. В проектах его стараются сводить к нулю — это признак запутанных стилей.Кастомные шрифты: @font-face и Google Fonts
Свои шрифты подключают директивой @font-face, а готовые — одной строкой из Google Fonts:
@font-face {
font-family: "MyFont";
src: url("../fonts/myfont.woff2") format("woff2");
font-weight: 400;
}
/* или в head: */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">display=swap (в Google Fonts) заставляет текст показаться сразу, а шрифт «догрузиться» фоном. Так страница не выглядит пустой, пока грузятся буквы.Типографика: line-height, letter-spacing, text-decoration
Комфортное чтение — это не шутки. Три настройки решают 90% проблем с текстом:
body {
line-height: 1.6; /* межстрочный интервал */
letter-spacing: 0.3px; /* разрядка букв */
}
a { text-decoration: none; } /* убрать подчёркивание */
.overline { text-decoration: overline; } /* линия сверху */line-height между 1.4 и 1.8, а строки текста не длиннее примерно 70–80 символов.@media: screen, print и брейкпоинты
Запросы можно открывать на любой тип устройства. Например, для печати страница делается компактной:
@media screen and (min-width: 768px) {
.menu { display: flex; }
}
@media print {
nav, .ad { display: none; } /* не печатаем меню и рекламу */
}min-width-правила для широких. Так базовый код проще и легче.Группировка селекторов
Одно правило для нескольких элементов записывают через запятую:
h1, h2, h3 {
color: #e2e8f0;
font-weight: 700;
}Псевдоклассы состояния
Стили «по событию»: :hover, :focus, :active:
a:hover { color: #7dd3fc; }
a:focus { outline: 2px solid #38bdf8; }
a:active { opacity: 0.7; }:focus — «попал в поле клавиатурой», :focus-visible — видимое фокусирование. Не убирайте обводку фокуса совсем — доступность страдает.Структурные псевдоклассы
Порядковые номера среди братьев: первый, последний, каждый чётный:
li:first-child { color: #34d399; }
li:last-child { font-weight: bold; }
li:nth-child(3) { text-decoration: underline; }
li:nth-child(even) { background: #1e293b; }nth-child(2n+1) = нечётные, (odd) и (even) — сокращения. Полосатая таблица — пара строк.Атрибутные селекторы
Стиль по наличию атрибута или его значению:
input[type="text"] { border-color: #38bdf8; }
a[href^="https://"] { color: #7dd3fc; } /* ^= начало */
a[href$=".pdf"] { color: #f87171; } /* $= конец */Каскад: кто победит
При одинаковой специфичности побеждает правило, объявленное позже (ниже в файле):
p { color: red; }
p { color: blue; } /* победит: объявлено позже */!important. Лучше — больше классов, меньше важности.background: сокращённая запись
Одно свойство вместо четырёх:
.hero {
background: #0f172a url("../img/bg.jpg") center / cover no-repeat;
/* цвет | картинка | позиция / размер | повтор */
}border: стили и стороны
Границы разделяются по сторонам, стилям и цветам:
.card {
border: 1px solid #334155; /* все стороны */
border-left: 4px solid #38bdf8; /* акцент слева */
border-radius: 8px;
}solid, dashed, dotted, double. Пунктирные границы — удобная разметка «набросков».Прозрачность: opacity и rgba
Полупрозрачность бывает для всего блока или только для цвета:
.ghost { opacity: 0.5; } /* блеклый весь блок, включая детей */
.bg-fade{ background: rgba(15, 23, 42, 0.8); } /* прозрачный фон, текст чёткий */background: rgba(...) — текст останется контрастным.Шрифтовые стеки
Перечисляйте шрифты через запятую: если первого нет, возьмётся следующий:
body {
font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
code {
font-family: "Cascadia Code", Consolas, monospace;
}line-height без единиц
Пишите межстрочный интервал числом без единицы — он унаследуется пропорционально:
body { line-height: 1.6; } // 1.6 × размер шрифта1.6 без px масштабируется вместе с font-size любого потомка. С px фиксированная высота ломается при смене размера шрифта.Выравнивание текста: text-align
Слева, по центру, справа или по ширине — куда прижимать строки:
h1 { text-align: center; }
.left { text-align: left; }
.right{ text-align: right; }
.just { text-align: justify; }font: универсальная запись
Одно свойство, все настройки шрифта сразу:
.btn {
font: 16px/1.4 Arial, sans-serif; /* размер/строка шрифт */
font-style: italic;
font-weight: 600;
}CSS-комментарии
Примечания к правилам — пишите их, когда логика не очевидна:
/* Тёмная зона не должна дотрагиваться до шапки */
.hero {
padding-top: 0;
}
/* ===== Раздел: карточки ===== */
.card { ... }Палитра в DevTools
Подбирайте цвета с пипетки и копируйте в код:
- Панель Styles: клик по цветному квадратику открывает пипетку;
- Клик рядом со значением — поменяется формат (hex/rgb/hsl);
- Смена цвета «на лету» не требует сохранения файла.
--accent. Тема-лавка и палитра станут управляемыми.Тренировка
- Вынесите стили в отдельный файл
css/style.cssи подключите его через<link>. - Задайте фон страницы, цвет заголовков и уберите подчёркивание у ссылок.
- Сделайте кнопку-ссылка с
:hover-эффектом. - Поиграйте с
font-sizeвpx,remиem— почувствуйте разницу.
Селектор — «адрес» элемента
Селектор решает, к каким элементам применить правило. Чем «адреснее» селектор, тем точнее попадание: p — все абзацы, .alert — элементы с этим классом, #menu — один элемент с этим id.
p { color: #333; }
.alert { color: #c00; }
#menu { display: flex; }Каскад: порядок решает
Два правила задали одно свойство — победит то, что: 1) написано позже при равной специфичности, 2) специфичнее, 3) важнее (!important). Порядок «файл за файлом» тоже важен: тот CSS, что подключён последним, перекрывает ранние.
.alert { color: red; }
.alert { color: blue; } /* победит: написано позже */Внешние и встроенные стили: сравнение
Внешний файл style.css через <link> — главный способ: стили общие для всех страниц. Блок <style> — для одной страницы. Инлайн style="" — для одного элемента.
<head>
<link rel="stylesheet" href="css/style.css">
</head>Инлайн-стили: оправданное исключение
style="..." прямо на теге имеет максимальный приоритет среди обычных правил. Он удобен для экспериментов (DevTools), но в проекте «жёстко прошитые» стили труднее менять системно.
<p style="color: green">Зелёный один раз</p>Наследование: «язык» и «семья»
Свойства «языка» (color, font-*, line-height) наследуются вниз по дереву: стиль на родителе применяется к потомкам, пока те не переопределят. Свойства «рамки» (margin, padding, border, background) не наследуются.
body { color: #222; font-family: system-ui; }Базовый сброс: Reset против Normalize
Браузеры «одинаково-по-разному» рисуют поля и отступы. Решение — короткий сброс (Reset: всё «в ноль», стилизуйте сами) или Normalize (ровные «стандартные» значения). Оба решают за вас одну болячку.
* { margin: 0; padding: 0; box-sizing: border-box; }Цветовые модели: hex, rgb, hsl
#38bdf8 — шестнадцатеричный, rgb(56, 189, 248) — «покраснение/позеленение/посинение», hsl(199°, 93%, 60%) — оттенок/насыщенность/светлота. Первые два привычнее, hsl удобнее крутить «тон».
.sky { color: #38bdf8; }
.sky2 { color: hsl(199 93% 60%); }Размеры блока: ширина и высота
Блочный элемент по умолчанию растягивается на всю ширину родителя; высота растёт с контентом. width/height задают «скелет», а внутри работает контент.
.card {
width: 300px;
height: 200px;
}Прозрачность двумя путями: opacity и rgba
opacity: 0.5 делает полупрозрачным ВЕСЬ элемент вместе с текстом. В color: rgba(0,0,0,0.5) и background: rgba(...) прозрачна только «краска», текст остаётся чёрным и чётким.
.t1 { opacity: 0.5; } /* всё полупрозрачно */
.t2 { background: rgba(0,0,0,0.5); } /* только фон */Единицы: px, %, em, rem, vw, vh
px — абсолютные, % — от родителя, em — от своего font-size (и множится во вложенности), rem — от корневого (надёжнее), vw/vh — от окна браузера.
.card { width: 80%; font-size: 1rem; }
.hero { height: 60vh; }Бокс-модель: от краёв к центру
Любой элемент — «коробка»: контент → padding (внутренний отступ) → border (рамка) → margin (внешний отступ). Ширина по умолчанию считает контент, но box-sizing всё меняет — об этом в уроке 5.
.box { padding: 10px; border: 1px solid; margin: 12px; }Поля и отступы: padding против margin
padding образует «воздух» ВНУТРИ рамки (расстояние контента от края блока), margin — СНАРУЖИ (расстояние между блоками). Смешивать не запрещено, но понимание правила очень помогает.
.card {
padding: 16px; /* текст не прилипает к краю */
margin: 8px; /* воздух между карточками */
}Рамка: border и скругление
border — рамка: тон, стиль, цвет. border-radius — скругление углов (одно значение — все углы). Это декоративная «обёртка» любой коробки.
.badge {
border: 2px solid #38bdf8;
border-radius: 8px;
}Тень: box-shadow и «глубина»
box-shadow: сдвиг-по-X сдвиг-по-Y размытие цвет создаёт «подъём» блока. Несколько теней перечисляются через запятую — так делают «лестницы» и двойную тень.
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}Фон: цвет, картинка, градиент
background-color заливает цветом, background-image кладёт картинку (или градиент), background-size: cover подгоняет её «во весь блок».
.hero {
background: linear-gradient(#0ea5b7, #38bdf8);
background-image: url("bg.jpg");
background-size: cover;
}Шрифты системные: стеки
«Системный стек» — список шрифтов, которые браузер берёт с устройства пользователя: system-ui, Arial, Helvetica... Задайте список: если первого нет, возьмут второй.
body {
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}Шрифт из файла: подключение
Кастомный шрифт «привозят» из Google Fonts (link в head) или хранят у себя через @font-face. После подключения его имя ставят в font-family, как системное.
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
body { font-family: 'Inter', system-ui; }Центрирование блока: margin: auto
Блочный элемент с явной шириной центрируется горизонтально одним правилом: margin: 0 auto. «0» — вертикальный отступ, «auto» — одинаковые поля слева и справа.
.container {
width: min(960px, 90%);
margin: 0 auto;
}display: block, inline, inline-block
block — на всю ширину, со своей строкой; inline — «в тексте», без ширины/высоты; inline-block — «в строке», но размеры и поля работают. Расстановка «в ряд» — удобная, но грубая; для серьёзных рядов есть flex/grid (урок 6).
.tile { display: inline-block; width: 120px; }overflow: что делать с лишним
overflow: visible — видно за краями, hidden — обрезать, scroll — скролл всегда, auto — скролл если нужно. Классика: картинка не влезает — задайте overflow, а не высоту блока.
.thumb {
width: 160px;
height: 160px;
overflow: hidden;
border-radius: 50%;
}Медиа-запросы: брейкпоинты по-простому
Правила внутри @media (max-width: 600px) действуют только на узких экранах. «Брейкпоинт» — ширина, при которой макет перестраивается. Начинайте с одного-двух, не копируйте чужие списки.
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
}Плавные переходы: transition
transition: свойство длительность плавно «доезжает» до нового значения при hover/фокусе. Порог: transition не сработает без исходных и конечных значений в разных состояниях.
.btn { background: #38bdf8; transition: background .3s; }
.btn:hover { background: #0ea5b7; }Псевдоклассы: not, first-child, last-child
:first-child/:last-child — первый/последний в родителе, :not(.x) — «кроме». Без них «отбить первую строку» приходится классами-вручную.
nav a { margin-right: 12px; }
nav a:last-child { margin-right: 0; }
.row > *:not(:last-child) { margin-bottom: 8px; }Псевдоэлементы: before и after
::before и ::after рисуют «виртуальный» кусочек до/после содержимого. Классика: «стрелка» у ссылки, разделитель, декоративный кружок — без новых тегов в HTML.
.link::after {
content: "→";
margin-left: 4px;
}Практика: карточка «о себе»
Соберите карточку: фон, padding, border-radius, box-shadow, центрированный контент, тень на hover. Это стартовый «builder» всех будущих проектов — карточка не раз пригодится.
.about {
max-width: 420px;
margin: 40px auto;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.about:hover { transform: translateY(-2px); }Чек-лист: почему стили не применились
Порядок проверки: 1) селектор «попал»? Откройте DevTools → «стили»; 2) правило зачёркнуто? — перебито каскадом; 3) опечатка в свойстве (блок редко прощает); 4) файл подключён и путь верен; 5) специфичность: .a.b сильнее .b.
Итоги урока 4: что уже стилизуете
Вы умеете: подключать CSS, писать селекторы и каскад, управлять цветом, шрифтами, коробками, фоном, тенью, адаптивом на медиа-запросах и плавными переходами. Это половина «внешности» сайта. Дальше — глубина: специфичность, позиционирование и flex/grid.
Шрифтовая пара: базовый плюс акцентный
Гарнитура — характер страницы. Лучшая стратегия новичку: один шрифт «для текста» (читаемый) и один «для заголовков» (характерный). Пара «шрифт+акцент» задаёт настроение дольше, чем «один на всё».
font-family: список с резервом
font-family — «очередь» шрифтов через запятую: если первого нет, применяется следующий. В конце обычно «безопасное» семейство (serif / sans-serif). Так страница «не ломается» без конкретной гарнитуры.
body {
font-family: "Segoe UI", Arial, sans-serif;
}font-size: «база» текста
Размер шрифта задаётся в px, em, rem (и других). Базовая строка — «комфортная» для чтения: 16–18px для мелкого текста, крупнее — у заголовков. «Ползунок» читателя zoom работает с «правильной» базой.
Свойство line-height: «дыхание» строк
line-height — интервал между строками. Число без единиц («1.6») — «относительно текущего размера». Слишком мало — строки липнут, слишком много — «рыхлость». Классика: 1.5–1.7 для текста.
p { line-height: 1.6; }letter-spacing: межбуквенный интервал
letter-spacing разрежает/сжимает буквы. Техника «в раскачку» — для заголовков и «меню». Меньше — «тесно», больше — «воздушно». Мелкий кегль в разрежку читается хуже, чем плотный.
h1 { letter-spacing: 2px; }text-indent: красная строка
text-indent отступает первую строку абзаца «вправо» (или влево, если отрицательный). Старомодная «красная строка», но в вебе встречается; нативная альтернатива — пустой абзац с «воздухом».
p { text-indent: 1.5em; }text-transform: регистр средствами CSS
uppercase/lowercase/capitalize меняют регистр «на виду», не трогая разметку. Кнопки и ярлыки в «ВАЛЕТОМ» читаются проще. Не пишите ИСТИНУ в HTML — оставьте CSS превращать.
.label { text-transform: uppercase; }Перенос длинных слов: overflow-wrap
Длинное слово без пробелов «выпадает» из контейнера. overflow-wrap: anywhere переносит «по-доброму», а break-word — «по-жёсткому». Телефоны и email в таблицах — «самые кандидаты».
.msg { overflow-wrap: anywhere; }Горизонтальные отступы абзацев: margin
Расстояние между абзацами — «горизонтальные» швы текста. Правило: между абзацами больше, чем внутри. margin-top у абзацев и «классические» штили «первого-нет» — побеждает чистота ритма.
Вертикальный ритм: повторение интервала
Если отступы «бьются» в базовую единицу (например, кратны line-height) — страница «дышит». Техника сложная, начните с простого: все margin — «одно и то же число либо кратно». Уже ритмично.
Декор ссылок: убираем подчёркивание
Ссылки «по умолчанию» подчёркнуты. text-decoration: none убирает линию — тогда о «ссылке» говорит цвет или другой знак. Убирать «полностью» — удобство под вопросом: подчёркивание = «кликабельно».
.menu a { text-decoration: none; }Стиль подчёркивания: text-decoration-style
Линию можно менять: solid, double, dotted, wavy. text-decoration-style работает с «декоративной» линией (не с border). «Волнисто» — «нет, так нельзя» в интерфейсах, но аккуратно в акцентах.
Положение линии: text-underline-offset
text-underline-offset отодвигает линию от текста: «дышит» подключиние под>word, всё чётче. Слишком близко — линия «режет» выносные буквы, слишком далеко — «отрыв» от слова.
a {
text-underline-offset: 3px;
}Отмена регистра: text-transform: none
text-transform: none «снимает» превращение регистра — полезно, когда родитель сделал uppercase, а потомок «должен быть как есть». Классика «вниз по наследованию» — честный none.
Пробелы и переносы: свойство white-space
white-space управляет пробелами и переносами: pre — «как есть», nowrap — «не переносить», normal — «по умолчанию». Код и адреса «хотят» pre; кнопки — иногда nowrap.
code { white-space: pre; }Ручной перенос: тег wbr в длинном тексте
wbr — «место, где можно перенести»: браузер перенесёт только при необходимости. Удобно для длинных слов и длинных адресов. «Шов» невидим в обычном потоке — не путать с «новой строкой».
наи<wbr>длиннейшее<wbr>словоdisplay: block против inline
Строчные элементы (a, span) «не создают строк»; блочные (p, div) — «полные строки». display меняет «роль». Для «ссылка-кнопка» ставят inline-block: блочное поведение внутри строк бок о бок.
a.btn {
display: inline-block;
padding: 8px 16px;
}Прозрачность текста: декокрасия фона
Прозрачный текст («выжженный» watermark) — трюк: color: transparent с фоном-градиентом «проявляет» слово. Денсация «текст-фон» для лого и «васильковых» плашек — осознанный стиль.
Тире и дефис: как не путать
Дефис (-) — внутри слова, тире (—) — между частями. «Съём-ка» ← дефис; «Съём — это...» ← тире. На веб-страницах правильно ставить длинное тире (—), а не минусы. Мелко, но «грамотно».
Акцент на слове: и его CSS
Важной части текста — сильный акцент: (семантика) + CSS для вида. Курсив тоже может выделять: — «логотип» смысла. Выделение «невидимо» — «акцент» средствами одного тега слабоват.
strong { font-weight: 700; }Подключение локального шрифта: @font-face
Локальные шрифты «привозят» с собой: @font-face описывает имя, файлы и начертание. Браузер «находит» по font-family. Свои файлы — своя «поставка» без внешних сервисов.
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}Параметры @font-face: font-display
font-display управляет «поведением» шрифта при загрузке: swap — «покажи запасной, потом подменяй», fallback — «подожди чуть-чуть», optional — «если медленно — не грузи». Лицо страницы зависит от strategy.
Отложенная подгрузка: font-display: swap
swap — «дружелюбный» дефолт для шрифтов: текст показывается запасным, а «красивый» встаёт позже. Блокирующей «белой страницы» нет. Тонкость — раскладка «прыгает» при подмене.
Google Fonts: только нужные начертания
Google Fonts подключают через link или @import — и можно выбрать лишь «нужные» веса. Чем меньше начертаний, тем легче шрифтовой CSS. Правило: 2–3 начертания, не «весь каталог».
<link href="...family=Roboto:wght@400;700"
rel="stylesheet">Жирность начертания: font-weight по порядку
font-weight: normal=400, bold=700 (и 100–900). «Догадки» букв: браузер «подрисует» толщину, если нужного файла нет. Заказывайте «100…900» честно — и fat-заголовки «не разочаруют».
Семейство шрифтов: «безопасная» стопка
«Безопасные» семейства — есть в системах: Arial, Verdana, Georgia, Tahoma. Стопку делают: «любимый», «безопасный», «родовое семейство». Так дизайн «держится» и без кастомных файлов.
body { font-family: Verdana, Tahoma, sans-serif; }Единицы pt: для печати, не для экрана
pt («точка») — полиграфическая единица. В CSS-экранах там, где физический «дюйм» не сходится с ретиной — pt «дрожит». Для относительного масштаба лучше rem/px/em. pt живёт в «печати» и документных style-guides.
Вес vs толщина: font-weight без опоры
Иногда «жирности» нет в файле, и браузер «синтезирует» толще. Появляются «грязные» буквы. Чище — подгрузить правильный вес (font-face) или использовать настройку «synthetic bold» сознательно.
Кириллица в шрифтах: проверка покрытия
Не все шрифты «говорят по-русски». Файл может содержать только латиницу — тогда кириллица «подменится» запасным. Проверка: показать «ЙШГЪ ЮЯ» в настройках шрифта; в вебе — тест «в лоб».
Шрифт с «дышащими» прерываниями: визитка текста
«Живая» типографика — контраст: крупный заголовок, средний текст, маленькая подпись. Сделайте «на глаз» и затем сравните с «после паузы». Умение «видеть» текст — навык, приходит с правками.
Практика: статья с «правильной» типографикой
Наберите статью: заголовок с тенью-лёгкой, абзацы с «воздухом», цитата в блоке, список «телеграфный». Примените letter-spacing к подзаголовкам, line-height к абзацам. Цель: «структура читается без усилий».
article p {
margin-bottom: 1.2em;
}Практика: визитка текстовыми средствами
Визитка «только CSS-текстом»: имя крупным, должность «разреженным» кеглем, контакты списком, в углу — «лого-буква» в цветном квадрате. Ни одного изображения: «текст рисует» весь дизайн.
Практика: разворот событий с датами
Лента «событий»: дата слева, название события справа; разделители-линии между. Выравнивание через flexbox, даты — в «тонком» стиле, события — «обычным». Практика «двух колонок текста».
Контраст текста: 4.5:1 для комфорта
Текст на фоне должен «говорить»: коэффициент контраста ≥4.5:1 для обычного, ≥3:1 для крупного. Пастель «по-пастели» — красиво, но «читаемо» — обязательно. Подберите инструментом, потом проверьте.
Размер «по проценту»: 1em от базы
em «относится» к родительскому размеру: 1em = размер родителя, 2em — вдвое. Удобно «масштабировать» блок целиком. Но «глубина вложенности» умножает — следите за «пирамидой» em.
.card { font-size: 20px; }
.card h3 { font-size: 1.5em; } // 30pxЦифры и размеры: особый кегль таблиц
Цены, суммы, количества «в таблице» требуют «табулированных» цифр — одинаковой ширины в колонке. Выравнивание «по правому краю» — в вёрстке, а monospace/кастомные «цифровые» — для ровности.
td.num {
font-variant-numeric: tabular-nums;
}Ссылка как кнопка: большая зона клика
«Ссылку-кнопку» делают padding'ом: зона клика растёт, а не «ссылка-строка». На мобильных «куда больше» важно. Минимальная тач-мишень — 44×44px; набирайте «земли» padding'ами.
a.btn {
display: inline-block;
padding: 12px 20px;
}Чек-лист текст-вёрстки
Прогнал статью через чек-лист: базовая гарнитура с резервом; line-height 1.5+; абзацы с «воздухом»; заголовки «дышат»; контраст 4.5:1; длинные слова переносятся; цитаты «в блоке»; акценты «семантично».
Ошибки стилей текста: частые пять
1) текст без «воздуха» (line-height=1); 2) ссылки без подчёркивания в потоке абзаца; 3) контраст «съедает» фон; 4) «прыгающий» шрифт без swap-дисциплины; 5) em-«пирамиды» глубже, чем надо. Пять — и все «на глаз».
Итоги урока 4: текст управляется
Шрифты подключили (локальные/Google), размеры усмирили (px/rem/em), ритм выстроил (line-height, отступы), «акценты» осмыслили (/), контраст проверили. Наконец — текст «слушается» CSS.
Единицы шрифта: px, em, rem, итог
px фиксирован, em — от родителя, rem — от корня, проценты — от блока. Для типографики «мир»: rem держит базу, em живёт «внутри» компонента. Итоговая формула — «связка» масштаба.
Модульный масштаб: лесенка размеров
«Лестница» типографики: ряд кеглей с постоянным шагом (1.2, 1.333). Каждый заголовок «берёт» ступень. Масштаб «держит» сайт целым: текст «гармонирует» от строки до заголовка.
Иерархия текста: готовая схема
Схема уровней: заголовок (крупно, вес), подзаголовок (меньше), текст (база), подпись (мельче). Каждому уровню — свой размер и «роль». Читатель «видит» иерархию с первого взгляда.
Кегль и удобочитаемость
Удобочитаемости — «размеры» не «волнуют» телефоны и десктопы одинаково. Основной текст 16–18px, футерные подписи — 12–14. «Мельчить» нельзя: глаза «устают». Крупное «солиднее», но «громче».
Пропорции строки и ширины колонки
Колонка 45–75 символов + line-height 1.4–1.6 — «комфортная» пара. «Широкая» строка требует «больше» воздуха. max-width блоков текста — «правило» удобочитаемости.
Первый абзац: без отступа
После заголовка первый абзац «без» отступа: «отбивка» уже есть. Типографика текстов: отступ абзацев — через margin/padding, а не «двойной пробел». Читается «чисто» и «дышит».
Веб-шрифты: загрузка своими файлами
Свои шрифты — через @font-face: url файла, font-family-имя, веса. Файлы .woff2 — «сжатые» и «быстрые». «Своё» семейство — «уникальная» типографика сайта.
@font-face {
font-family: MySet;
src: url("my.woff2") format("woff2");
}Системные шрифты: локальный стек
Системные шрифты (Segoe UI, Roboto, system-ui) — «родные» устройствам: ноль загрузки. Стек -apple-system, Segoe UI, Roboto… — «универсал». Плюс: скорость; минус: «стандартность» вида.
Семейство шрифта: веса и начертания
Одна гарнитура = «семейство»: веса (300–900), курсив, «конденсация». Парой весов пользуются чаще: regular + bold. «Семейство» целиком дает «характер» без «раздвоения» шрифтов.
Лицензии шрифтов: законность набора
Шрифты «не свободны» по умолчанию: у каждого — лицензия. «Коммерческое» подключайте «по разрешению». «Открытые» (SIL OFL) — «спокойное» использование. Проверяйте «право» перед «публикацией».
Первая буква абзаца: стиль интроверта
Псевдоэлемент ::first-letter — «буквица» первого символа. Крупная «заставка» абзаца — «редакционный» смысл. И ::first-line — «первая строка». «Точечные» акценты — эти два инструмента.
Вариативный шрифт: много видов в одном
Вариативные шрифты — «ось» параметров: вес меняется плавно в одном файле. CSS задаёт font-variation-settings. Анимация толщины/ширины — «живой» заголовок. Файл один — «динамика» богатая.
Вертикальное выравнивание в строке
vertical-align правит «высотой» внутри строки: baseline, middle, top, числа. Для «картинок в строке» и «приподнятых» индексов. Не «рулит» блоками: только «строчными» соседями.
Свои маркеры списков: list-style
list-style: none убирает маркеры; ::marker «рисует» свои. Символ, картинка, «счётчик» — по вкусу. «Чистота» списков — половина «аккуратного» текста. Не «лепите» ::before в ущерб «простоте».
Направление текста: writing-mode
writing-mode: vertical-rl — «столбец» текста сверху вниз. Плакаты, «восточные» надписи — его приём. «Горизонтальная» строка «становится» вертикальной «колонкой». «Эксперименты» — с «осознанием» цели.
Заглавные буквы: text-transform
text-transform: uppercase, lowercase, capitalize — «регистр» без правки текста. Капс «заголовков» — «жёсткий» тон; нормальная речь — «как в вёрстке». Не «кричите»: капс «СООБЩЕНИЯ» — «крик» везде.
Разрывы слов: word-break и overflow-wrap
Длинные слова «разрываются» по-разному: overflow-wrap — «внутри», word-break — «в любом месте». Для URL и «терминов» в карточках. «Не разрывайте» обычные слова «насилием»: «афигеть» — не надо.
Переносы по слогам: hyphens
hyphens: auto — браузер переносит по правилам языка (с lang). Широкие колонки становятся «ровнее» — меньше «рвань» краёв. Настройка auto + lang — «естественные» переносы.
Типы гарнитур: с засечками и без
Serif (с засечками) — «книжное»; sans-serif (без) — «интерфейсное». Смешение: «сериф» для текста, «гротеск» для заголовков — классика. Классификация помогает «выбирать пару».
Цвет в тексте: акцент без крика
Цвет «в тексте» — акценты: ссылки, ключевые числа, «лейблы». Один акцент-цвет + нейтральный текст — «сдержанно». «Радуга» в тексте — «клякса» читаемости. «Цвета» — служанки смысла.
Свой масштаб: html font-size в rem
html { font-size: 18px; } — «перемещает» базу; rem «следят» за ней. Весь «rem-мир» масштабируется одной правкой. Система «центральная» — удобна для «тем масштаба». Не «путайте» с «изменением текста» по зёрнам.
Калькулятор px → rem: быстро и понятно
rem = px / база. База 16px: 48px = 3rem, 12px = 0.75rem. «Умное» деление «в уме» — скорость правок. Таблица соответствий «на столе» новичку — «мгновенный» перевод.
Единицы контейнера: cqw и cqh
«Контейнерные» единицы (1cqw = 1% ширины родителя-контейнера) — «родственники» vw, но «внутри» блока. Полезны при контейнерных запросах. Свежее, но «приемлемо» в современных браузерах.
Проценты ширины текста
width: 60% на text-блоке — «резина» от родителя. Сочетание «процент + max-width» — «и гибкий, и не дикий». Проценты «в тексте»: колонки и ввод. «Процентная» сетка текста — «общий» приём.
Расстояние заголовок—текст
Отступ «между» заголовком и абзацем должен «склеивать» пару: меньше, чем «до» соседнего блока. Правило «близости» в типографике: related = «вместе». «Воздух» — «разделитель», не «ройпы».
Плотность текста: компактность и воздух
Плотность — «густота» строк на экране: служебные списки компактны, статьи «воздушны». Контекст решает: таблицы «плотные», лендинги «редкие». Регулируется размером, строкой, отступами.
Зум браузера и единицы текста
Браузерный zoom «растягивает» всё; текстовый «только шрифты». rem наследует «базу» — зум работает предсказуемо. px «не масштабируются» текстом — «осторожно». «Текстовые» веб-страницы: rem «дружит» с зумом.
Числа в тексте: табуляры и «старые»
Цифровые «старые» (вниз-вверх) красивы в тексте; «табулярные» — в таблицах (не скачут). font-variant-numeric управляет «набором» цифр. «Ценник» на таблицу — tabular-nums: «колонки» ровные.
Почему база 16px: история и польза
16px — «классическая» база браузеров: «историческая» точка отсчёта. rem «по умолчанию» понятен — «ноль настроек» для старта. Изменения базы — «осознанный» ход, а не «фантазия».
Стандартный текст: разумный дефолт
«Дефолт» текста: 16–18px, line-height 1.5, sans-serif, тёмно-серый, ширина ~65ch. Начинайте «от» дефолта, «заостряйте» — от дизайна. Скучно? Зато «читаемо». Красота — «поверх» здоровой базы.
Умное подчёркивание: стиль и цвет
text-decoration-style: dashed/wavy + text-decoration-color — «личность» линии. «Зелёная волнистая» — «редакторская» метка. Подчёркивание ссылок «по месту» — читаемость. Не «пёстрые» линии «в серой зоне».
Зачёркивание: смысл и аккуратность
line-through — «перечёркнуто»: старая цена, «отменено». Тонкая линия «незаметно»; смысл «важен». Зачёркивать «всем подряд» — «бардак» в наборе. Применение «точечно» — «редакторская» гигиена.
Подчёркивание по наведению
Ссылки «в спокойствии» без линии, при hover — появляется: «чистый» текст, ясный «реагируй». Реализация: border-bottom или text-decoration on hover. «Не скрывайте» полностью: «ссылочность» должна «жить».
Тень текста: мягкие приёмы
text-shadow: сдвиг размытие цвет — «лёгкая» глубина. Тень-«силуэт» под крупным заголовком — «плакат». Не «буква в буче»: несколько теней — «зрелость», а не «муть».
Обводка текста: графика, не «текст»
«Буква с обводкой» (-webkit-text-stroke) — «плакатный» стиль. Для «логотипов» и «баннеров»; «мелкий» текст с обводкой — «грязно». Приём «зрелищный», но «экономный»: избранные места.
Свечение текста: неон с осторожностью
Свечение — «множественные» тени одного цвета вокруг букв. Неон «клуба», «заставки» — «вечеринка». Для «интерфейсов» — редко: «глазам» не привыкнуть. «Доза» = «дело», «перебор» = «боль».
Русский «курсив»: стиль и полукурсив
Курсив кириллицы «отличен» от латинского: «наклон» букв особый. Некоторые шрифты «дают» «полукривь» русича. «Настоящий» курсив — в «лицензионной» семье. «Наклон-шейкер» (fake italic) — «эконом-заменитель».
Сущности типографики: быстрый набор
« » — – … © — «шляпа» сущностей для «русского набора». Кодовые «копирайтинги» — «прошита» в разметку. Редактор с «автозаменой» — «скорость» без «ошибок».
Сервисы автотипографики
«Типограф» Юрія Романова и его наследники — «правят» текст массово: кавычки, тире, пробелы. Строка «на вход», «вычистка» «на выход». Для больших «редакций» — «выигрыш» времени.
Умные кавычки в редакторе
Редакторы «автоподменяют» «“слово”» на ««слово»» для русского. Настройка «автотипографика» — «стандарт» MS Word и его «сёстры». Проверяйте «итог»: «умное» заменяет «все» виды «кавычек».
Практика: подключение Google Fonts
Google Fonts: выберите пару, скопируйте <link> в head, примените font-family. Два веса + «запасной» стек. Быстрый результат — «новое лицо» страницы за пять минут.
<link rel="preconnect" href="https://fonts.googleapis.com">Практика: страница-типографика
Соберите «витрину»: H1–H4, абзацы, списки, цитату, ссылки — в стилях. Покажите «масштаб» лестницей. «Типографская» страница — «шаблон» оформления будущих контентов.
Практика: размерная лестница на макете
Возьмите макет «карточки» и постройте «лестницу» заголовков текста. Ступени 1.25: от «базы» к «герою». Каждый размер — «из шкалы», не «случайный». «Лестница» — «системное» око «текста».
Практика: разрядка заголовка
letter-spacing на «капсе» или «вывеске» — «официальность». Подберите «дозу»: 2–6px для крупных заголовков. Сочетайте с «чертой» под текстом. Разрядка — «микроприём» «величия».
Практика: цитата в стилях
Оформите blockquote: отступ, рамка слева, курсив или «гарнитура»-акцент, автор-подпись. «Цитата» должна «глаза» «вести». Плюс тонкая типографика внутри: «кавычки» сущностями.
Практика: газетная колонка
Попробуйте «газетный» набор: узкая колонка, сериф, выключка по левому краю. Пара: заголовок сериф, «шапка» — разрядка капсом. «Газетный» блок — «классика» придаёт «характер» блогу.
Практика: тёмный интерфейс на белом
«Тёмная» тема: шрифт #e8e8e8 на #1a1a1a, аккуратный контраст. Проверьте a11y: 4.5:1 — норма. «Тёмный» текст «не кипель» чёрный: «природнее» слепящего. «Тёмные» данные «выглядят» «премиум».
Практика: веб-письмо текстом
«Письмо» — «адрес», «глаза», «тело», «подпись»: все «текстом» и «структурой». address, p, time, footer. «Письмо» — «набор» понятий из прошлого урока в «типографической» обёртке.
Практика: стили ссылок в тексте
Ссылки в абзацах: цвет-акцент, подчёркивание-«лоток», hover — «утолщение», visited — «нейтрально». Отличие «контентных» ссылок от «меню». Практика «ссылочной типографики» — «польза» текстов.
Практика: логотип текстом
«Логотип» текстом: слово (или две буквы), вес 800, letter-spacing, «аккуратный» регистр. Плюс «начертание» рядом. «Текстовый» знак — «быстрый» бренд для «учебного» проекта.
Композиция текстового блока
Текстовый блок «живёт» по композиции: заголовок, лид, тело, «стройный» конец. «Ритм» — равные интервалы «между» смыслами. «Око» считывает «структуру блока» за мгновение — «делайте» её явной.
Один акцент на абзац
«Акцент» (цвет, курсив, жир) — «один» cмысл на абзац: «здесь» важно «это». «Перебор» акцентов — «нет» акцентов. «Типографская» экономия — «сильнее» «типографского» богатства.
Правило двух шрифтов
Два «лица» на страницу: «заголовочное» + «текстовое» — «дисциплина». Третий — «акцидентны» акценты (цифры, лейблы). Два — «хорошо», один — «строго», три — «зоопарк». «Пара» — «баланс» настройки.
Пустота вокруг текста
Пустота «дышит»: поля, межстрочье, «белый» фон. Скученный текст «тяжёл»; «воздух» «ведёт» глаз. Добавьте «пустоты» — сложности «уходят». «Дизайн» — «половина пустого», «полем» текста.
Заголовок и подзаголовок: отношение
Подзаголовок «мельче» и «спокойнее» заголовка: «1:0.7» размера примерно. Он «расшифровывает» тему «строкой». Связка «заголовок+подзаголовок» — «одна» единица «чтения».
Характер гарнитуры заголовков
«Характер» шрифта заголовков — «тональность» сайта: «жёсткий» у новостей, «мягкий» у «комфорта». «Причудливый» — «бренд-история». Выбирайте «лицо» под «смысл»: «заголовок» — самое «читаемое» «окно».
Числа и знаки в строке
«Один» — «в» контексте мер: «5 кг», «№ 7»; «%» и «°» — «неразрывно» с цифрой. Числа «в тексте» — «свои» шрифтовые «цифры». «Дроби» и «проценты» — по «стандартам» набора.
Скобки и кавычки в наборе
«Правильные» пары: „лапки" внутри «ёлочек», скобки — «без» лишних пробелов. «Вложенность» знаков — «по» типографике. «Умные» редакторы «ставят» «правильно» — «проверяйте» сам.
Висячая пунктуация: тонкость
«Висячая» пунктуация — «знак» за краем выравнивания: «точка», «кавычка», «тире» — «вне» блока. Мелочь, но «ровность» краёв «удерживает» взгляд. «Обработка» текста «автоматически» — «профессиональный» навык.
Матрица примеров: три начертания, три кегля
Соберите «таблицу»: три начертания (regular, bold, italic) на трёх кеглях (18/24/36). Смотрите «ритм» и «сочетание». «Матрица» — «глаза» для «выбора» шрифтов дальше.
Типографика и доступность: размеры
Доступность типографике: текст «не мельчит», «масштабируем», «контрастен». Основной текст 16px+, интервал 1.4–1.6, возможность «только шрифта» зумить. «Хорошая» типографика «здорова» — «дизайн» просто следует.
Фиксированные размеры: ловушка доступности
«Зафиксированные» px «не масштабируют» текст в «только-текстовом» зумме. rem «следует» настройкам — «текстовый» режим работает. «Отказ» от «жёстких» размеров — «добро» пользователям.
Дефолтные шрифты браузеров
Браузеры «по умолчанию»: Times (сериф), Arial/Helvetica (sans), «мышек» Courier. Дефолт «меняется» платформой. «Bеgrime» с «системным» стеком — «стабильная» база для «своих» правок.
Метрики шрифта: основание и выносные
Каждая буква «сидит» на основе (baseline); «хвосты» (g, p) уходят «вниз», «высокие» (б, к) — «вверх». Из этих «мер» — line-height и «пары». «Понимание метрик» — «глубина» выравниваний.
Кернинг и лигатуры в вебе
Кернинг — «пара» букв «сближается» («Л» и «А»); лигатуры — «слияние» знаков («fi»). В вебе всё «автоматически» у шрифтов с фичами. font-feature-settings — «включатели» лигатур при «своём» наборе.
Малые заглавные: font-variant small-caps
small-caps — «капс» уменьшенного «ростка»: «благородные» аббревиатуры. Внимание: «настоящие» малые «капсы» у шрифтов — «не все». «Используйте» для «имен», «логотипов», «примечаний».
Загрузка шрифтов: font-display
font-display: swap — текст показывается «запасным» шрифтом, «затем» — настоящим. block — «молчание» до загрузки. swap — «быстрый» текст сегодня. «Выбор» поддерживает «скорость» восприятия.
Инструменты подбора пары шрифтов
Сервисы пар (Fontpair, Google Fonts-подбор) — «готовые» паниры «гарнитур». «Поиск»: «по стилю», «по настроению». Не «мучайтесь»: «пара» — «проверенная» «формула», «не» копипаст «ссохшейся» идеи.
Проверка типографики на глаз
«Посмотр» — «отдалённо» (90 см) и «вблизи» (скан-глаз): «дыры» в строках, «рваные» края, «скаканье» строк. «Скриншоты» «в деле» — «картина» «на экранах». «Глаз» — «инструмент №1»; «инструменты» — «№2».
Дальше от буквы: компоновка и сетки
Типографика — «один слой» текста; «сетка» и «блоки» — «следующие». Урок 5 — «селекторы» и «специфичность»: «управление» «тем, кого стилизовать». «Текст» «дружит» с «раскладкой» — «композиция смысла».
Итоги урока 4: буква под контролем
Урок типографики «дал» контроль: шрифты, кегли, интервалы, акценты. Текст «заиграл» уровнем и «воздухом». Следующий шаг — «полное» «пятно» текста в раскладке страницы.
Частые ошибки типографики
Грехи: «всё» — «курсивом», «все» кегли — «случайные», «жирность» «везде», «узкий» text, «мельчайшие» подписи «принта». «Список» грехов — «противосила» «типографике»: «держите» «около» «файла стилей».
Закрепление: единицы на пальцах
«Перескажите»: px — «точка», rem — «корень», em — «родитель». «Переведите» 24px, 12px, 48px «в» rem при базе 16px. «Устный» перевод — «мускулатура» вёрстки: «мгновенная» «память» единиц.
Домашнее задание: редакторский макет
Сверстайте «редакторскую» страницу: «передовая» статья с «лидом», «выноской», «подписью» фото. «Газетные» приёмы: «сериф», «висячая» пунктуация, «подписи». «Статья» — «итоговый» «проект» урока текста.
Дальше: селекторы и специфичность
Урок 5 — «глубже» CSS: селекторы, каскад, специфичность, «пеер»-комбинаторы. «Точечный» «контроль», «не» «сплошной» «нажим» «на теги». «Типографика» «помнит» селекторы: «прицел» — «искусство».
Типографика будущего: что развивается
«Вариативные» «шрифты», «color»-шрифты, «контекстуальные» «моменты». «Отзывчивая» «увеличенность» «текста» по «запросам». «Экран» «меняет» «книгу» — «навыки» «базы» «остаются». «Следите» «за» «фичами» «CSS».
Разбор хорошей страницы
«Откройте» любимый сайт и «сострипайте» его «типографику»: шрифты (DevTools), размеры, «стройность». «Запишите» «открытия». «Разбор» «чужих» — «словарный» «запас» «своих» решений.
Стандарт и практика: микрогид
«Коротко»: «база» — 16–18px; «строка» — ≤70зн; «воздух» — 1.5; «шрифтов» — два; «акцентов» — один. «Микрогид» «на стену» — «мгновенное» «напоминание». «Правила» «живут» «в голове» — «вёрстка» «быстрее».
Текст как интерфейс
«Текст» — «везде» интерфейса: кнопки, метки, ошибки, подтверждения. «Типографика» «интерфейса» — «краткость» «и» «ясность». «Читающийся» «текст» — «удобный» «интерфейс». «Слово» — «элемент» «дизайна» «тоже».
Заключение урока 4: уважение к букве
«Типографика» — «это» «уважение» к «читателю»: «не» «заставлять» «ковырять» «буквы». «Хороший» «книжник» — «первый» «любимый» «аргумент» «продукта». «Урок» «усвоен» — «буква» «ухожена», «смысл» «уважен».
Лента уроков «с» фильтром-«неделя»: <ul>+<li> «в» вежливом <section aria-label>
<section aria-label="Лента уроков"><ul>… — «недели» курса. Практика: дашборд ученика. Скринридер «найдёт» ориентир. Проверка: пункты — уроки. Доступность «ленты».
Плашка «домашнее задание»: <aside> + <h2> + кнопка «скачать»
<aside aria-label="Домашнее задание"> — «побочный» блок «к» уроку. Практика: задание. Скринридер «прочтёт» ориентир. Проверка: <a download>. Доступность «заданий».
Число «нерешённых» рядом «с» прогрессом: <span> + aria-hidden «и» text в sr-only
Прогресс: <progress> + <span class="sr-only">2 из 8 заданий</span> + декоративный «2/8». Скринридер «прочтёт». Проверка: «осмысленно». Доступность «счёта».
Карточка-«результат» экзамена: <dl> + <dt>Оценка</dt> + бейдж «−0,5»
<dl><dt>Ваш балл</dt><dd>87</dd>… — «ключ-значение». Практика: сессия. Скринридер «прочтёт». Проверка: пара. Доступность «оценок».
Секция «сдают работы»: <input type="file" multiple> + label «загрузить»
<label for="hw">Загрузить домашнее задание</label><input type="file" id="hw" multiple>. Практика: портал. Скринридер «прочтёт» label. Проверка: имя. Доступность «загрузки».
Таблица «оценок» «по» урокам: <caption> + th scope + tfoot «итог»
<table><caption>Успеваемость</caption><tr><th scope="col">Урок</th>… «5 4 5». Практика: журнал. Скринридер «прочтёт». Проверка: итог. Доступность «журнала».
Кнопка «открыть ответ» в FAQ: <details><summary aria-expanded? — сам>
<details> — summary раскрывает; state сам. Практика: вопросы «по» оплате. Скринридер «управляет». Проверка: фокус. Доступность «FAQ».
Мини-«слider» цены «к» уроку: <input type="range"> + <output> ± aria-live
Слайдер «стоимость курса»: <input type="range" aria-label="Стоимость"> + <output aria-live="polite">… ₽. Скринридер «услышит». Проверка: границы. Доступность «цены».
Поле «промокод» «с» кнопкой «применить»: label + input + button
<label>Промокод</label><input><button aria-label="Применить промокод">OK</button>. Практика: корзина. Скринридер «свяжет». Проверка: имя у кнопки. Доступность «промо».
Чекбокс «запомнить» «в» курсе: label «не» внутри input
<label><input type="checkbox"> Запомнить прогресс</label>. Практика: обучение. Скринридер «прочтёт». Проверка: имя. Доступность «прогресса».
Ссылка «на» дополнительный материал: <a rel="nofollow"? — нет, просто ссылка
Ссылка «на» внешний гайд: <a href="https://…" rel="noopener">Гайд по CSS Grid</a>. Практика: урок. Скринридер «прочтёт» имя. Проверка: осмысленно. Доступность «материалов».
Заголовок «чему научитесь»: <h2> + <ul> с галочками aria
<h2>Что вы освоите</h2><ul><li>✓ «…». Практика: страница курса. Скринридер «прочтёт». Проверка: список. Доступность «цели».
Кнопка «повторить тест»: aria-label + aria-live «Результаты сброшены»
<button aria-label="Повторить тест" aria-live="polite">↻</button>. Практика: квиз. Скринридер «прочтёт». Проверка: имя. Доступность «повтора».
Псевдо «лучший ученик»: <strong> «+» aria-label «не» нужен — текст
<strong>Лидер недели</strong> + имя. Практика: рейтинг. Скринридер «прочтёт». Проверка: акцент. Доступность «лидеров».
Степпер «Профиль → Курс → Оплата»: <ol> + aria-current="step"
<ol><li aria-current="step">Курс</li>… — «шаги». Практика: мастер. Скринридер «прочтёт» позицию. Проверка: текущий. Доступность «степпера».
Деплой «шапки» курса: <header> «внутри» body, «не» «вложен» «в» section «с» ею «ж» своей nav
<header> с логотипом + <nav> «Уроки/Задания/Сертификат» + <button>Профиль. Практика: учебник. Скринридер «найдёт» header-ориентир. Проверка: nav «везде» одна. Доступность «шапки».
Имя «и» гарантия «записи»: <input aria-label="Порядковый номер заявки"> у «авто-номера»
<input aria-label="Номер заявки" value="№237" readonly>. Практика: регистрация на вебинар. Скринридер «прочтёт». Проверка: значок. Доступность «номера».
Ссылка «на» учебник «без» встроенного заголовка: <a>h2</a> «с» осмысленным «именем» «через» aria-labelledby на себя
<h2 id="book-t">…</h2> — ссылка «внутри» «имя»: <a href="#ch1" aria-labelledby="book-t">→</a>. Практика: витрина. Скринридер. Проверка: имя. Доступность «книги».
Кнопка «проверить решение»: <button type="submit"> «плюс» <output aria-live="polite"> результат
Практика: задачник. Скринридер «прочтёт» «Верно/Неверно». Проверка: имя кнопки. Доступность «проверки».
Заголовок «вкладки» «Уроки» как <h2> + «ниже» <nav> «с» меткой «Разделы глаза» — «не» «заголовок»
<h2>Уроки</h2> + <nav aria-label="Меню уроков">… Скринридер. Проверка: «название» vs «заголовок». Доступность «вкладок».
Чекбокс «Показать все вопросы»: <fieldset>+legend — «над» «массивом» переключателей «ответов»
<fieldset><legend>Фильтр вопросов</legend> + checkbox «Только нерешённые». Практика. Скринридер. Проверка. Доступность.
Карусель «методов» обучения: <section aria-roledescription="карусель" aria-label="Способы"> + пауза
<button aria-label="Пауза">⏸</button>. Практика. Скринридер. Проверка. Доступность.
Цена со «скидкой» «в» карточке: <p><del>5900</del> <ins>3900</ins> ₽ — «не» лая, но «честно»
Скринридер «прочтёт» оба. Практика: акция. Проверка: aria-label «не» нужен. Доступность «цены».
Поле «даты начала» «в» форме «записи»: <input type="date" aria-label="Дата начала обучения">
Скринридер. Практика. Проверка. Доступность «даты».
«Ссылка-подпись» таблицы «итогов»: <caption> + aria-hidden «для» «декоративной» линии «не» нужно «здесь»
<caption>Баллы за модуль</caption>. Практика. Скринридер. Проверка. Доступность.
Заголовок «комментария» «в» деревяшке: <h3> «ж» не «повторять» имя автора «в» aria-label...
«Имя» автора в комментарии — <h3>? «Нет»: «это» «не» «заголовок». Практика: ветка. Скринридер. Проверка. Доступность «ника».
Инфо-плашка «Курс в записи» у «блока» доступа: <aside aria-label="Важно"> + <p aria-live="polite">?
<aside aria-label="Информация"> «Курс «в» записи, начнёте…». Скринридер. Практика. Проверка. Доступность.
Таблица «успеваемости» + <tfoot> «итог»: «aria-label» «всего набранных баллов»
<tfoot><tr><th scope="row">Итого</th><td>98</td>. Скринридер. Практика. Проверка. Доступность.
Заголовок-«раз» для блока «Ваши достижения»: h2 + ul «галочек» — «смысл» «без» декораций
h2 «Ваши достижения» + ul «icon-check». Скринридер. Практика: сертификаты. Проверка: «галочка» — aria-hidden. Доступность.
Link-пагинация «в» ленте «уроков» «с» rel="prev next" — «и» aria-label «по»-русски
<link rel="prev"> <link rel="next"> «в» head. Практика: серия. Скринридер «не» о head-link, «но» «движение» «по» серии свободно. Проверка: имена. Доступность.