Вопросы и ответы по HTML & CSS
Готовые ответы на частые вопросы по HTML & CSS: короткое решение и примеры кода.
Раскладка и выравнивание
- Как наложить один элемент на другойНаложение элементов в CSS: подпись поверх картинки через position absolute и наложение в одной ячейке grid.
- Как отцентрировать элементЦентрирование в CSS: по горизонтали и вертикали через flexbox и grid, блок через margin auto и текст через text-align.
- Как поставить элемент в угол блокаЗначок, кнопка закрытия или метка в углу карточки: position absolute с top и right внутри relative-родителя.
- Как поставить элементы в рядБлоки в одну строку: display flex на родителе, перенос на новую строку через flex-wrap и выравнивание картинки с текстом.
- Как прижать подвал к низу страницыПодвал внизу экрана даже на короткой странице: flexbox-колонка с min-height 100vh и растягивающимся main.
- Как прижать элемент вправоВыравнивание вправо в CSS: margin-left auto во flexbox, justify-content flex-end и text-align right для текста.
- Как распределить элементы равномерноРавные промежутки между элементами в строке: justify-content space-between, space-around, space-evenly и gap.
- Как сделать блок на всю высоту экранаСекция высотой в окно браузера: единицы vh, dvh и svh и почему лучше min-height, а не height.
- Как сделать две колонкиДве колонки в CSS: равные и разной ширины через grid или flexbox, с перестроением в одну на телефоне.
- Как сделать колонки одинаковой высотыКолонки и карточки одной высоты при разном количестве текста: flexbox и grid растягивают их сами.
- Как сделать липкую шапкуШапка, которая остаётся вверху при прокрутке: position sticky, top 0 и фон, чтобы содержимое не просвечивало.
- Как сделать раскладку как на PinterestКарточки разной высоты без дыр между ними: многоколоночная раскладка columns с break-inside и что с grid masonry.
- Как сделать раскладку с боковой панельюБоковая панель фиксированной ширины рядом с основным содержимым на grid, которая на телефоне уходит наверх.
- Как сделать раскладку страницы на gridКлассическая раскладка «святой грааль»: шапка, две боковые колонки, содержимое и подвал через grid-template-areas.
Адаптивность
- Как использовать контейнерные запросыСтили компонента по ширине его контейнера, а не всего экрана: container-type и правило @container.
- Как использовать медиазапросыМедиазапросы в CSS: стили для телефона и для широкого экрана через min-width и max-width, точки перелома и диапазоны.
- Как перестроить колонки в столбик на телефонеКолонки, которые на узком экране встают друг под другом: медиазапрос, flex-wrap и flex-basis без медиазапросов.
- Как показать элемент только на мобильных или только на компьютереСкрытие блоков по ширине экрана через медиазапросы, проверка типа ввода hover и pointer и что делать вместо дублирования.
- Как сделать адаптивное видеоВидео и встроенный плеер, которые сжимаются под ширину экрана с сохранением пропорций: aspect-ratio и width 100%.
- Как сделать адаптивное менюНавигация, которая подстраивается под экран: перенос пунктов, горизонтальная прокрутка или вертикальное меню на телефоне.
- Как сделать адаптивную галерею картинокГалерея фотографий одинакового размера, которая сама меняет число колонок: grid с auto-fill, aspect-ratio и object-fit.
- Как сделать адаптивную сетку карточекСетка карточек в CSS, которая сама меняет число колонок под ширину экрана, без медиазапросов.
- Как сделать адаптивный размер шрифтаШрифт, который плавно растёт с шириной экрана: функция clamp с минимумом, зависимостью от vw и максимумом.
- Как сделать сайт адаптивнымОснова адаптивной вёрстки: мета-тег viewport, гибкая ширина, резиновые картинки и медиазапросы.
Текст и шрифты
- Как добавить тень текстуТень текста в CSS: свойство text-shadow, несколько теней, свечение и читаемый текст поверх картинки.
- Как запретить перенос текстаТекст в одну строку: white-space nowrap, неразрывный пробел для отдельных слов и text-wrap balance для ровных заголовков.
- Как изменить межстрочный интервалРасстояние между строками текста: свойство line-height, почему лучше писать его без единиц и чем оно отличается от отступов абзацев.
- Как изменить размер шрифтаРазмер текста в CSS: свойство font-size и какие единицы выбрать — px, rem или em.
- Как изменить расстояние между буквамиРазрядка текста в CSS: letter-spacing для букв, word-spacing для слов и когда это нужно.
- Как изменить цвет выделения текстаЦвет выделенного мышью текста: псевдоэлемент ::selection и какие свойства в нём работают.
- Как изменить шрифтШрифт текста в CSS: font-family с запасными вариантами, шрифт для всей страницы и системный шрифт.
- Как использовать вариативный шрифтВариативный шрифт: один файл вместо набора начертаний, любая толщина через font-weight, оси через font-variation-settings и плавная анимация.
- Как обрезать текст многоточиемОбрезка длинного текста в CSS: одна строка с text-overflow и несколько строк с line-clamp.
- Как оформить первую букву абзацаБуквица в CSS: псевдоэлемент ::first-letter, свойство initial-letter и стили первой строки через ::first-line.
- Как перенести длинное словоДлинные ссылки и слова, которые вылезают за блок: overflow-wrap anywhere, word-break и автоматические переносы hyphens.
- Как подключить свой шрифтПодключение шрифта к сайту: правило @font-face для своего файла, ссылка на сервис шрифтов и font-display swap.
- Как подключить шрифт из Google FontsПодключение Google Fonts: код ссылки для head, имя шрифта в font-family, запасной системный шрифт и загрузка файлов к себе.
- Как подчеркнуть текст и настроить подчёркиваниеПодчёркивание в CSS: text-decoration, цвет, толщина и отступ линии, волнистое и пунктирное подчёркивание.
- Как пронумеровать заголовки автоматическиАвтоматическая нумерация заголовков через CSS-счётчики: counter-reset, counter-increment, counter() в ::before и вложенные номера 1.1, 1.2.
- Как разбить текст на колонки как в газетеГазетные колонки в CSS: свойство columns, промежутки и линии между колонками, заголовок на все колонки.
- Как сделать текст жирным или курсивомЖирный текст и курсив: свойства font-weight и font-style и когда вместо них нужны теги strong и em.
- Как сделать текст заглавными буквамиЗаглавные, строчные буквы и первая заглавная в каждом слове: свойство text-transform.
- Как сделать текст с градиентомГрадиентная заливка букв: background-clip text с прозрачным цветом текста и запасной цвет.
Ссылки и кнопки
- Как добавить иконку в кнопкуКнопка с иконкой: SVG внутри button, выравнивание через inline-flex и кнопка из одной иконки с подписью для скринридеров.
- Как изменить обводку фокусаСвоя обводка фокуса через :focus-visible и outline: заметная для клавиатуры и невидимая при щелчке мышью.
- Как изменить цвет ссылки и убрать подчёркиваниеОформление ссылок в CSS: цвет, text-decoration, отступ подчёркивания и состояние при наведении.
- Как открыть ссылку в новой вкладкеСсылка в новой вкладке в HTML: атрибуты target и rel, и когда так делать стоит.
- Как оформить состояния ссылки: посещённая, наведение, фокусПсевдоклассы ссылок :link, :visited, :hover, :focus-visible и :active и порядок, в котором их записывают.
- Как сделать кнопку или ссылку неактивнойНеактивная кнопка через атрибут disabled, оформление через :disabled и как отключить ссылку.
- Как сделать красивую кнопкуОформление кнопки в CSS: цвет, отступы, скругление, реакция на наведение и нажатие.
- Как сделать ссылку в виде кнопкиСсылка, похожая на кнопку: display inline-block, отступы, фон и выбор между a и button.
- Как сделать ссылку для скачивания файлаСсылка на скачивание в HTML: атрибут download, своё имя файла и подсказка о типе и размере.
- Как сделать ссылку на раздел страницыЯкорная ссылка в HTML: id у раздела, href с решёткой, плавная прокрутка и отступ под фиксированную шапку.
- Как сделать ссылку на телефон и почтуСсылки tel: и mailto: в HTML: звонок по нажатию, письмо с темой и правильная запись номера.
- Как убрать стандартные стили кнопкиСброс оформления button: all unset или фон, рамка, шрифт и отступы — чтобы кнопка выглядела как текст или иконка.
Цвета, фон и рамки
- Как добавить обводку, не сдвигая элементыСвойство outline: обводка, которая не занимает места, отступ outline-offset и видимый фокус для клавиатуры.
- Как задать цвет флажков и переключателейСвойство accent-color: свой цвет для флажков, радиокнопок, ползунков и индикаторов прогресса одной строкой.
- Как изменить цвет фонаЦвет фона в CSS: background-color, форматы записи цвета и фон всей страницы.
- Как использовать CSS-переменные для цветовПалитра сайта в пользовательских свойствах: объявление в :root, var() с запасным значением и переопределение для блока.
- Как сделать градиентный фонГрадиенты в CSS: линейный с направлением и несколькими цветами, радиальный и резкие полосы.
- Как сделать кругКруг в CSS: квадрат с border-radius 50%, кружок с текстом или цифрой внутри и aspect-ratio.
- Как сделать полупрозрачный фонПрозрачный фон без прозрачного текста: цвет с альфа-каналом в rgb, hsl или hex вместо opacity.
- Как сделать пунктирную рамкуПунктирная и точечная рамка в CSS: стили border dashed, dotted, double и зона для перетаскивания файлов.
- Как сделать рамку только с одной стороныРамка с одной стороны в CSS: border-left, border-bottom и логические border-inline-start, а также полоска-акцент у цитаты.
- Как сделать тёмную темуТёмная тема по настройке системы: color-scheme, функция light-dark() и медиазапрос prefers-color-scheme.
- Как скруглить углыСкруглённые углы в CSS: border-radius для всех и отдельных углов, «пилюля» и обрезка картинки внутри.
Изображения и медиа
- Как вписать картинку в блок без искаженийobject-fit cover и contain: картинка заполняет блок заданного размера и не растягивается.
- Как вставить видео на страницуЭлемент video: кнопки управления, обложка poster, несколько форматов через source и субтитры track.
- Как встроить видео с YouTube, карту или другой сайтЭлемент iframe: встраивание чужой страницы, обязательный title, ленивая загрузка и ограничения sandbox.
- Как добавить аудио на страницуЭлемент audio: встроенный плеер, несколько форматов, повтор, предзагрузка и ширина плеера.
- Как добавить иконку сайта (favicon)Favicon через link rel icon: форматы SVG, PNG и ICO, иконка для iPhone и тёмная тема.
- Как добавить подпись к картинкеПодпись к изображению через figure и figcaption, её оформление и подпись поверх картинки.
- Как затемнить картинку под текстомЗатемнение фона для читаемого текста: градиент поверх background-image, псевдоэлемент и filter brightness.
- Как использовать картинки WebP и AVIF с запасным вариантомСовременные форматы картинок: picture с source и атрибутом type, порядок форматов, srcset для размеров и конвертация файлов.
- Как обрезать картинкуОбрезка изображения в CSS: aspect-ratio с object-fit, выбор видимой части через object-position и clip-path.
- Как отдавать чёткие картинки для Retina-экрановАтрибут srcset: файлы для экранов с высокой плотностью пикселей (1x, 2x) и выбор размера по ширине (w и sizes).
- Как показать разные картинки на разных экранахЭлемент picture: другой кадр на телефоне, отдельная картинка для тёмной темы и WebP или AVIF с запасным JPEG.
- Как поставить картинку на фонФоновое изображение в CSS: background-image, размер cover, позиция, повтор и запасной цвет.
- Как сделать видео с автозапуском без звукаФоновое видео: атрибуты autoplay, muted, loop и playsinline и почему без muted автозапуск не работает.
- Как сделать картинку адаптивнойРезиновое изображение в CSS: max-width 100%, height auto и атрибуты width и height против прыжков страницы.
- Как сделать круглую картинкуКруглый аватар в CSS: border-radius 50% и object-fit для неквадратных картинок.
- Как сделать ленивую загрузку картинокАтрибут loading lazy: картинки загружаются, только когда до них доходит прокрутка, и почему нужны width и height.
- Как сделать обтекание картинки по формеТекст обтекает картинку по кругу или многоугольнику: float и shape-outside с circle() и polygon(), отступ shape-margin.
- Как сделать iframe адаптивнымРезиновый iframe для видео и карт: width 100% и aspect-ratio вместо старого трюка с padding-top.
Формы
- Как выровнять подписи и поля формыПодписи над полями и слева от них: связь label с полем, grid в две колонки и выравнивание чекбоксов.
- Как добавить и оформить подсказку в поле (placeholder)Атрибут placeholder, его цвет через ::placeholder и почему подсказка не заменяет подпись label.
- Как запретить растягивать textareaСвойство resize: запрет изменения размера, растягивание только по высоте и автоматическая высота через field-sizing.
- Как изменить вид чекбокса и радиокнопкиОформление флажков и переключателей: accent-color, размер и полностью свой вид через appearance none.
- Как отключить или настроить автозаполнение полейАтрибут autocomplete: off для отключения подсказок и точные значения email, tel, new-password для правильного автозаполнения.
- Как оформить выпадающий список selectСтили для select: рамка, отступы и своя стрелка через appearance none и фоновую картинку.
- Как оформить поле выбора файлаСтилизация input type file: псевдоэлемент ::file-selector-button, выбор нескольких файлов и ограничение типов через accept.
- Как оформить поля вводаСтили для input и textarea: рамка, отступы, скругление, шрифт, ширина и подсветка при фокусе.
- Как подсветить ошибки в формеПодсветка неверно заполненных полей через :user-invalid и :user-valid и текст ошибки под полем без JavaScript.
- Как проверить email, телефон или формат поляПроверка ввода без JavaScript: типы email и url, атрибут pattern, minlength, min и max.
- Как сгруппировать поля формыЭлементы fieldset и legend: группа связанных полей, оформление рамки и отключение всей группы через disabled.
- Как сделать переключатель (toggle switch)Переключатель вкл/выкл из обычного чекбокса: appearance none, псевдоэлемент-кружок и :checked.
- Как сделать подсказки при вводе в полеСписок вариантов для поля через datalist: подсказки при вводе с возможностью написать своё значение.
- Как сделать поле обязательнымАтрибут required: форма не отправится с пустым полем, звёздочка у подписи и оформление через :required.
- Как сделать поле поискаПоиск по сайту: input type search, элемент search, кнопка рядом с полем и значок лупы внутри.
- Как сделать ползунок (range)Ползунок input type range: min, max, step, вывод значения через output и цвет через accent-color.
Списки и таблицы
- Как выровнять столбцы таблицыВыравнивание в таблице: числа по правому краю, text-align для столбца через nth-child, vertical-align и цифры одинаковой ширины.
- Как добавить рамки в таблицуРамки таблицы в CSS: border-collapse, отступы в ячейках и рамка только между строками.
- Как задать ширину столбцов таблицыШирина колонок: table-layout fixed, colgroup и col, ширина первой строки и обрезка длинного текста в ячейке.
- Как закрепить шапку таблицы при прокруткеЛипкий заголовок таблицы: position sticky у th, фон для шапки и прокрутка внутри блока с ограниченной высотой.
- Как изменить маркеры спискаСвои маркеры у ul: list-style-type со строкой или эмодзи, цвет через ::marker и картинка-маркер через ::before.
- Как изменить нумерацию спискаНумерованный список ol: буквы и римские цифры через type и list-style-type, начало с нужного числа и обратный отсчёт.
- Как объединить ячейки таблицыАтрибуты colspan и rowspan: ячейка на несколько столбцов или строк и как не сломать таблицу лишними ячейками.
- Как сделать вложенный списокМногоуровневый список: вложенный ul или ol внутри li, разные маркеры уровней и нумерация 1.1, 1.2 через counters.
- Как сделать горизонтальное меню из спискаНавигация из ul в строку: nav, flexbox, gap, разделители между пунктами и выделение текущей страницы.
- Как сделать полосатую таблицуЧередование цвета строк таблицы через :nth-child(even), подсветка строки при наведении и полосы только в tbody.
- Как сделать таблицу адаптивной с прокруткойШирокая таблица на телефоне: обёртка с overflow-x auto, запрет переноса в ячейках и подсказка для пользователя.
- Как убрать маркеры у спискаСписок без маркеров в CSS: list-style none, сброс отступа и сохранение смысла списка.
Эффекты и анимация
- Как анимировать высоту до autoПлавное раскрытие блока до высоты по содержимому: interpolate-size allow-keywords, функция calc-size() и запасной приём с grid-template-rows.
- Как анимировать открытие диалога или поповераПлавное появление и исчезновение dialog и popover на CSS: @starting-style для входа, transition-behavior allow-discrete для display и overlay.
- Как добавить теньТень блока в CSS: свойство box-shadow, мягкие и многослойные тени, внутренняя тень и тень при наведении.
- Как отключить анимацию для тех, кто этого проситМедиазапрос prefers-reduced-motion: как убрать или смягчить анимации, если человек включил в системе уменьшение движения.
- Как повернуть элементПоворот в CSS: свойство rotate и функция rotate() в transform, точка вращения и поворот при наведении.
- Как размыть фон под элементомЭффект матового стекла: backdrop-filter blur с полупрозрачным фоном, а также размытие самого элемента через filter.
- Как сделать индикатор загрузкиКрутящийся индикатор загрузки на чистом CSS: круг с цветной рамкой, @keyframes с поворотом и подпись для экранных дикторов.
- Как сделать индикатор прочтения страницыПолоса, которая растёт при прокрутке: анимация по скроллу через animation-timeline и scroll(), без JavaScript, и запасной вариант.
- Как сделать картинку чёрно-белойЧёрно-белое фото на CSS через filter grayscale, возврат цвета при наведении и другие фильтры: яркость, сепия, контраст.
- Как сделать плавное появление элементаПоявление элемента с прозрачности: animation с @keyframes, сдвиг снизу и @starting-style для элементов, которые показываются позже.
- Как сделать плавный переходПлавная смена стилей в CSS: свойство transition, длительность, функции плавности и задержка.
- Как сделать пульсирующую анимациюПульсация в CSS: увеличение и уменьшение через scale, расходящееся кольцо из box-shadow и бесконечный повтор.
- Как сделать эффект при наведенииИзменение вида элемента при наведении курсора: псевдокласс :hover, плавность через transition и фокус с клавиатуры.
- Как увеличить элемент при наведенииУвеличение карточки или картинки при наведении: свойство scale с transition и зум картинки внутри рамки.
Готовые элементы интерфейса
- Как привязать подсказку к кнопке через anchor positioningЯкорное позиционирование в CSS: anchor-name, position-anchor, position-area и anchor(), подсказка в popover и переворот при нехватке места.
- Как сделать аккордеонРаскрывающиеся блоки на details и summary без JavaScript: оформление, свой значок и только один открытый блок через name.
- Как сделать бейдж или меткуМаленькие метки «New» и счётчики уведомлений: span со скруглением, кружок с числом в углу кнопки.
- Как сделать вкладкиПереключаемые вкладки на CSS: радиокнопки, label и :checked, а также когда нужен JavaScript и роли ARIA.
- Как сделать всплывающее уведомлениеКороткое уведомление в углу экрана: блок с position fixed, появление через popover и анимация, автоскрытие скриптом.
- Как сделать всплывающую подсказкуПодсказка при наведении: атрибут title, своя подсказка через ::after и data-атрибут и показ при фокусе с клавиатуры.
- Как сделать выпадающее менюВыпадающее меню без JavaScript: details с абсолютным позиционированием и атрибут popover для меню поверх всей страницы.
- Как сделать карточкуКарточка товара или статьи: картинка, заголовок, текст и кнопка внизу, скругление и тень, вся карточка как ссылка.
- Как сделать карусель без JavaScriptЛистаемая лента карточек или слайдов на CSS: горизонтальная прокрутка и scroll-snap, чтобы слайд вставал ровно.
- Как сделать меню-гамбургер без JavaScriptМеню, которое открывается кнопкой с тремя полосками, на чистом CSS: флажок, label и :has(), а также вариант с popover.
- Как сделать модальное окноМодальное окно на теге dialog: открытие через showModal, закрытие формой, затемнение фона через ::backdrop.
- Как сделать полосу прогрессаИндикатор прогресса: тег progress с оформлением, своя полоса на div с ролью progressbar и шкала meter.
- Как сделать таблицу тарифовБлок с тарифами: карточки на grid, выделенный рекомендуемый тариф и кнопки на одном уровне.
- Как сделать хлебные крошкиЦепочка навигации «Главная / Раздел / Страница»: nav и ol, разделители через ::before и aria-current для текущей страницы.
Страница, SEO и доступность
- Как добавить meta viewport для мобильныхМета-тег viewport: зачем он нужен телефону, правильное значение и почему нельзя запрещать масштабирование.
- Как задать заголовок и описание страницыТеги title и meta description: что показывается во вкладке и в поисковой выдаче и сколько символов писать.
- Как настроить превью ссылки для соцсетей (Open Graph)Мета-теги og:title, og:description, og:image и og:url: как выглядит ссылка на сайт в мессенджерах и соцсетях.
- Как подключить CSS-файл к страницеВнешняя таблица стилей через link rel stylesheet, пути к файлу, тег style и порядок подключения.
- Как правильно разметить страницу семантическими тегамиКаркас страницы из header, nav, main, article, aside и footer вместо одних div и зачем это нужно.
- Как проверить HTML на ошибкиПроверка разметки валидатором W3C: как загрузить страницу, читать сообщения и почему браузер молча исправляет ошибки.
- Как сделать ссылку «Перейти к содержимому»Skip link для клавиатуры: скрытая ссылка в начале страницы, которая появляется при фокусе и ведёт к main.
- Как сделать стили для печатиМедиазапрос @media print: скрыть меню и кнопки, чёрный текст на белом, адреса ссылок и разрывы страниц.
- Как сделать страницу доступнойОсновы доступности: alt у картинок, подписи к полям, настоящие кнопки, видимый фокус, контраст и порядок заголовков.
- Как скрыть страницу от поисковиковМета-тег robots noindex, nofollow для ссылок, файл robots.txt и чем они отличаются.
- Как указать язык страницыАтрибут lang у html и отдельных фрагментов: произношение в скринридерах, переносы, кавычки и перевод страницы.
- Как ускорить загрузку страницыБыстрая страница средствами HTML и CSS: размеры и ленивая загрузка картинок, fetchpriority, srcset и sizes, preload шрифта, defer и content-visibility.
Видимость и порядок элементов
- Как запретить выделение текстаСвойство user-select: none для кнопок и элементов управления, all для выделения одним щелчком и цвет выделения через ::selection.
- Как запретить прокрутку страницы под модальным окномБлокировка прокрутки body через overflow hidden и :has(dialog[open]), overscroll-behavior и скачок из-за полосы прокрутки.
- Как показать элемент при наведенииПоявление блока при наведении на родителя: :hover, opacity с transition и :focus-within для клавиатуры.
- Как поменять элементы местамиПорядок элементов без изменения HTML: свойство order во flexbox и grid, flex-direction reverse и grid-template-areas.
- Как сделать элемент некликабельнымpointer-events none для щелчков сквозь элемент, атрибут inert для блокировки целой области и disabled для полей и кнопок.
- Как скрыть элементСпособы скрыть элемент: display none, атрибут hidden, visibility hidden и opacity — и чем они отличаются.
- Как скрыть элемент визуально, но оставить для скринридеровКласс sr-only (visually-hidden): текст не виден на экране, но его читают программы чтения с экрана.