Справочник HTML & CSS
Справочник HTML & CSS
Функции, классы и методы HTML & CSS: синтаксис, параметры, возвращаемые значения и примеры.
HTML: документ и метаданные
- defer, asyncАтрибуты внешнего `<script>`, которые загружают его, не останавливая разбор страницы; различаются тем, когда скрипт выполняется.
- <base>Задаёт базовый адрес и цель по умолчанию для всех ссылок страницы.
- <body>Видимая часть страницы: всё, что видит пользователь.
- <!DOCTYPE>Объявление типа документа: говорит браузеру, что страница написана на современном HTML.
- <head>Служебная часть страницы: кодировка, заголовок вкладки, подключение стилей и скриптов.
- <html>Корневой элемент страницы: внутри него находятся `<head>` и `<body>`.
- <link>Подключает к странице внешний ресурс: файл стилей, иконку сайта, шрифт.
- <meta>Метаданные страницы: кодировка, настройки для телефонов, описание для поиска.
- <script>Подключает или встраивает JavaScript; `<noscript>` показывает запасное содержимое, если скрипты выключены.
- <style>Встраивает CSS прямо в HTML-страницу.
- <title>Заголовок страницы: текст на вкладке браузера и в результатах поиска.
HTML: текст и структура
- <a>Ссылка на другую страницу, файл или место на странице.
- <abbr>Сокращение или аббревиатура с расшифровкой.
- <address>Контактные данные автора или владельца страницы.
- downloadЗаставляет ссылку сохранить файл, а не открыть его, при желании под другим именем.
- hrefАдрес, на который ведёт ссылка `<a>` или указывает `<link>`.
- target`target` выбирает, где открыть ссылку; `rel` описывает связь со страницей по ссылке.
- <b>, <i>, <u>Выделение без особой важности: `<b>` — жирным, `<i>` — курсивом, `<u>` — подчёркиванием.
- <bdi>Изолирует текст с неизвестным направлением письма, чтобы он не путал порядок соседних символов.
- <blockquote>Длинная цитата отдельным блоком.
- <br>Перенос строки внутри текста; `<wbr>` — место, где строку можно перенести при нехватке места.
- <cite>Название произведения: книги, фильма, статьи, песни.
- <code>Фрагмент кода внутри текста; показывается моноширинным шрифтом.
- <data>Связывает видимый текст с машиночитаемым значением — кодом товара, точным числом — для скриптов и поисковиков.
- <del>, <s>Зачёркнутый текст: `<del>` — удалённое из документа, `<s>` — устаревшее; `<ins>` — добавленное.
- <dfn>Отмечает термин, который определяется в этом предложении или абзаце.
- <div>Блочный контейнер без смысла: группирует элементы для оформления и раскладки.
- <em>Смысловое ударение в предложении; по умолчанию — курсив.
- <h1>–<h6>Заголовки шести уровней: `<h1>` — главный, `<h6>` — самый мелкий.
- <hr>Тематический разрыв между частями текста; по умолчанию — горизонтальная линия.
- <kbd>, <samp>, <var>Ввод с клавиатуры (`<kbd>`), вывод программы (`<samp>`) и переменная в формуле (`<var>`).
- <mark>Выделение текста маркером — например, совпадения в результатах поиска.
- <p>Абзац текста.
- <pre>Текст, в котором сохраняются все пробелы и переносы строк.
- <q>Короткая цитата внутри строки; браузер сам добавляет кавычки.
- <ruby>Мелкие пояснения над основным текстом (или сбоку от него) — подсказки чтения в китайском и японском, транскрипции, переводы.
- <small>Мелкий шрифт для примечаний: условия, авторские права, сноски.
- <span>Строчный контейнер без смысла: нужен, чтобы оформить часть текста.
- <strong>Важный текст; по умолчанию выделяется жирным.
- <sub>, <sup>Нижний (`<sub>`) и верхний (`<sup>`) индекс.
- <time>Дата или время, понятные и человеку, и программам.
HTML: разделы страницы
- <article>Самостоятельный фрагмент, понятный и вне страницы: статья, пост, отзыв, карточка товара.
- <aside>Дополнительный блок, связанный с основным содержимым косвенно: боковая колонка, врезка, реклама.
- <figure>Самостоятельная иллюстрация — картинка, схема, код или цитата — с подписью `<figcaption>`.
- <footer>Подвал страницы или раздела: контакты, копирайт, ссылки.
- <header>Шапка страницы или раздела: логотип, заголовок, навигация.
- <hgroup>Заголовок вместе с подзаголовком или слоганом.
- <main>Основное содержимое страницы — то, ради чего её открыли.
- <nav>Блок основной навигации: меню сайта, оглавление, хлебные крошки.
- <search>Область поиска или фильтрации на странице.
- <section>Тематический раздел страницы с собственным заголовком.
HTML: списки и таблицы
- <caption>Название таблицы.
- <colgroup>, <col>Описывает столбцы таблицы, чтобы задать им ширину или фон.
- <dl>Список определений: термины `<dt>` и их описания `<dd>`.
- <li>Пункт списка `<ul>`, `<ol>` или `<menu>`.
- <menu>Список команд — например, панель кнопок; ведёт себя как `<ul>`.
- <ol>Нумерованный список: пункты, порядок которых важен.
- <table>Таблица из строк `<tr>` и ячеек.
- <td>, <th>Ячейки таблицы: `<td>` — с данными, `<th>` — заголовочная.
- <thead>, <tbody>, <tfoot>Группы строк таблицы: шапка, тело и итоговая часть.
- <ul>Маркированный список: пункты, порядок которых не важен.
HTML: изображения и медиа
- altТекстовая альтернатива картинке: читается программами чтения с экрана и показывается, если картинка не загрузилась.
- fetchpriorityПодсказка, насколько срочен ресурс по сравнению с другими того же типа, — например, чтобы главный баннер загрузился раньше остальных картинок.
- loadingОтложенная загрузка картинок и фреймов, которые пока не видны.
- srcАдрес встраиваемого файла у `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.
- srcsetНесколько файлов одной картинки разного размера: браузер выбирает подходящий для экрана.
- <audio>Встраивает аудиоплеер.
- <canvas>Холст, на котором рисуют из JavaScript: графики, игры, эффекты.
- <iframe>Встраивает другую страницу внутрь текущей: карту, видео, виджет.
- <img>Картинка.
- <map>, <area>Карта ссылок на картинке: разные области изображения ведут по разным адресам.
- <object>, <embed>Встраивают внешний файл — например, PDF — средствами браузера.
- <picture>Контейнер для нескольких вариантов картинки: браузер выбирает подходящий `<source>` или берёт `<img>`.
- <source>Один из вариантов файла для `<video>`, `<audio>` или `<picture>`.
- <svg>Векторная графика прямо в HTML: фигуры, иконки, схемы.
- <track>Подключает к видео субтитры или главы.
- <video>Встраивает видео в страницу.
HTML: формы
- autocompleteПодсказывает браузеру, какие сохранённые данные подставить в поле.
- disabledОтключает элемент формы: с ним нельзя взаимодействовать, и его значение не отправляется.
- inputmodeПодсказывает телефонам и планшетам, какую экранную клавиатуру показать для поля, не меняя того, что поле принимает.
- patternШаблон (регулярное выражение), которому должно соответствовать значение поля.
- placeholderПодсказка-пример внутри пустого поля.
- requiredДелает поле обязательным: форма не отправится, пока оно пустое.
- typeВид поля `<input>`: от текста и чисел до даты, цвета и файла.
- <button>Кнопка: отправляет форму или запускает действие.
- <datalist>Список подсказок для текстового поля: можно выбрать вариант или ввести свой.
- <fieldset>, <legend>Группа связанных полей формы с заголовком `<legend>`.
- <form>Форма: собирает данные из полей и отправляет их на сервер.
- <input>Поле ввода; вид поля задаёт атрибут `type`.
- <input type="checkbox">Флажок (`checkbox`) — независимый выбор «да/нет»; переключатель (`radio`) — один вариант из группы.
- <label>Подпись к полю формы.
- <meter>Шкала величины в известном диапазоне: заряд, заполненность, оценка.
- <option>, <optgroup>Пункт списка `<select>` или `<datalist>`; `<optgroup>` объединяет пункты в группы.
- <output>Результат вычисления или действия пользователя.
- <progress>Индикатор выполнения задачи: загрузки, шагов формы.
- <select>Выпадающий список вариантов.
- <textarea>Многострочное текстовое поле.
HTML: интерактивные элементы
- <details>, <summary>Раскрывающийся блок без JavaScript: `<summary>` — видимый заголовок, остальное скрыто до клика.
- <dialog>Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.
- <template>, <slot>Заготовка разметки, которая не показывается, пока её не скопирует JavaScript; `<slot>` — место для вставки в веб-компонентах.
HTML: общие атрибуты
- accesskeyКлавиша быстрого доступа для элемента.
- aria-*Атрибуты доступности: роль, название и состояние элемента для программ чтения с экрана.
- autofocusСтавит фокус на элемент сразу после загрузки страницы или открытия диалога.
- classОдин или несколько классов элемента — основной способ обратиться к нему из CSS.
- contenteditableДелает содержимое элемента редактируемым прямо на странице.
- data-*Свои атрибуты для хранения данных в разметке; имя начинается с `data-`.
- dirНаправление письма: слева направо или справа налево.
- draggableРазрешает или запрещает перетаскивание элемента мышью.
- hiddenСкрывает элемент: он не показывается и недоступен программам чтения с экрана.
- idУникальный идентификатор элемента на странице.
- inertДелает часть страницы неактивной: по ней нельзя кликнуть, перейти клавишей Tab или выделить текст.
- langЯзык содержимого элемента.
- popoverПревращает элемент во всплывающий слой поверх страницы — без JavaScript.
- spellcheckВключает или выключает проверку орфографии в поле.
- styleCSS-свойства прямо на элементе (встроенные стили).
- tabindexУправляет тем, можно ли перейти к элементу клавишей Tab.
- titleДополнительная информация об элементе; показывается подсказкой при наведении мыши.
- translate="no"Подсказывает автоматическим переводчикам, что текст переводить не нужно.
CSS: селекторы и псевдоклассы
- :activeСрабатывает, пока элемент нажимают, — между нажатием и отпусканием кнопки мыши.
- :checkedСрабатывает у отмеченного флажка или переключателя и у выбранного `<option>`.
- :disabledСрабатывает у элементов формы с атрибутом `disabled`; `:enabled` — у активных.
- ::afterСоздаёт виртуальный последний дочерний элемент — для значков, пометок и украшений после содержимого.
- ::backdropСлой прямо под модальным `<dialog>` или элементом в полноэкранном режиме.
- ::beforeСоздаёт виртуальный первый дочерний элемент — для декоративного текста или фигур.
- ::file-selector-buttonКнопка «Выберите файл» внутри `<input type="file">`; позволяет оформить её как остальные кнопки на странице.
- ::first-letterОформляет первую букву первой строки блока — для буквиц.
- ::first-lineОформляет первую отображённую строку блока — сколько бы слов на ней ни поместилось.
- ::markerМаркер или номер пункта списка.
- ::placeholderТекст-подсказка поля из атрибута `placeholder`.
- ::selectionЧасть текста, которую выделил пользователь.
- :emptyСрабатывает у элемента без детей и без текста.
- :first-childСрабатывает у элемента, который стоит первым среди детей своего родителя.
- :focusСрабатывает у элемента, на котором сейчас фокус: поле, в которое вводят текст, кнопка, выбранная клавишей Tab.
- :focus-visibleСрабатывает у элемента в фокусе, когда браузер считает, что фокус нужно показать, — обычно после перехода с клавиатуры.
- :has()Выбирает элемент, внутри которого есть что-то подходящее под селектор в скобках, — «селектор родителя».
- :hoverСрабатывает, пока над элементом находится указатель мыши.
- :is()Срабатывает, если элемент подходит под любой селектор из списка, — способ сократить длинные списки селекторов.
- :last-childСрабатывает у элемента, который стоит последним среди детей своего родителя.
- :not()Выбирает элементы, которые не подходят ни под один из селекторов в скобках.
- :nth-child()Выбирает детей по их номеру: третий, каждый чётный, каждый третий.
- :nth-of-type()Как `:nth-child()`, но считает только соседей с тем же тегом.
- :placeholder-shownСрабатывает для `<input>` или `<textarea>`, пока виден их текст-подсказка, то есть пока поле пустое.
- :requiredСрабатывает у полей с атрибутом `required`; `:optional` — у полей без него.
- :rootСрабатывает у корневого элемента документа — на веб-странице это `<html>`.
- :targetСрабатывает у элемента, чей `id` совпадает с фрагментом адреса после `#`.
- :user-invalidСрабатывает у ошибочного поля только после того, как пользователь с ним поработал; `:user-valid` — наоборот.
- :valid`:valid` срабатывает у поля, значение которого проходит встроенные проверки, `:invalid` — у поля, которое их не проходит.
- :visitedСрабатывает у ссылок, которые пользователь уже открывал; `:link` — у ещё не посещённых.
- :where()Работает как `:is()`, но всегда имеет нулевую специфичность.
- [attr]Выбирает элементы по атрибуту или его значению.
- A > BКомбинатор дочернего элемента: выбирает элементы B, которые являются прямыми детьми A.
- .classВыбирает элементы, у которых в атрибуте `class` есть указанный класс.
- A BКомбинатор потомка: выбирает элементы B, которые находятся где угодно внутри элемента A.
- #idВыбирает единственный элемент с указанным атрибутом `id`.
- A, BСписок селекторов: одно правило для нескольких селекторов через запятую.
- &Селектор вложенности: во вложенном правиле `&` обозначает родительский селектор.
- A + BКомбинаторы соседей: `+` выбирает элемент сразу после A, `~` — всех следующих соседей A.
- tagСелектор по тегу выбирает все элементы с этим тегом, универсальный селектор `*` — вообще все элементы.
CSS: текст и шрифты
- counter-reset`counter-reset` создаёт CSS-счётчик (или сбрасывает его), `counter-increment` увеличивает его на каждом подходящем элементе; значение выводится через `counter()`.
- fontСокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.
- font-displayДескриптор `@font-face` (не обычное свойство): определяет, как выглядит текст, пока веб-шрифт ещё загружается.
- font-familyСемейство шрифта со списком запасных вариантов.
- font-sizeРазмер шрифта.
- font-styleКурсив или обычный текст.
- font-variation-settingsЗадаёт оси вариативного шрифта напрямую — насыщенность, ширину, наклон или собственные оси шрифта — любым числом, а не фиксированными шагами.
- font-weightНасыщенность (жирность) шрифта.
- hyphensАвтоматический перенос слов по слогам в конце строки.
- letter-spacingДополнительное расстояние между буквами.
- line-heightВысота строки текста — расстояние между строками.
- list-styleВид маркеров списка: тип, положение и картинка.
- overflow-wrapРазрешает разрывать длинное слово, чтобы оно не вылезало за блок.
- text-alignВыравнивание текста и строчного содержимого внутри блока по горизонтали.
- text-decorationЛинии на тексте: подчёркивание, зачёркивание, надчёркивание.
- text-indentОтступ первой строки блока.
- text-overflowКак обрезается текст, который не помещается: резко или с многоточием.
- text-shadowТень за буквами текста.
- text-transformМеняет регистр букв при отображении.
- text-wrapКак переносятся строки: обычно, с выравниванием длины или без одинокого слова в конце.
- vertical-alignВыравнивание строчного элемента по вертикали внутри строки или содержимого в ячейке таблицы.
- white-spaceЧто делать с пробелами и переносами строк из исходного кода и можно ли переносить строки.
- word-breakМожно ли разрывать слова между любыми буквами.
- word-spacingДополнительное расстояние между словами.
- writing-modeЗадаёт направление строк: горизонтальное (обычное) или вертикальное, как в японском тексте или на корешке книги.
CSS: цвет, фон и рамки
- accent-colorАкцентный цвет встроенных элементов формы: флажков, переключателей, ползунков и индикаторов.
- backgroundСокращённая запись всех свойств фона: цвета, картинки, положения, размера и повторения.
- background-colorЦвет фона элемента.
- background-imageОдна или несколько фоновых картинок: файлы или градиенты.
- background-positionГде внутри блока находится фоновая картинка.
- background-repeatПовторяется ли фоновая картинка, чтобы заполнить блок.
- background-sizeРазмер фоновой картинки.
- borderРамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
- border-collapseРаздельные у ячеек таблицы рамки или слитые в одну линию.
- border-radiusСкругляет углы элемента.
- box-shadowТень вокруг блока элемента.
- colorЦвет текста (а также цвет рамок и SVG-значков по умолчанию).
- color-schemeСообщает браузеру, какие цветовые схемы поддерживает страница, чтобы встроенные элементы и полосы прокрутки им соответствовали.
- opacityПрозрачность всего элемента вместе с содержимым.
- outlineОбводка вокруг элемента, которая не занимает места и не сдвигает соседей.
CSS: размеры и отступы
- aspect-ratioСоотношение ширины и высоты: недостающий размер браузер вычисляет сам.
- box-sizingВходят ли в `width` и `height` внутренние отступы и рамка.
- heightВысота элемента.
- marginВнешний отступ элемента — расстояние до соседей.
- margin-inlineЛогические свойства: размеры и отступы по направлению текста вместо «слева», «справа», «сверху», «снизу».
- max-heightМаксимальная высота: элемент растёт вместе с содержимым только до этого предела.
- max-widthМаксимальная ширина: элемент может быть уже, но не шире.
- min-heightМинимальная высота: элемент не ниже этой высоты, но может расти.
- min-widthМинимальная ширина: уже элемент стать не может.
- object-fitКак картинка `<img>` или `<video>` вписывается в размеры элемента.
- object-positionКакая часть обрезанной `<img>` или `<video>` остаётся видна.
- overflowЧто делать с содержимым, которое не помещается в элемент.
- paddingВнутренний отступ между содержимым и рамкой элемента.
- widthШирина элемента.
CSS: отображение и позиционирование
- anchor-nameДелает элемент якорем с именем, чтобы абсолютно позиционированный элемент из любого места страницы можно было поставить рядом с ним.
- appearanceОтключает встроенный вид элементов формы, чтобы оформить их с нуля.
- clearЗаставляет элемент начаться ниже плавающих элементов перед ним.
- containОбещает браузеру, что элемент не зависит от остальной страницы, поэтому изменения внутри него не заставляют пересчитывать всю страницу.
- contentСодержимое псевдоэлементов `::before` и `::after`.
- content-visibilityПозволяет браузеру не раскладывать и не рисовать содержимое элемента, пока он за пределами экрана, — дешёвое ускорение длинных страниц.
- cursorВид указателя мыши над элементом.
- displayОпределяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- floatПрижимает элемент к левому или правому краю, чтобы текст обтекал его.
- anchor()Возвращает положение стороны якоря; используется в `top`, `left`, `right`, `bottom`, чтобы привязать к нему элемент.
- pointer-eventsРеагирует ли элемент на щелчки и касания или пропускает их к тому, что под ним.
- positionКак позиционируется элемент: в обычном потоке или по смещениям.
- position-anchorВыбирает якорь по умолчанию для элемента с `position: absolute` или `fixed`; от него затем считают `position-area` и `anchor()`.
- position-areaСтавит привязанный элемент в одну из девяти ячеек воображаемой сетки 3 × 3 вокруг якоря.
- position-try-fallbacksПеречисляет запасные положения привязанного элемента; браузер берёт первое, в котором элемент помещается на экране. Свои положения описываются правилом `@position-try`.
- resizeМожет ли пользователь менять размер элемента, перетаскивая его угол.
- scroll-behaviorПроисходят ли переходы к якорям и прокрутка из кода мгновенно или плавно.
- scroll-marginДополнительное место вокруг элемента, когда страница прокручивается к нему, — чтобы он не оказался под фиксированной шапкой.
- scroll-snap-typeЗаставляет прокручиваемый контейнер останавливаться точно на дочерних элементах — для слайдеров и галерей.
- shape-outsideЗадаёт форму, которую обтекает текст рядом с плавающим элементом, — круг, многоугольник или контур картинки.
- top, right, bottom, leftСмещения позиционированного элемента от краёв области отсчёта: сверху, справа, снизу и слева.
- user-selectМожет ли пользователь выделять текст элемента.
- visibilityСкрывает элемент, но сохраняет занятое им место.
- z-indexКакой из позиционированных элементов рисуется сверху, когда они перекрываются.
CSS: flexbox и grid
- align-contentРаспределяет строки многострочного flex-контейнера или ряды сетки вдоль поперечной оси.
- align-itemsВыравнивает элементы поперёк главной оси — в ряду это по вертикали.
- align-selfВыравнивает один элемент поперёк главной оси, перекрывая `align-items` контейнера.
- flexСокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
- flex-basisНачальный размер flex-элемента вдоль главной оси до раздачи свободного места.
- flex-directionНаправление главной оси flex-контейнера: элементы в ряд или в столбик.
- flex-growКакую часть свободного места забирает flex-элемент.
- flex-shrinkНасколько сжимается flex-элемент, когда места не хватает.
- flex-wrapМогут ли flex-элементы переноситься на новые строки.
- gapПромежутки между элементами во flexbox и grid.
- grid-areaПомещает элемент сетки в именованную область или между заданными линиями.
- grid-auto-flowКак сетка размещает элементы без явно заданного места.
- grid-columnКакие колонки занимает элемент сетки.
- grid-rowКакие ряды занимает элемент сетки.
- grid-template-areasРисует раскладку сетки картой именованных областей.
- grid-template-columnsКоличество и ширина колонок сетки.
- grid-template-rowsКоличество и высота рядов сетки.
- justify-contentРаспределяет элементы вдоль главной оси flex- или grid-контейнера.
- justify-itemsВыравнивает элементы сетки по горизонтали внутри их ячеек.
- orderМеняет видимый порядок flex- или grid-элемента.
- place-itemsЗадаёт `align-items` и `justify-items` сразу.
- subgridЗначение `grid-template-columns` и `grid-template-rows`, с которым вложенная сетка использует дорожки родительской сетки.
CSS: эффекты и анимация
- animationЗапускает на элементе анимацию из `@keyframes`.
- animation-rangeЗадаёт, какую часть шкалы прокрутки занимает анимация — например, только пока элемент въезжает на экран.
- animation-timelineСвязывает CSS-анимацию с прокруткой вместо времени: анимация продвигается по мере прокрутки страницы или элемента.
- backdrop-filterПрименяет фильтры ко всему, что находится за элементом, — эффект матового стекла.
- clip-pathОбрезает элемент по фигуре: видимой остаётся только часть внутри неё.
- filterГрафические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
- scroll()Создают безымянные шкалы прокрутки для `animation-timeline`: `scroll()` следит за прокручиваемым контейнером, `view()` — за проходом самого элемента через видимую область.
- interpolate-sizeРазрешает переходы к ключевым словам размера и от них — `auto`, `min-content`, `fit-content`. Наконец-то `height: 0` → `height: auto`.
- mask-imageИспользует картинку или градиент как маску: где маска непрозрачна, элемент виден, где прозрачна — исчезает.
- mix-blend-modeКак цвета элемента смешиваются с тем, что под ним, — как режимы слоёв в графическом редакторе.
- transformСдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.
- transitionПлавно анимирует изменение свойства от старого значения к новому.
- transition-behaviorРазрешает переходы дискретных свойств вроде `display` и `overlay`, чтобы элемент успел плавно исчезнуть, прежде чем пропасть.
- translate, rotate, scaleОтдельные свойства для сдвига, поворота и масштаба — вместо функций в `transform`.
- view-transition-nameДаёт элементу имя, чтобы переход между состояниями анимировал его отдельно от остальной страницы.
- will-changeПредупреждает браузер, что свойство скоро изменится, чтобы он подготовился заранее.
CSS: функции и значения
- calc()Вычисляет значение из выражения — даже в разных единицах.
- clamp()Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
- color-mix()Смешивает два цвета в заданной пропорции.
- counter()Выводит значение CSS-счётчика в `content`; `counters()` выводит сразу все вложенные уровни, например 2.1.3.
- env()Читает значения, заданные устройством, например безопасные области вокруг выреза и скруглённых углов телефона.
- fit-content()Дорожка сетки по ширине содержимого, но не шире предела.
- hsl()Цвет по тону, насыщенности и светлоте.
- light-dark()Выбирает один из двух цветов в зависимости от текущей цветовой схемы.
- linear-gradient()Плавный переход между цветами вдоль прямой — используется как фоновая картинка.
- max()Берёт наибольшее из значений — способ задать нижний предел.
- min()Берёт наименьшее из значений — способ задать верхний предел.
- minmax()Размер дорожки сетки между минимумом и максимумом.
- oklch()Цвет в пространстве OKLCH: воспринимаемая светлота, насыщенность и тон.
- radial-gradient()Переход между цветами от центра к краям.
- repeat()Повторяет дорожки сетки, чтобы не выписывать их по одной.
- rgb()Цвет из красной, зелёной и синей составляющих, по желанию с прозрачностью.
- url()Ссылка на файл: картинку, шрифт, таблицу стилей.
- var()Подставляет значение пользовательского свойства (переменной CSS).
- inherit, initial, unset, revertКлючевые слова, которые работают в любом свойстве и по-разному его сбрасывают.
- !importantЗаставляет объявление побеждать все обычные объявления независимо от специфичности.
- px, em, rem, %, vw, vhЕдиницы длины в CSS: абсолютные пиксели и относительные единицы.
CSS: @-правила
- @containerПрименяет правила в зависимости от размера контейнера, а не окна.
- @counter-styleОписывает собственный стиль нумерации списка, который затем можно использовать в `list-style-type` и `counter()`.
- @font-faceПодключает шрифт и даёт ему имя для использования в `font-family`.
- @importПодключает другой CSS-файл в текущий.
- @keyframesОписывает шаги анимации, которую затем запускают свойством `animation`.
- @layerГруппирует стили в каскадные слои: более поздний слой побеждает независимо от специфичности.
- @propertyРегистрирует пользовательское свойство с типом, чтобы браузер мог его анимировать и проверять значение.
- @scopeПрименяет правила только внутри заданного элемента (корня области), при желании останавливаясь на внутренней границе.
- @starting-styleЗадаёт стили, с которых элемент начинает при первом появлении, чтобы `transition` анимировал его появление.
- @supportsПрименяет правила, только если браузер поддерживает указанное свойство, значение или селектор.
- @view-transitionВключает анимированные переходы между страницами одного сайта.
- @mediaПрименяет правила только при заданных условиях — ширине окна, теме системы и других.