Итоговый тест по учебнику CSS

Структуру и смысл содержимого описывает HTML. CSS оформляет уже размеченные элементы.

Каскадные таблицы стилей определяют, как выглядит документ, в том числе на разных экранах и при печати.

Поведение страницы программируют на JavaScript. CSS — язык оформления.

Это объявление. Селектор записывается перед фигурными скобками.

Селектор выбирает элементы, а блок объявлений после него задаёт их оформление. Например, h1 выбирает все заголовки первого уровня.

Файл указывают в атрибуте href элемента <link>. Селектор — часть CSS-правила.

Наоборот: text-align задаёт, что меняем, а center — какое выравнивание выбираем.

Имя свойства записывают перед двоеточием, значение — после него.

Это объявление внутри блока. Селектор записывается перед блоком и выбирает элементы.

Селектор типа p выбирает все элементы с этим именем тега.

Селектор типа не ограничивается первым элементом: правило применяется ко всем абзацам.

Селектор p выбирает элементы по имени тега, а не по атрибуту id.

Браузер не исправляет такие ошибки. Объявления разделяет только точка с запятой.

Без точки с запятой после saddlebrown браузер читает saddlebrown text-align: center как одно значение свойства color. Значение неверное, и объявление пропускается целиком.

Браузер не видит границы первого объявления, поэтому неверным становится и цвет: значением color он считает весь текст до точки с запятой.

Атрибут style задаёт оформление конкретного элемента; некоторые свойства могут наследоваться вложенными элементами. Внутренняя таблица действует на своей странице, внешняя подключается к любому числу страниц.

Внешняя таблица — лучший способ для сайта, но стили можно записать и в атрибуте style, и в элементе <style>.

Атрибут style — лишь один из способов, и для сайта самый неудобный: стиль приходится повторять у каждого элемента.

Атрибут style задаёт встроенный стиль одного элемента, а не таблицу стилей.

Отдельный файл — это внешняя таблица стилей. Внутренняя находится на самой странице.

Элемент <style> сообщает браузеру, что внутри CSS-код, и располагается в заголовочной части документа.

Атрибут rel="stylesheet" сообщает, что это таблица стилей, а href — где лежит файл. Элемент размещают в <head>.

Без rel="stylesheet" браузер не знает, что файл нужно применить как таблицу стилей.

У элемента <style> нет атрибута для подключения файла: внутри него записывают сам CSS-код.

Атрибут style — встроенный стиль одного элемента, а не таблица стилей.

Отдельный файл — внешняя таблица стилей. Она подключается элементом <link>.

Элемент <style> сообщает браузеру, что внутри находится CSS-код. Эти правила действуют только на свою страницу.

Элемент <link> записывают в <head> HTML-страницы, а не в самом файле стилей.

HTML-теги, в том числе <style>, в CSS-файле записывать нельзя. Переносится только содержимое элемента.

Внешняя таблица стилей содержит только CSS-код: правила и комментарии.

Папка css лежит рядом с index.html, поэтому путь начинается с её имени. Атрибут rel="stylesheet" сообщает, что это таблица стилей.

Без rel="stylesheet" браузер не знает, что файл — таблица стилей, и не применит его.

У элемента <style> нет атрибута для подключения файла: внешний файл подключают элементом <link>.

Относительный путь отсчитывается от папки страницы. Со страницы игрушек браузер ищет pages/css/style.css, которого нет. ../ поднимает на уровень выше.

Можно и нужно: общий файл стилей подключают ко всем страницам сайта, чтобы оформление было единым.

Тогда правила придётся повторять на каждой странице. Достаточно исправить путь в <link>.

Браузер не находит файл и показывает страницу без его правил. Сообщения об ошибке на странице нет, поэтому после подключения проверяйте результат.

Ошибка подключения стилей не мешает показать содержимое: страница откроется без правил из недоступного файла.

Браузер загружает только файл по указанному адресу и не ищет похожие файлы.

Так пришлось бы делать со встроенными стилями. Страницы только подключают файл, сами правила в них не записаны.

Это вернуло бы повторяющиеся встроенные стили, от которых мы избавились в задании.

В этом главное преимущество внешней таблицы стилей: правило записано один раз и действует на всех страницах, к которым подключён файл.

Эта команда показывает исходный HTML-код страницы в новой вкладке, без стилей элементов.

VS Code показывает исходный файл, но не то, какие правила браузер применил к элементу.

Панель откроется на вкладке «Элементы», и элемент, по которому вы кликнули, будет уже выбран.

Заменённое объявление тоже перечёркнуто, но без значка предупреждения: само по себе оно записано верно.

Значок предупреждения отмечает ошибочное объявление. Подсказка у значка — Unknown property name: в названии свойства опечатка.

Если бы файл не загрузился, его правил вообще не было бы на вкладке Styles.

Оба объявления верные, но для одного свойства действует записанное позже — color: dimgray. Первое заменено.

Одно из них применилось: абзац получил цвет dimgray.

Это объявление записано позже и применилось. Перечёркнуто то, которое оно заменило.

Без дополнительной настройки сохранения браузер снова применит исходные стили. Чтобы исправление сохранилось, внесите его в файл в VS Code.

Без дополнительной настройки инструменты разработчика не сохраняют правки Styles в исходные файлы.

После обновления правка пропадёт и на этой странице.

Network показывает загрузку файлов, а не значения свойств элементов.

Файл не показывает, какое из нескольких правил победило и что добавили стили браузера.

Computed показывает итоговые значения свойств, а стрелка рядом со свойством раскрывает правила, которые его задавали.

Эти ошибки означают, что файл не найден по указанному адресу. Подсказка у имени файла покажет, где браузер его искал; со страниц из pages путь начинается с ../.

Опечатки в свойствах не мешают загрузке файла: остальные правила появились бы на вкладке Styles.

Неверное значение отменяет одно объявление, но файл при этом загружается.

Селектор класса начинается с точки: .p. Без точки это селектор типа.

Селектор типа выбирает элементы по имени тега — все элементы этого типа.

Селектор типа не ограничивается первым элементом: он выбирает все подходящие.

Точка ставится только в селекторе таблицы стилей, а в атрибуте class имя записывают без неё.

С точкой в атрибуте имя класса стало .favorite — правило .favorite его не выберет.

Это идентификатор. Его выбирает селектор #favorite, а не селектор класса.

Знак подчёркивания и цифра не в начале имени допустимы.

Латинские буквы и дефис внутри имени допустимы.

Класс 50cent допустим в HTML, но в CSS начальную цифру нужно экранировать. Запись .50cent без экранирования неверна.

Это разные селекторы: они проверяют разные атрибуты — id и class.

Решётка обозначает идентификатор, точка — класс. Идентификатор уникален на странице, класс можно назначить многим элементам.

Элементы по имени тега выбирает селектор типа без символа перед именем.

Пробел вместо запятой означает селектор потомков: <h2> внутри <h1>. Такого на странице нет.

Это заголовок <h1> с классом h2.

Групповой селектор перечисляет селекторы через запятую: правило применится к элементам, подходящим под любой из них.

Этот способ работает, но требует добавить класс в HTML каждого заголовка. По условию HTML менять нельзя, а селектор h2 уже выбирает все нужные элементы.

Тег уже отличает заголовки разделов от остального содержимого — дополнительный класс не нужен.

Идентификаторы есть не у всех заголовков, а новый раздел пришлось бы добавлять и в селектор.

Селектор типа ul выберет и меню, и оглавление.

Класс нужен там, где тег не отличает нужный элемент от остальных.

Универсальный селектор выбирает все элементы страницы.

Потомок — элемент на любом уровне вложенности. Дочерний — только на один уровень ниже: <i> дочерний для <p>.

Между ними есть <p>, поэтому <i> — дочерний для <p>, а для <body> только потомок.

Соседние элементы — дети одного родителя. <i> вложен в <body>, а не стоит рядом.

Только непосредственных детей выбирает nav > a. Селектор потомков учитывает любой уровень.

Пробел означает селектор потомков: ссылки в пунктах списка внутри <nav> тоже подходят.

Это был бы групповой селектор nav, a — с запятой.

Селектор потомков выбирает только ссылки, у которых среди предков есть <nav>. Ссылка в абзаце раздела к меню не относится.

Файл стилей подключён ко всем страницам, и nav a работает на каждой из них.

Селектор nav a не проверяет классы: он проверяет положение элемента в дереве.

Знак > ограничивает выбор дочерними элементами. Ссылку внутри <em> в абзаце выберет только p a.

Пробел выбирает потомков на любом уровне, а > — только непосредственных детей.

Комбинатор выбирает правый элемент — ссылку, а не абзац.

Оба абзаца выберет общий соседний селектор h2 ~ p.

Абзац сразу после заголовка подходит под h2 + p.

Знак + выбирает только ближайший следующий элемент того же родителя.

Хотя элементы стоят рядом, их порядок обратный: в этом фрагменте абзац находится перед единственным заголовком. Поэтому его не выберет ни h2 + p, ни h2 ~ p.

В этом разделе перед абзацем нет заголовка <h2>. Селектор h2 ~ p выбирает абзац, только если перед ним есть <h2> с тем же родителем.

Комбинатор ~ выбирает следующих соседей. Здесь единственный заголовок находится после абзаца.

Это изображения, у которых самих есть класс gallery.

Запятая создаёт группу: правило применится к контейнеру и ко всем изображениям страницы.

Селектор потомков с классом слева выберет все изображения внутри контейнера и не затронет остальные.

Значения наследуемых свойств передаются от родителя к детям и далее, если потомкам не задано собственное значение.

Это задача каскада. Наследование передаёт значение родителя: автоматически для наследуемых свойств без собственного значения или явно через inherit.

Правило и так применяется ко всем элементам, которые выбирает его селектор. Наследование передаёт значения от родителя потомкам.

Отдельное правило не нужно: цвет наследуется автоматически. Именно поэтому наследование сокращает код.

Наследование не ограничено дочерними элементами: значение передаётся по цепочке через все уровни вложенности.

Свойство color наследуется потомками любого уровня: абзац получил цвет от <body> и передал его <strong>.

Свойство border не наследуется: иначе рамку получил бы каждый вложенный элемент.

Правило выбирает сам <body>, а ненаследуемое свойство потомкам не передаётся.

Границы, отступы, фон и размеры не наследуются. Наследуются в основном свойства текста.

Стили браузера задают цвет самой ссылке, а правило для элемента всегда сильнее унаследованного значения.

Значение color: initial задало бы системный цвет CanvasText. Здесь работает правило браузера для ссылок.

Цвет действительно наследуется, но только если элементу не задано своё значение. У ссылки оно есть в стилях браузера.

Сила селекторов сравнивается только между правилами, которые выбирают сам элемент. Правило #page выбирает <body>, а не заголовок.

Порядок здесь не важен: собственное правило элемента всегда побеждает наследование.

Правило h2 задано самому заголовку, а от #page он получил бы только унаследованное значение. Селектор родителя на это не влияет.

Значение из стилей браузера вернуло бы ключевое слово revert.

Так работает initial. unset даёт начальное значение только ненаследуемым свойствам.

color наследуется, поэтому unset работает как inherit и берёт значение родителя.

Свойства шрифта наследуются: поэтому font-family у <body> меняет шрифт абзацев и заголовков.

Поля находятся внутри <body>, как и всё видимое содержимое страницы.

Как и у ссылок, у полей есть собственное значение из стилей браузера. Правило font: inherit возвращает им шрифт родителя.

В справочнике CSS у каждого свойства указано, наследуется ли оно, а в справочнике HTML у элемента — значение CSS по умолчанию. Значения браузера видно и на вкладке Styles.

Эксперимент полезен, но точный ответ дают справочник и вкладки Styles и Computed инструментов разработчика.

Запоминать не обязательно: общее правило — наследуются свойства текста, а детали всегда можно проверить в справочнике.

Один класс (.main) и один селектор типа (a). Пробел-комбинатор специфичность не меняет.

В первом столбце считают только идентификаторы (#…), а .main — класс.

Специфичность не складывают в одно число: её сравнивают по столбцам (A, B, C).

Два идентификатора — два в первом столбце, классов и типов нет.

Каждый идентификатор в селекторе считается отдельно, даже если стоит в составе селектора потомков.

Во втором столбце считают классы. Идентификаторы — в первом.

.header — это класс, он считается во втором столбце, а не как ещё один тип.

Идентификаторов в селекторе нет, первый столбец — ноль.

Класс .header — единица во втором столбце; table, tr и td — три в третьем.

Порядок решает только при равной специфичности. Здесь она разная.

Так получилось бы при сложении «пунктов», но браузер специфичность не складывает.

Сравнение идёт по столбцам слева направо: (1, 0, 0) сильнее (0, 11, 0), сколько бы ни было классов.

Специфичность сравнивают, только если оба объявления одинаково важны.

Цвет действительно красный, но не из-за порядка: если убрать !important, победит a.toys, хотя оно выше.

Важность проверяется раньше специфичности: важное объявление сильнее обычного, даже с более простым селектором.

Обычное объявление в атрибуте style сильнее обычных объявлений таблиц стилей при любой специфичности.

Порядок решает последним. Атрибут style побеждает раньше, на своём этапе.

Атрибут style сравнивается на этапе до специфичности, поэтому селекторы здесь не помогут.

Специфичность решает только внутри одного слоя.

Слои сравниваются раньше специфичности: более поздний слой components сильнее, хотя селектор a проще.

Слои остаются авторскими стилями, они лишь задают порядок между группами правил.

Каскад всегда выбирает одно значение. Проигравшее объявление на вкладке Styles перечёркнуто.

При прочих равных побеждает последнее объявление, а не первое.

Источник и специфичность одинаковы, поэтому побеждает объявление, которое встретилось позже.

Это скроет причину и заставит в следующий раз перебивать уже важное объявление.

Атрибут не гарантирует победу: например, обычное объявление в нём проиграет важному. Сначала найдите причину конфликта.

Победившее объявление видно на вкладке Styles. Устранив причину, вы не создадите новых конфликтов.

Это разные механизмы. Их и записывают по-разному: псевдоэлемент — через два двоеточия, псевдокласс — через одно.

:hover, :focus и :active работают с разными элементами, а ::selection — и со ссылками.

::first-line выбирает часть абзаца, ::before создаёт содержимое, а :hover выбирает весь элемент под указателем.

Одно двоеточие у first-letter — устаревшая запись, которую браузеры поддерживают для совместимости. ::hover — ошибка: это псевдокласс.

Псевдоэлементы пишут через два двоеточия, псевдоклассы — через одно.

Два двоеточия — только у псевдоэлементов. С ними браузер не распознает псевдокласс :hover и отбросит правило.

Наоборот: без content псевдоэлемент ::before не появится.

Менять удобнее, но читатель может не получить текст. Для оформления это допустимо, для важных сведений — нет.

Содержимое ::before обычно нельзя скопировать как обычный текст, оно пропадает без CSS и по-разному озвучивается программами экранного доступа. Важный текст пишите в HTML.

В content можно записать любые символы в кавычках.

У загруженного <img> содержимое заменено изображением. Для декора добавьте псевдоэлемент обёртке, например <figure>.

Одно двоеточие — лишь устаревшая запись того же псевдоэлемента. Результат не изменится.

У обоих правил специфичность (0, 1, 1), поэтому побеждает последнее. :hover ставят после :link и :visited.

Состояния не имеют своего приоритета: при равной специфичности решает порядок правил.

Оба правила применяются, но конфликт по color выигрывает правило, записанное ниже.

В этом случае рамка — единственный видимый индикатор фокуса при переходе клавишей Tab. Если она мешает, замените её своей через :focus-visible.

Работает: браузеры как раз рисуют рамку фокуса свойством outline.

Фокус останется, пропадёт только его видимое обозначение — это и опасно.

Псевдокласс ничего не показывает сам: он лишь выбирает элемент для правила.

После клика мышью по кнопке рамка обычно не нужна, а при работе с клавиатуры она обязательна. :focus срабатывает в обоих случаях.

:focus-visible работает со всеми элементами, которые получают фокус: ссылками, кнопками, полями.

Порядок решает лишь при равной специфичности. Здесь a:hover победит, даже если поставить его выше.

Точность определяет специфичность, а не длина селектора: класс или псевдокласс сильнее любого числа селекторов типа.

Специфичность a:hover — (0, 1, 1), nav a — (0, 0, 2). Псевдокласс считается как класс и перевешивает второй селектор типа.

Между числом и единицей не должно быть пробела: браузер пропустит такое объявление.

Без единицы допустим только 0. Число 24 без единицы — ошибка, объявление будет пропущено.

Число и единица записаны слитно, значение положительное — объявление корректно.

Пиксель CSS равен 1/96 дюйма CSS. На экранах с высокой плотностью точек он занимает две, три и больше точек экрана.

Пиксель CSS не равен точке экрана. Иначе текст на телефоне с плотным экраном был бы слишком мелким.

Как раз наоборот: значения в пикселях не реагируют на настройку шрифта. С ней растут значения в rem, em и процентах.

Процент считается от итогового размера родителя: 12px × 200% = 24px, затем 24px × 200% = 48px.

32px получилось бы при расчёте от базовых 16px. Но родитель внутреннего блока имеет размер 24px.

24px — размер среднего блока. Внутренний блок считает 200% уже от этих 24px.

Каждый уровень увеличивает размер родителя в 1.5 раза: body — 16 × 1.5 = 24px, первый div — 36px, второй — 54px.

24px — размер текста в самом <body>. Каждый вложенный блок считает 150% от своего родителя.

36px — размер в первом блоке <div>. Внутренний блок считает 150% от этих 36px.

В свойстве font-size em считается от родителя, как проценты: body — 16 × 1.5 = 24px, div — 24 × 1.5 = 36px.

24px — размер в <body>. Блок считает 1.5em от размера своего родителя, то есть от 24px.

54px — размер в блоке второго уровня вложенности.

Так считались бы проценты или em. Rem не зависит от размера родителя.

Rem не накапливается по уровням вложенности: все три текста по 24px.

Rem считается от размера шрифта корня <html> (16px), а не от родителя: 16 × 1.5 = 24px на любом уровне.

Так работает em. Rem зависит только от размера шрифта корня.

Дело не в экранах: и rem, и px браузер одинаково переводит в точки экрана. Разница — в реакции на настройку шрифта пользователя.

Размер шрифта корня берётся из настройки браузера. Если пользователь увеличит шрифт, весь текст в rem вырастет пропорционально.

Пересчёт действительно проще, но ценой настройки пользователя. Лучше оставить размер корня по умолчанию или задать его в процентах.

Размер в пикселях заменяет значение из настройки браузера. Если корню нужен другой размер, задавайте его в процентах или em.

Rem продолжит работать, 1rem будет равен 10px. Проблема в том, что эти 10px не учитывают настройку пользователя.

8px получилось бы от 16px. Но em в отступе считается от размера шрифта самой кнопки — 20px.

От родителя em считается только в самом свойстве font-size. В других свойствах — от размера шрифта элемента.

Вне свойства font-size em считается от размера шрифта самого элемента: 20px × 0.5 = 10px.

Единицы окна работают во всех современных браузерах. Причина в том, что 100vw не учитывает полосу прокрутки.

100vw обычно включает ширину появившейся полосы. Для обычного блока в нормальном потоке достаточно width: auto — он заполнит доступную ширину родителя.

Отступы по условию обнулены. Остаётся вторая причина — полоса прокрутки.

vmin берёт меньшую сторону области просмотра — 400px: 400 × 40% = 160px.

40vmin — 40% меньшей стороны, а не 40 пикселей.

280px — это 40vmax: 40% большей стороны (700px).

Минимум используется, когда желаемое значение меньше него.

Максимум ограничивает значение сверху, но здесь 20px меньше него.

5vw = 20px: значение находится между минимумом 16px и максимумом 32px.

Белый — все три составляющие на максимуме: #FFFFFF.

Пары цифр — красная, зелёная и синяя составляющие. Максимум (FF) только у зелёной.

Красная составляющая — первая пара, здесь она 00. Максимальна вторая пара — зелёная.

В каждой паре цифры одинаковы (77, 88, 99), поэтому каждую пару можно записать одной цифрой.

Сократить можно любое значение, если в каждой паре обе цифры одинаковы, например #777777 → #777.

Четыре цифры — это сокращённая запись с прозрачностью (#RGBA), а не сокращение #778899.

Пары цифр из HEX нельзя переносить как есть: это шестнадцатеричные числа, их нужно перевести в десятичные.

8b, 45 и 13 в шестнадцатеричной системе — это 139, 69 и 19 в десятичной. Это цвет saddlebrown.

Порядок составляющих перепутан: так получится синий, а не коричневый цвет.

Альфа-канал 0 — полная прозрачность, 1 — полная непрозрачность.

Альфа-канал не меняет сам цвет, только его непрозрачность: при 0 цвет не виден, сквозь него виден фон.

Непрозрачному цвету соответствует альфа-канал 1 или 100%.

Третье значение — светлота. Тон 30 и насыщенность не меняются, поэтому получается более тёмный оттенок того же цвета.

Тон задаёт первое значение — угол на круге оттенков. Он остался 30.

За серость отвечает второе значение — насыщенность. Третье значение — светлота.

Прозрачный цвет задаёт transparent. currentColor повторяет цвет текста.

currentColor — текущее значение свойства color элемента.

currentColor берёт значение color самого элемента, здесь это dimgray.

Обычному тексту нужен контраст не меньше 4.5:1, а 3.5:1 меньше.

Для крупного текста достаточно 3:1, для обычного нужно не меньше 4.5:1.

7:1 — требование более строгого уровня AAA для обычного текста. Уровень AA для крупного текста требует 3:1.

Требования к контрасту относятся к тексту и значимым элементам. Рамка оглавления — украшение, её можно сделать светлой.

Именованные цвета подходят для любых свойств, например saddlebrown у заголовков. Дело в контрасте.

Запись не влияет на результат: tan и #d2b48c — один цвет с одним и тем же низким контрастом.

Потомок не может отменить прозрачность всей группы.

Альфа-канал действует только на заданный цвет.

Так станет прозрачным весь блок, включая текст.

Общее семейство — последний запасной вариант. До него дело дойдёт, только если нет ни Verdana, ни Tahoma.

Шрифт по умолчанию используется, только если не подошёл ни один вариант из списка, а здесь Tahoma есть.

Браузер перебирает шрифты слева направо и берёт первый найденный. Verdana нет, следующий — Tahoma.

Свойство работает и без общего семейства, но тогда при отсутствии шрифтов браузер возьмёт свой шрифт по умолчанию.

Загрузку шрифта задаёт правило @font-face. Общее семейство ничего не загружает.

Общее семейство есть на любом устройстве: браузер подставит шрифт с засечками, без засечек или моноширинный, как задумано.

Запись синтаксически допустима, но в кавычках "sans-serif" — это название конкретного шрифта, а не общее семейство. Для общего семейства кавычки не нужны.

Запись верная: название из нескольких слов в кавычках, общее семейство — без кавычек.

Запись верная: название из одного слова можно не брать в кавычки.

Запись корректна: обязательные размер и семейство указаны, семейство стоит последним.

Сокращённое свойство задаёт все свои составляющие. Не указанный font-style получил начальное значение normal.

Унаследованное значение проигрывает значению, заданному самому элементу, а font задал span начертание normal.

900 — самая большая насыщенность. bold соответствует 700.

400 — это normal, обычная насыщенность.

bold — 700, normal — 400.

Шрифты с засечками обозначает serif; system-ui — шрифт интерфейса системы.

system-ui подставляет шрифт, которым система рисует свои меню и окна, поэтому на разных устройствах он разный.

Одинакового на всех устройствах шрифта system-ui не даёт: у каждой системы свой шрифт интерфейса.

Моноширинные шрифты обозначает общее семейство monospace.

Тонкое начертание браузер не рисует сам: он показывает ближайшее из тех, что есть в шрифте.

Если нужного начертания нет, браузер берёт ближайшее из имеющихся; для 300 у Georgia это обычное (400).

Запасной шрифт выбирается, когда нет самого шрифта, а не одного начертания. Georgia есть, поэтому браузер берёт её ближайшее начертание.

Отсутствие начертания не скрывает текст: браузер подбирает ближайшее.

WOFF2 сжат лучше остальных форматов и поддерживается всеми современными браузерами.

Браузеры понимают TTF, но файлы без сжатия больше. Для сайта лучше перевести шрифт в WOFF2.

EOT понимал только Internet Explorer, сейчас формат не нужен.

Разные имена тоже сработают, но тогда придётся указывать их в стилях вручную. Одно имя с разными font-weight удобнее.

Каждый файл подключается своим правилом. По font-weight браузер сам выберет файл для обычного и полужирного текста.

Браузер может «дорисовать» полужирный, но такое начертание выглядит грубее настоящего. Нужный файл подключают отдельным правилом.

Путь в url() считается от CSS-файла: из папки css поднимаемся на уровень выше и заходим в assets.

Пути в CSS-файле считаются от него самого, а не от страницы, поэтому путь один для всех страниц.

Такой путь считается от папки css и ведёт в несуществующую папку css/assets.

Так текст виден сразу. Без этого браузер может некоторое время не показывать текст совсем.

Порядок шрифтов задаёт font-family. font-display управляет показом текста во время загрузки.

Поиск среди установленных шрифтов задаёт функция local() в src, а не font-display.

Загрузки выстраиваются в цепочку: сначала ваш файл, потом импортированная таблица, потом шрифты. Элемент <link> в <head> браузер видит сразу.

@import поддерживается, но замедляет загрузку.

Наоборот: правило в общем CSS-файле действует на всех страницах, к которым подключён файл.

Одно имя объединяет файлы в один шрифт, но загружаются только части с символами, которые есть на странице.

Правило без unicode-range не обязательно: браузер загрузит файл с нужными символами.

Порядок правил не решает, какой файл загрузить: решают символы на странице и unicode-range.

unicode-range сообщает, для каких символов файл. В слове «Привет» все буквы входят в кириллический диапазон. Для фразы с пробелами и знаками препинания может понадобиться и латинский файл: важны диапазоны символов, а не язык текста.

Исходный код показывает HTML, а не то, каким шрифтом браузер нарисовал текст.

Console показывает сообщения и ошибки скриптов; выбранный шрифт смотрят в Computed.

«Rendered Fonts» показывает шрифт, которым нарисован текст. Если там запасной шрифт, проверьте на вкладке Network загрузку файла и путь в url().

Styles показывает заданный список шрифтов, а не тот, который браузер выбрал из него.

right всегда выравнивает по правому краю, независимо от направления письма.

justify растягивает строки по ширине, а не прижимает их к одному краю.

end — конец строки. Для письма слева направо это правый край, для письма справа налево — левый.

Допускаются: значение 50% есть в примере урока.

Процент в text-indent считается от ширины родительского блока абзаца, здесь — 600px.

От размера шрифта считаются единицы em. Проценты в text-indent — от ширины.

Число без единицы в line-height — множитель размера шрифта, а не пиксели.

30px — значение line-height. После вычитания размера шрифта останется 10px.

30px − 20px = 10px. Это разность заданных размеров, а не точный видимый зазор между буквами соседних строк.

Свойство line-height наследуется. Вопрос в том, что именно наследуется: пиксели или множитель.

Так было бы с множителем 1.5: он наследуется как множитель, и каждый элемент умножает его на свой шрифт.

Процент браузер переводит в пиксели у body (24px), и потомки наследуют готовые 24px.

60px — фиксированная ширина в пикселях. Единица ch зависит от ширины символа «0» выбранного шрифта, но не задаёт количество букв в строке.

1ch — ширина символа «0» в шрифте абзаца. На узком экране абзац займёт всю доступную ширину.

letter-spacing задаёт интервал между символами, а не ширину строки.

У letter-spacing и word-spacing отрицательные значения допустимы.

Интервал между словами задаёт word-spacing.

Значение добавляется к обычному интервалу шрифта, отрицательное — сокращает его.

Свойство задаёт расстояние подчёркивания от текста; вид, цвет и толщина линии остаются прежними.

Так подчёркивание пропадёт совсем.

line-height задаёт высоту строки, а не положение линии подчёркивания.

CSS не меняет HTML-код страницы, только то, как текст показан.

text-transform меняет только отображение. Если оформление изменится, править текст не придётся.

Так работает значение capitalize. uppercase делает заглавными все буквы.

Это делает text-transform: uppercase.

Заглавные буквы остаются обычного размера, строчные выглядят как уменьшенные заглавные.

Размер шрифта задаёт font-size. small-caps меняет начертание строчных букв.

Язык текста задают атрибутом lang; наличие словаря зависит от браузера и системы.

Балансировка строк не заменяет словарь переносов.

Размер шрифта не задаёт язык и правила переноса.

Больший отступ выбирается, когда оба отступа неотрицательные.

Модули не складываются: отрицательный отступ уменьшает промежуток.

Отрицательный отступ вычитается из положительного: 30 − 20 = 10px.

Внешние отступы всегда снаружи рамки, а внутренние — между рамкой и содержимым.

Содержимое окружают внутренние отступы, их — рамка, а снаружи рамки — внешние отступы.

Внутренний отступ находится внутри рамки, между ней и содержимым.

Рамка не влияет на прозрачность внешнего отступа: он прозрачен всегда.

Фон элемента виден под содержимым и внутренними отступами. Внешний отступ — пустое место снаружи рамки.

Фон не выходит за рамку элемента. Чтобы увеличить окрашенную область, нужен padding.

Пропущенный левый отступ берётся из правого, а не становится нулём.

Три значения: первое — сверху, второе — слева и справа, третье — снизу.

Порядок значений начинается сверху и идёт по часовой стрелке: сверху, справа (и слева), снизу.

Отрицательный внешний отступ допустим: элемент сдвигается и может наложиться на соседа.

Внутренний отступ не может быть отрицательным, браузер пропустит такое объявление.

Запись корректна: сверху и снизу 0, слева и справа auto.

Проценты отступов считаются от ширины родителя — даже для отступов сверху и снизу.

Проценты отступов считаются от родительского блока, а не от самого элемента.

30px получилось бы от высоты родителя. Но и вертикальные отступы в процентах считаются от ширины.

При схлопывании остаётся больший отступ, а не меньший.

Вертикальные внешние отступы блоков не складываются, а схлопываются.

Вертикальные внешние отступы соседних блоков схлопываются: остаётся больший из них.

Строчный заголовок встанет в строку с текстом, а это совсем другая раскладка. Нужен внутренний отступ или рамка у родителя.

Отступ вложенного элемента выходит за родителя, только если между ними нет внутреннего отступа или рамки.

Увеличенный отступ точно так же выйдет за пределы блока.

Так было бы у блочно-строчного элемента (display: inline-block). Строчный элемент строки не раздвигает.

Отступы работают: горизонтальные раздвигают текст, вертикальные расширяют фон.

У строчного элемента вертикальные внутренние отступы рисуются, но не влияют на высоту строки, поэтому фон наезжает на соседние строки.

Так ведёт себя блочный элемент: display: block.

Это блочно-строчный элемент: внутри строки он ведёт себя как блок.

Скрывает элемент значение display: none.

Ссылка исчезнет вместе со своим местом.

Ссылка станет прозрачной, но останется доступной для перехода по Tab.

Место сохраняется, но скрытая ссылка не получает фокус.

При трёх значениях левая сторона берёт значение правой, то есть второе.

Третье значение (blue) относится к нижней рамке.

Три значения: сверху, слева и справа, снизу. Левая рамка получает второе значение — green.

Порядок толщины, стиля и цвета в border может быть любым.

Толщину задают в любых единицах длины, кроме процентов.

Пропущенные значения сокращённого свойства получают начальные. Без стиля рамки нет.

Обязателен только стиль. Толщину и цвет можно пропустить.

Цвет рамки по умолчанию — currentColor, текущий цвет текста элемента.

Рамка без указанного цвета берёт цвет текста элемента, а он здесь saddlebrown.

Единицы длины, кроме процентов, допустимы: рамка в em растёт вместе со шрифтом.

Толщину рамки нельзя задавать в процентах.

thin, medium и thick — допустимые ключевые слова.

Сокращённое свойство задало рамку всем сторонам, а следующее объявление убрало нижнюю.

Объявление border-bottom-style: none записано позже и убирает нижнюю рамку.

border-bottom-style меняет только нижнюю сторону, остальные рамки остаются.

До косой черты — горизонтальные радиусы, после — вертикальные. Разные радиусы дают дугу эллипса.

В border-radius косая черта допустима. Нельзя её использовать в свойствах отдельных углов — там радиусы через пробел.

Косая черта отделяет горизонтальные радиусы от вертикальных, а не перечисляет углы.

border-radius не создаёт рамку, а только задаёт форму углов.

Скругляются рамка, фон и фоновое изображение. Выступающие потомки без отдельной настройки overflow не обрезаются.

Скругление применяется к фону и фоновому изображению, даже если рамки нет.

Половина ширины и высоты квадрата — радиус вписанного круга.

Толщину рамки нельзя задать в процентах, и рамка не меняет форму углов.

Браузер уменьшит слишком большие радиусы, и круг тоже получится, но обычно пишут 50% — это и есть радиус круга.

Рамка входит в размер элемента и сдвигает соседей, а контур рисуется поверх.

В псевдоклассах можно менять любые свойства, включая рамку. Разница в том, занимает ли линия место.

В современных браузерах контур повторяет скругление углов элемента.

Так было бы при content-box. В border-box место для содержимого уменьшается до 0.

Содержимое сжимается до 0, но отступы и рамка остаются: 60 + 60 + 5 + 5 = 130px.

Сумма отступов и рамок больше 100px; ширина содержимого не может стать отрицательной.

Заполняет квадрат с искажением пропорций, если исходное фото не квадратное.

Заполняет квадрат без искажения, но может обрезать часть фото.

Фото видно целиком; свободное место в квадрате может остаться по краям.

200px получилось бы при border-box. В модели по умолчанию отступы и рамка прибавляются к ширине.

Отступы и рамка есть с обеих сторон, поэтому их значения удваиваются: 200 + 40 + 10.

200px + 20px × 2 (padding) + 5px × 2 (border) = 250px.

При border-box отступы и рамка не прибавляются, а входят в заданную ширину.

При border-box 200px — ширина с рамкой: 200px − 20px × 2 − 5px × 2 = 150px.

200px — это ширина с отступами и рамкой. Содержимому достаётся меньше.

Проценты ширины считаются от родителя. Причина — в пробелах между блоками.

Рамки по умолчанию у <div> нет. Место занимают пробелы между элементами.

Блочно-строчные элементы стоят в строке, как слова, поэтому пробелы между ними занимают место.

Селектор * сам выбирает все элементы. Псевдоэлементы добавлены, чтобы правило касалось и их.

Псевдоэлементы — не элементы документа, поэтому их нужно перечислить отдельно.

Перечисление через запятую не меняет специфичность каждого селектора.

При auto полоса появляется только при переполнении и только по нужной оси.

hidden обрезает лишнее без полос прокрутки.

При scroll полосы прокрутки есть всегда, даже если всё помещается.

Максимальная высота ограничивает рост сверху, и длинный текст тоже выйдет за рамку.

Минимальная высота не даёт блоку стать ниже, но позволяет расти вместе с содержимым.

Точная высота не растёт: длинный текст выйдет за рамку.

У внутренних отступов нет значения auto. Центрируют внешними отступами.

text-align выравнивает строки внутри блока, а не сам блок. И точная ширина не сузится на телефоне.

Отступы auto слева и справа делят свободное место поровну, а max-width оставляет это место.

Без height: auto изображение сожмётся по ширине, но сохранит высоту из HTML и исказится.

auto вычисляет высоту по пропорциям изображения, а не по родителю.

max-width ограничит ширину и без него, но пропорции нарушатся.

Нужна цепочка высот: html и body по 100%. Проще — min-height: 100vh.

Проценты допустимы, но считаются от высоты родителя.

box-sizing влияет на учёт отступов и рамки, а не на расчёт процентов от родителя.

object-fit не задаёт размеры элемента, а вписывает в него изображение.

Автоматическая высота вычисляется из ширины и отношения 1:1; object-fit управляет изображением внутри области.

Явное aspect-ratio задаёт желаемое отношение сторон при автоматической высоте.

Стиль рамки не меняет назначение background-origin.

Так работает background-clip: padding-box, а не background-origin.

При повторе или смещении изображение может зайти под рамку. Для обрезки нужен background-clip: padding-box.

Цвет фона — запасной вариант, он не обязателен. Причина — в неверном пути.

SVG подходит для фона: векторный рисунок остаётся чётким при любом размере.

Относительный путь в url() внешней таблицы стилей считается от адреса CSS-файла.

Размер изображения задаёт background-size.

Цвет фона не меняет цвета изображения: он виден только там, где картинка прозрачна или отсутствует.

Цвет лежит под изображением и показывается там, где картинки нет.

cover растягивает изображение на весь блок, а повтор управляется отдельным свойством.

repeat-x повторяет изображение по горизонтали.

По умолчанию изображение повторяется во все стороны, no-repeat отключает повтор.

Для нижнего угла нужно указать оба значения: right bottom.

Если указано одно ключевое слово, второе равно center.

Пропущенное значение не top, а center.

Так работали бы пиксели. Проценты совмещают точки: 100% — правый нижний угол и картинки, и блока.

Проценты совмещают одинаковые точки изображения и области фона.

Растягивает изображение background-size, а не позиция.

Это начальное значение: оно задаёт, откуда отсчитывается положение изображения, но не обрезает фон под рамкой.

Это свойство закрепляет фон при прокрутке и не влияет на область под рамкой.

Фон будет рисоваться только до внутреннего края рамки.

Оба значения сохраняют пропорции изображения.

Оба сохраняют пропорции. При contain в блоке может остаться пустое место.

Повтор задаёт background-repeat. cover и contain определяют масштаб.

Запись верная: задан только цвет, остальные значения получают начальные.

Размер записывается только после позиции через косую черту: center / cover.

Запись верная: цвет, изображение, позиция / размер, повтор.

Это одно объявление с двумя слоями через запятую — показаны оба изображения.

Наоборот: первый слой лежит выше всех.

Слои перечисляются сверху вниз. Цвет фона, если он нужен, указывают в последнем слое.

Список стал флекс-контейнером. Флекс-элементы — его дочерние элементы.

Свойство действует только на элемент и его дочерние элементы.

Флекс-элементами становятся только дочерние элементы контейнера. Ссылки внутри пунктов располагаются как обычно.

Ссылки — потомки, но не дочерние элементы списка. Чтобы выстроить их по Flexbox, нужно сделать флекс-контейнером их родителя.

Внутри строчного контейнера элементы раскладываются по правилам Flexbox так же, как в блочном.

Блочный контейнер занимает всю доступную ширину и начинается с новой строки, строчный — нет.

Строчный флекс-контейнер стоит в строке рядом с соседями, а внутри раскладывает элементы по тем же правилам Flexbox.

Направление задаёт flex-direction, а не тип контейнера.

Слева направо главная ось идёт при значении row для русского текста.

Справа налево главная ось идёт при row-reverse для русского текста.

Снизу вверх главная ось идёт при значении column-reverse.

При column элементы выстраиваются в колонку, главная ось идёт сверху вниз, а поперечная — в направлении текста.

CSS не меняет порядок элементов в документе: Tab идёт по HTML.

Обратное направление меняет только вид. Фокус и экранный диктор следуют порядку в HTML, поэтому порядок по смыслу задают в разметке.

Направление раскладки не влияет на то, получают ли ссылки фокус.

Порядок фокуса определён: он совпадает с порядком в HTML.

Перед первым и после последнего элемента gap места не добавляет.

Размер элементов не меняется: gap задаёт пустое место между ними.

gap задают контейнеру, и он действует сразу на все промежутки.

Отступ margin есть и у крайних элементов, а gap задаёт расстояние только между соседями.

По умолчанию контейнер однострочный (nowrap). Значение wrap делает его многострочным.

Это значение выстраивает все элементы в колонку, а не переносит лишние на новую строку.

justify-content распределяет свободное место в строке, но не переносит элементы.

align-content распределяет уже существующие строки и без переноса не действует.

При space-around место есть и у краёв: там оно вдвое меньше, чем между соседями.

center собирает элементы по центру, а свободное место остаётся у краёв.

При space-evenly промежутки у краёв такие же, как между элементами.

При space-between у краёв промежутков нет, а между соседями они одинаковые.

По умолчанию элементы растягиваются вдоль поперечной оси, как при align-items: stretch. Поэтому колонки во Flexbox одинаковой высоты.

Так элементы стоят при align-items: flex-start, а по умолчанию они растягиваются.

По центру элементы встают при align-items: center.

По базовой линии элементы выравнивает значение baseline.

Элементы внутри строки выравнивает align-items. align-content у однострочного контейнера не действует.

Многострочным контейнер делает flex-wrap: wrap, а не свойства выравнивания.

Чтобы выровнять элементы внутри единственной строки, используют align-items.

Вдоль главной оси элементы выравнивает justify-content.

Делится только свободное место. Если исходные размеры разные, итоговые ширины не будут ровно в два раза больше.

flex-grow делит свободное место пропорционально значениям. Ширина самих элементов зависит ещё и от их исходного размера.

Сжатие задаёт flex-shrink. flex-grow действует, только когда свободное место есть.

Порядок задаёт свойство order, а flex-grow — долю свободного места.

Поэтому без дополнительных свойств элементы не заполняют свободное место, но уменьшаются, когда его не хватает.

flex-shrink по умолчанию 1: элементы сжимаются, когда места не хватает.

Наоборот: элементы по умолчанию не растут, но сжимаются.

По умолчанию flex-grow равен 0: свободное место остаётся пустым.

flex-basis — не минимум: при нехватке места элемент сжимается меньше этого значения.

Промежутки задаёт свойство gap контейнера.

От исходного размера браузер отталкивается, а затем элемент может вырасти или сжаться.

При flex-direction: column главная ось вертикальная, и flex-basis задаёт высоту.

flex: 1 оставляет flex-shrink: 1. Не растёт и не сжимается элемент при flex: none.

У них разный flex-basis: 0% и auto.

flex: 1 — это 1 1 0%, а flex: auto — 1 1 auto. Поэтому при auto длинный элемент остаётся шире.

Направление задаёт flex-direction контейнера, а не flex элемента.

Первым в flex указывают flex-grow, а размер — последним.

Порядок значений: flex-grow, flex-shrink, flex-basis.

Одно значение с единицами задаёт только flex-basis; flex-grow станет 1, и элемент будет расти.

Такой элемент растёт и сжимается, начиная с 12rem.

По умолчанию у флекс-элемента min-width: auto: он не становится уже самого длинного неразрывного содержимого.

flex-grow отвечает за рост при свободном месте и на сжатие не влияет.

Сжатию мешает автоматический минимум, и увеличение flex-shrink его не снимает.

order меняет только порядок элементов, а не их размеры.

order меняет порядок вдоль главной оси, а не выравнивание по поперечной.

align-self переопределяет значение align-items контейнера для одного элемента.

justify-content — свойство контейнера и выравнивает вдоль главной оси.

Так к верху прижмутся все элементы, а не один.

Автоматический отступ забирает всё свободное место слева от пункта и отодвигает его к краю.

Пункт растянется на свободное место, но его содержимое останется у левого края пункта.

align-self выравнивает вдоль поперечной оси, то есть сверху вниз в строке.

Так к правому краю сдвинутся все пункты, а не только последний.

order меняет только расположение на экране. Порядок, важный для смысла, задают в HTML.

Так элементы стоят на экране, а фокус идёт по порядку в HTML.

order не влияет на то, получает ли элемент фокус.

Фокус и экранный диктор не учитывают order и идут по HTML.

Наоборот: Flexbox раскладывает элементы вдоль одной оси, а Grid — по строкам и колонкам.

Промежутки задаёт то же свойство gap, что и во Flexbox.

Grid поддерживают все современные браузеры.

Во Flexbox каждая строка живёт сама по себе, а в Grid колонки общие, поэтому элементы стоят ровными рядами.

Число колонок по умолчанию не задано: колонка одна.

В строку элементы встают во флекс-контейнере. Сетка без заданных колонок состоит из одной колонки.

Колонки нужно задать отдельно свойством grid-template-columns.

Элементы остаются на странице и встают друг под другом.

Первая колонка постоянной ширины 10rem, вторая — доля свободного места.

grid-template-columns задаёт только колонки, строки — grid-template-rows.

Каждое значение в списке — размер одной колонки. Повторение записывают функцией repeat().

fr делит место, которое осталось после колонок в других единицах и промежутков.

Промежуток остаётся прежним: fr делит место, которое осталось после него.

Колонки сетки не переносятся: они задают ширину, а выходит за контейнер вся сетка.

Две половины ширины плюс промежуток больше контейнера. Единица fr учитывает промежутки автоматически.

Проценты работают и считаются от ширины контейнера, но промежутки в них не учтены.

Значения не умножаются, а повторяются.

Пара повторяется дважды, поэтому колонок четыре.

repeat() повторяет весь список размеров указанное число раз.

Повторяется пара целиком, в том же порядке.

Пропорция не изменится, а минимум по содержимому останется.

У флекс-элементов тот же автоматический минимум, а сетка при этом пропадёт.

Промежуток не влияет на минимальную ширину колонки.

1fr — это minmax(auto, 1fr): колонка не уже своего содержимого. Минимум 0 снимает это ограничение.

Колонок столько, сколько помещается в контейнер, и каждая не уже 15rem.

flex-wrap — свойство Flexbox. Сетка сама переносит элементы в новые строки.

15rem — минимальная ширина колонки, а число колонок браузер вычисляет сам.

Так строят галереи, которые подстраиваются под экран без медиазапросов.

Отличие есть, когда колонок помещается больше, чем элементов.

Оба ключевых слова определяют число колонок, а элементы заполняют их по строкам.

Разница видна, только когда элементов меньше, чем помещается колонок.

При auto-fit пустые колонки схлопываются, и элементы растягиваются за счёт 1fr.

Числа — номера линий, а не колонок: элемент стоит от первой линии до третьей, то есть занимает две колонки.

grid-column задаёт только колонки; строки задаёт grid-row.

Элемент начинается с первой линии, поэтому захватывает первую колонку.

Третья линия — левая граница третьей колонки, поэтому сама третья колонка не входит.

Если линий меньше, браузер достроит неявные колонки до сотой линии.

-1 — последняя линия явной сетки. Неявные колонки за её пределами эта запись не охватывает.

Ширина растянет элемент только внутри его ячейки, а не на всю сетку.

Такого значения нет.

Строки задаёт grid-row: span 2.

Колонки сетки задаёт grid-template-columns контейнера.

Номер колонки без span: grid-column: 2.

span задаёт число ячеек, а положение браузер выбирает сам.

Точка обозначает пустую ячейку, а main — прямоугольная область.

Область a получилась буквой «Г», а области должны быть прямоугольными.

Обе области прямоугольные: шапка на две колонки, под ней две области по одной ячейке.

Области прямоугольные: каждая занимает колонку на две строки.

Имя области никак не связано с тегом: элементу нужно указать grid-area.

Элемент в область помещает свойство grid-area.

grid-area с именем помещает элемент в одноимённую область шаблона.

grid-template-areas задают контейнеру — это шаблон всей сетки.

По умолчанию высота добавленных строк подстраивается под содержимое.

Элементы не пропадают: браузер достраивает сетку.

Автоматическое размещение ставит элементы в новые ячейки, а не друг на друга.

Так ведёт себя однострочный флекс-контейнер, а сетка добавляет строки.

Промежутки остаются прежними.

Наоборот, оно заполняет пропуски, которые появляются, когда колонок несколько.

Перестановка допустима лишь без смысловой последовательности. Хронологический альбом, текст и ссылки требуют понятного порядка чтения и фокуса.

Значение поддерживают все современные браузеры.

В Grid justify-content двигает целые колонки, если сетка меньше контейнера, а не элементы внутри ячеек.

По умолчанию элементы растянуты на всю ячейку.

place-items — сокращение для align-items и justify-items.

Такого значения нет: grid-column задаёт линии.

Здесь размер определяет содержимое и раскладка одномерная — это задача для Flexbox.

В Grid колонки общие для всех строк, поэтому карточки последней строки не растягиваются шире остальных.

Кнопки выстраиваются в одну линию по содержимому — подходит Flexbox.

Это раскладка в одну линию, её удобно делать на Flexbox.

Базовое содержимое и функции должны оставаться доступны без дополнительных улучшений.

Ширина экрана не определяет возможности браузера; поддержку функций проверяют отдельно.

Улучшение добавляется к доступной основе, а не служит условием доступа к ней.

Прогрессивное улучшение не определяется шириной экрана: основа доступна всем, дополнительные возможности включаются при подходящих условиях.

Страница откроется, но в уменьшенном виде.

Мобильные браузеры без метатега открывают страницу в широком виртуальном окне.

Стили работают, просто браузер считает, что экран намного шире настоящего.

Без метатега область просмотра обычно шириной около 980 CSS пикселей, и резиновая сетка рассчитывается не под экран телефона.

Медиазапросы работают независимо от этого значения.

Ширину области просмотра задаёт width, а user-scalable разрешает или запрещает масштаб.

Достаточно записи width=device-width, initial-scale=1, увеличение при этом остаётся доступным.

Значение существует, но мешает доступности, поэтому некоторые браузеры его игнорируют.

Сайт работает на всех устройствах, просто стили для телефонов пишутся первыми.

Так устроен подход desktop first, а переход к узким экранам называют изящной деградацией.

Обоим подходам хватает одного HTML, меняются только стили.

Mobile first задаёт порядок разработки макета по ширине. Его можно сочетать с прогрессивным улучшением, которое учитывает поддержку возможностей браузером.

width работает, но фиксированная ширина не подстраивается под узкий экран.

По центру колонку ставит margin: 0 auto.

Фиксированная width больше узкого экрана выйдет за его край.

max-width ограничивает ширину сверху и не растягивает колонку.

max-width ограничивает ширину элемента, но слово внутри всё равно выйдет за его край.

flex-wrap переносит флекс-элементы, а не части слова.

overflow-x добавляет прокрутку, а не переносит слова.

Слово переносится, только если иначе выйдет за край. Обычные слова переносятся как прежде.

Тогда прокручивается вся страница — именно этого и нужно избежать.

Текст станет нечитаемым, а таблица всё равно может не поместиться.

Таблица сожмётся до узких столбиков, а на других экранах будет неудобной.

Прокрутка появляется только в обёртке. Атрибут tabindex="0" позволяет прокрутить её с клавиатуры.

На широком экране не видно проблем узких экранов.

Наличие медиазапросов не гарантирует, что страница работает на всех ширинах.

Ошибки часто появляются на промежуточных ширинах и при крупном тексте, поэтому проверяют не только «круглые» значения.

Одной ширины мало: ошибки бывают и на телефонах, и на промежуточных ширинах.

Браузер загружает все стили; точка останова — это ширина окна в условии медиазапроса.

Перенос строк тут ни при чём: речь о ширине, при которой перестраивается макет.

Точки останова задают медиазапросами, а значения выбирают по содержимому страницы.

Стандартных точек нет, и выбирать их по моделям устройств не стоит.

У медиазапросов нет особого приоритета. Записанные до общих правил, они будут ими переопределены.

В обычном CSS медиазапрос — отдельное правило, внутри которого стоят обычные правила.

Медиазапросы обычно пишут в общей таблице стилей правилом @media.

Правила внутри @media подчиняются обычному каскаду и не получают дополнительного веса.

screen — экраны компьютеров, планшетов и телефонов.

Это устаревший тип для синтезаторов речи, сейчас он не используется.

@media print действует при печати и в режиме предварительного просмотра.

Такого типа нет.

Новая запись диапазонов со знаками сравнения означает то же, что min-width.

Это «ширина не больше», то есть max-width.

Строгое «больше» не включает саму границу, а min-width её включает.

Такое условие выполняется только при ширине ровно 48rem.

В условиях медиазапросов размер шрифта из таблицы стилей не учитывается.

От ширины экрана считаются единицы vw, а rem — от размера шрифта.

Размер шрифта по умолчанию обычно 16 пикселей и зависит от настроек браузера.

Поэтому точки в rem сдвигаются, когда посетитель увеличивает шрифт в настройках браузера.

Моделей устройств слишком много, а содержимое само подсказывает, где нужна перестройка.

Точки Bootstrap — распространённый пример, но не правило для любого сайта.

Завтра появятся другие модели; точки по устройствам быстро устаревают.

Лишние точки усложняют CSS; нужны только те, где макет действительно перестраивается.

Ориентация не заменяет условий по ширине.

Mobile first тоже использует медиазапросы — для широких экранов.

Такие запросы основные при подходе desktop first.

Общие стили рассчитаны на узкий экран, а медиазапросы добавляют дополнения для широких.

Некоторым людям анимация вызывает головокружение, и они включают эту настройку.

Медиазапросы не проверяют, свёрнуто ли окно.

Поддержку проверяет @supports, а это условие — предпочтение посетителя.

Условие проверяет настройку посетителя, а не частоту экрана.

Ширину проверяет @media.

Так делают прогрессивное улучшение: запасной вариант снаружи, улучшение внутри @supports.

Внешние файлы подключают <link> или @import.

Правила проверяют разное: поддержку браузером и характеристики устройства.

Смещения действуют только на позиционированные элементы: relative, absolute, fixed или sticky.

Тип отображения тут ни при чём: важно значение position.

Выбор края не помогает: у static не действует ни одно из четырёх смещений.

Пиксели — самая распространённая единица смещения; подходят и rem, em, проценты.

Relative сдвигает только отрисовку элемента. Соседи ведут себя так, будто сдвига нет, поэтому канат может наехать на косточку.

Место освобождается при absolute и fixed, а relative сохраняет его за элементом.

Позиционирование не наследуется и не передаётся соседям.

Так сдвинул бы соседей margin-top. Relative оставляет поток без изменений.

Закрепляют fixed и sticky; relative прокручивается вместе со страницей.

Из потока исключают absolute и fixed, а relative оставляет элемент в потоке.

Позиционированный предок становится содержащим блоком; сам он остаётся на своём месте в потоке.

Свойство position не наследуется: потомки остаются static.

Div — родитель, но не позиционированный: отсчёт от него не идёт.

Браузер ищет ближайшего позиционированного предка. У div static, поэтому содержащим блоком стала карточка.

Смещения top и right заданы, поэтому элемент размещается от краёв содержащего блока.

Так было бы без позиционированных предков. Здесь такой предок есть — карточка.

Прилипание — это sticky, о нём в следующем уроке.

Так ведёт себя fixed. Absolute без позиционированных предков отсчитывается от начала документа.

Отсчёт идёт от начального содержащего блока в начале документа, а он прокручивается вместе со страницей.

Absolute исключает элемент из потока независимо от прокрутки.

Это поведение блока в потоке. Растянуть absolute-элемент можно, задав left и right или inset: 0.

Автоматическая ширина не обязательно равна длине всего текста: при нехватке места текст переносится. Если задать оба горизонтальных смещения, расчёт будет другим.

Окно тут ни при чём: ширина зависит от содержимого или от противоположных смещений.

Ширина определяется содержимым, поэтому блок с текстом не исчезнет.

Без противоположных смещений auto у absolute-элемента даёт ширину по содержимому.

Сокращение задаёт top, right, bottom и left равными 0: края элемента совпадают с краями содержащего блока.

Relative возвращает элемент в поток и сдвигает от его места, а не растягивает.

Одно смещение прижимает элемент к верхнему краю, но не растягивает его.

Смещения не действуют только у static; fixed прижимают к краям окна через top, right, bottom и left.

Fixed исключён из потока так же, как absolute, поэтому может закрыть содержимое.

Оба исключены из потока, но absolute прокручивается вместе с документом, а fixed остаётся на месте экрана.

Разница видна при прокрутке: absolute уходит вместе со страницей, fixed — нет.

Достаточно одного смещения по вертикали — bottom уже задан.

Fixed не ищет позиционированного предка: static родителя на него не влияет.

Z-index меняет порядок наложения, а не точку отсчёта.

Такой предок становится содержащим блоком для fixed, и элемент привязывается к нему, а не к окну.

Смещения у sticky задают порог прилипания, например top: 0.

Разница видна у конца родителя: sticky уходит вместе с ним, fixed остаётся на месте.

Место sticky-элемента сохраняется, а у конца содержащего блока он уходит вместе с ним. Fixed исключён из потока и обычно привязан к окну; transform или filter у предка могут изменить его точку отсчёта.

Наоборот: из потока исключён fixed, а sticky сохраняет своё место.

Sticky не превращается в fixed: он остаётся в потоке и без порога не прилипает.

Элемент остаётся на своём месте в потоке и прокручивается вместе со страницей.

Значение по умолчанию у top — auto, а не 0, поэтому порога нет.

Нужно указать край и расстояние, например top: 0.

Липким можно сделать любой элемент.

Z-index меняет порядок наложения, а не прилипание.

Заголовок виден: overflow влияет на то, к чему прилипает элемент, а не на его видимость внутри раздела.

Hidden, auto и scroll делают предка прокручиваемым. Сам раздел не прокручивается, поэтому прилипания не видно. Для обрезки подходит overflow: clip.

Это задача z-index. Scroll-margin-top влияет на место остановки прокрутки.

Браузер останавливает прокрутку в 4.5rem от верха окна, и заголовок виден под шапкой.

Порог шапки задаёт top. Scroll-margin-top касается элемента, к которому прокручивают.

Scroll-margin не меняет раскладку: он учитывается только при прокрутке к элементу.

Размер на порядок наложения не влияет.

Порядок правил в CSS важен для каскада, а наложение зависит от порядка элементов в HTML.

Позиционированные элементы без z-index рисуются в порядке кода: следующий поверх предыдущего.

Раньше записанный рисуется первым, и следующий ложится поверх него.

Z-index работает у позиционированных элементов, а также у флекс- и грид-элементов. Абзацу нужно, например, position: relative.

Подходят и положительные, и отрицательные целые числа — но только у элементов, к которым z-index применим.

Z-index — целое число без единиц.

Дело не в числе: у static-элемента вне Flexbox и Grid любое значение игнорируется.

Значения из разных контекстов напрямую не сравниваются.

Родитель создаёт контекст наложения; 999 действует только внутри него. Нужно поднять родителя или убрать его контекст.

Порядок кода важен только при равных значениях в одном контексте.

Любое число окна остаётся внутри контекста родителя и выше оверлея не поднимет.

Ноль — не auto: такой элемент создаёт контекст.

Прозрачность меньше 1 создаёт контекст даже без позиционирования.

Это свойство только и делает, что создаёт контекст.

Relative и absolute создают контекст только с числовым z-index, даже нулевым.

Подложка выпадет в поток и перестанет растягиваться через inset.

У раздела без позиционирования z-index не действует.

Чем меньше число, тем глубже подложка: она останется под фоном раздела.

Карточка создаёт контекст, и подложка с -1 остаётся внутри него — над фоном раздела, под текстом карточки.

Строки текста не уходят под плавающий элемент, а обходят его.

Так было бы без float. Плавающий элемент позволяет тексту встать рядом.

Фото прижато к левому краю, поэтому места для текста слева нет: он обтекает справа.

Плавающий элемент прижат к левому краю, а следующее содержимое поднимается и обтекает его с другой стороны.

Плавающий элемент прижимается к краю своего родителя, а не окна.

Отсчёт идёт от родителя: блок не выходит за контейнер.

Значения center у float нет; right прижимает элемент к правому краю.

Плавающий блок без заданной ширины становится шириной по содержимому.

Это значение по умолчанию: оно не меняет высоту карточки.

Значение создаёт новый блочный контекст форматирования, и высота карточки включает плавающее фото без обрезки и полос прокрутки.

Clear у самого фото опустит его ниже предыдущих плавающих элементов, но не растянет карточку.

Позиционирование не возвращает плавающий элемент в расчёт высоты контейнера.

Hidden обрезает выходящее за блок содержимое, но здесь он нужен ради высоты контейнера.

Обтекание отменяет clear; overflow меняет расчёт высоты контейнера.

Полосу прокрутки может добавить auto; hidden её не показывает.

Любое значение overflow, кроме visible и clip, пересчитывает высоту блока. Побочный эффект — обрезка всего, что выходит за блок.

Clear не связан с фоном: он управляет обтеканием плавающих элементов.

Clear учитывает предшествующие float в том же BFC. Плавающие элементы внутри отдельного flow-root на подвал снаружи не влияют.

Высоту clear не меняет — он только опускает подвал ниже плавающих элементов.

Clear не делает элемент плавающим, а отменяет обтекание.

Flow-root влияет на высоту контейнера, а не на форму обтекания.

Clear отменяет обтекание целиком, а нужно изменить его форму.

Shape-margin задаёт расстояние до формы, но саму форму не меняет.

Border-radius меняет только вид фото, а форму обтекания задаёт shape-outside.

Float не выводит элемент из флекс-контейнера: свойство просто не применяется.

Порядок флекс-элементов меняет order, а не float.

Если родитель — флекс- или грид-контейнер, свойство float игнорируется.

Обтекания во Flexbox нет: элементы раскладываются по правилам контейнера.

Первый пункт прижимается к правому краю, следующий — левее него, и так далее: порядок получается обратным.

Если хватает места, плавающие элементы встают в одну строку.

Плавающие элементы не накладываются, а выстраиваются рядом друг с другом.

Такой порядок дал бы float: left. При right первым у правого края оказывается первый пункт.

Селектор типа и атрибут записаны слитно — это одно условие для одного элемента.

Селектор выбирает элементы, а не атрибуты: здесь — сами изображения.

Квадратные скобки без значения проверяют только наличие атрибута.

Пустое значение выбирает img[title=""]. Без знака = значение не проверяется.

^= проверяет начало значения: адрес должен был бы начинаться с .mp3.

= требует точного совпадения: адрес должен быть ровно .mp3.

~= ищет отдельное слово в списке через пробел, а в адресе пробелов нет.

Оператор $= проверяет конец значения.

Значение через дефис выбирает |=, а ~= разделяет слова пробелами.

~= ищет отдельное слово в списке через пробел.

Здесь home — часть слова, а не отдельное слово. Часть значения ищет *=.

Это сделал бы p[title] без значения.

Без кавычек допустимы только значения, похожие на имя. Иначе селектор ошибочен, и браузер пропускает всё правило.

Пробел превратил бы запись в селектор потомков: любой элемент с атрибутом внутри ссылки.

Операторы работают с любыми атрибутами, в том числе с href.

Селектор атрибута — обычный селектор, ему можно задавать любые свойства.

В :not() можно перечислить несколько селекторов через запятую: исключаются все.

Перед :not() стоит input: выбор идёт только среди полей.

Это ограничение старой версии. Современные браузеры принимают список селекторов.

Их выбрал бы :is([type="radio"], [type="checkbox"]). :not() их исключает.

:is() означает «любой из», а не «все сразу».

Нулевой вес у :where(). :is() весит как самый тяжёлый селектор в скобках.

:is() сокращает повторы и прощает непонятный браузеру селектор в списке.

После :is() стоит a через пробел: выбираются ссылки внутри.

Так весил бы :is(#toy) p или #toy p.

:where() не считается псевдоклассом при подсчёте веса — он всегда нулевой.

Селектор типа p вне скобок всё же добавляет единицу в третье число.

Всё внутри :where() весит ноль, даже id.

Этот селектор выбирает сам значок, а не пункт списка.

Он выбирает пункты без класса badge у самого li — то есть все.

:has() выбирает элемент по тому, что лежит у него внутри.

Он искал бы пункты списка внутри значка.

Знак > выбирает только непосредственных детей. Эту ссылку выбрал бы селектор потомков p a.

Лежать внутри недостаточно: между абзацем и ссылкой есть span.

Выбирается правая часть селектора. Абзац со ссылкой выбрал бы p:has(> a).

Справа от > стоит a — селектор выбирает только ссылки.

p:first-child — абзац, который стоит первым среди всех детей. Первый абзац выберет p:first-of-type.

:first-child выбирает не больше одного элемента у каждого родителя.

Так работает :first-of-type. :first-child учитывает всех детей, включая заголовок.

Перед :first-child стоит p: заголовок под этот селектор не подходит.

Это 4n. Сдвиг +2 начинает отсчёт со второго элемента.

Первые элементы выбирает формула с отрицательным шагом, например -n+6.

Формула даёт целый ряд номеров, а не одно число.

Подставьте n = 0, 1, 2: 4·0+2 = 2, 4·1+2 = 6, 4·2+2 = 10.

-n+3 даёт 3, 2, 1, 0, −1…: существуют только номера 1–3.

3n — каждый третий: 3, 6, 9.

Число без n выбирает один элемент — третий.

n+3 даёт 3, 4, 5…: все пункты, начиная с третьего.

even — чётные номера: 2, 4, 6. То же даёт 2n.

Число без n выбирает только вторую строку.

Это одна последняя строка.

Этот селектор выбирает все строки, кроме первой.

С заголовком вторым ребёнком стоит первый абзац: выбор зависит от других элементов.

Он считает только абзацы, поэтому заголовок на результат не влияет.

Перестанет работать, если после абзацев появится другой элемент.

Сработает только пока заголовок на месте; без него третьего ребёнка не будет.

Выбирается правая часть. Заголовок с абзацем после него выбрал бы h2:has(+ p).

+ выбирает только ближайшего следующего соседа.

Так работает h2 ~ p.

Вложенность проверяют селекторы потомков и >, а + ищет соседа.

Соседние селекторы работают только среди детей одного родителя.

Оба селектора смотрят только вперёд: соседи перед h2 не выбираются.

+ берёт только соседа сразу за заголовком, ~ — всех следующих.

Разница видна, когда после заголовка несколько абзацев: + выберет один, ~ — все.

Так пропадёт весь список вместе с пунктами.

Значение none отключает маркер. То же делает сокращение list-style: none.

Это свойство меняет положение маркера, а не убирает его.

Маркеры останутся и уйдут за левый край родителя.

Чтобы перекрасить только маркер, задайте цвет в ::marker.

У list-style-type нет значения цвета, только тип маркера.

Фон тут ни при чём: маркер рисуется цветом текста пункта.

Маркер наследует цвет пункта.

Оба значения показывают маркер, меняется только его место.

outside — значение по умолчанию: длинный текст переносится ровной колонкой.

Разница видна у пункта с рамкой или длинным текстом.

Оба значения работают у обоих видов списков.

Так считаются пути в атрибутах HTML, а не в CSS-файле.

Пути в CSS считаются от таблицы стилей, а не от HTML-страницы.

Такой папки нет: путь считается от файла со стилями.

От корня считается только путь, который начинается с косой черты.

list-style-type задаёт тип маркера, цвет он не принимает.

Фон маркеру задать нельзя, и это не цвет номера.

::marker оформляет только маркер или номер пункта.

Покраснеют и номер, и текст пункта.

list-style-image принимает изображение через url(), а не строку.

У обычного элемента content не работает — нужен псевдоэлемент.

font-family выбирает шрифт, а не символ маркера.

content в ::marker заменяет маркер своим текстом. Подходит и list-style-type: "🦴 ".

Фон задаёт background-image; здесь картинка становится маркером.

Сокращение принимает и изображение.

Показывается один маркер: изображение, а тип — только при ошибке загрузки.

list-style объединяет изображение, тип и положение; тип служит запасным вариантом.

Счётчик начинается с 4 и увеличивается на 1 перед выводом номера первого пункта.

Перед выводом срабатывает counter-increment.

При counter-reset можно указать начальное значение; здесь оно равно 4.

Промежутки исчезнут, но рамки соседних ячеек встанут вплотную и будут двойными.

У ячеек таблицы нет внешних отступов: промежутки задаёт border-spacing.

Внутренние отступы отодвигают текст от рамки, а не убирают промежутки между ячейками.

Соседние рамки объединяются в одну, промежутков нет.

Толщину рамки задаёт border.

Порядок обратный: сначала горизонталь.

При двух значениях первое — горизонтальный промежуток, второе — вертикальный.

Свойство задаёт промежутки между рамками ячеек, а не отступы таблицы.

empty-cells касается только пустых ячеек.

Свойство вообще не трогает ячейки с содержимым.

Ячейки делят рамки, поэтому «спрятать» пустую ячейку нельзя.

Так было бы при border-collapse: separate.

У text-align нет значения bottom: оно выравнивает текст по горизонтали.

vertical-align выравнивает содержимое ячеек, а не положение заголовка.

top — значение по умолчанию: заголовок останется сверху.

Значение bottom переносит caption под таблицу; по умолчанию top.

Все ячейки строки одной высоты.

Так будет после vertical-align: top.

Так будет после vertical-align: bottom.

Стили браузера задают строкам vertical-align: middle, и ячейки его наследуют.

Строки таблицы — не обычные блоки, и отступы у них не работают.

Отступы задают ячейкам и самой таблице.

Строке padding не задаётся — задайте его ячейкам td и th.

Промежутки между строками задаёт border-spacing таблицы.

Это position: sticky, к table-layout отношения не имеет.

Переносом управляют white-space и overflow-wrap.

Так работает автоматический алгоритм auto.

Браузеру не нужно читать всю таблицу, и длинное содержимое не раздвигает колонки.

Подсветятся и строки шапки и подвала.

Подсветится всё тело таблицы целиком.

Подсветится одна ячейка, а не вся строка.

Правило выбирает строки только внутри tbody.

В отдельной модели рамки есть только у ячеек и таблицы.

Толщина не ограничена.

Это сломает раскладку таблицы.

Заголовок стоит над или под таблицей и строки не закрывает.

Значение 12px скругляет углы, а не превращает таблицу в круг.

Свойство задано таблице, а не ячейкам.

Так было бы при отдельных рамках.

В модели отдельных рамок скругляют крайние ячейки. Линии только снизу ячеек сохраняют вид без двойных границ.

Ячейки не вложены в col, поэтому на них действуют лишь немногие свойства колонки.

Фон и ширина колонки работают.

Псевдокласс :hover у col не срабатывает.

Свойства текста ячейкам от col не передаются.

Тогда top: 0 и bottom: 0 растягивают блок от верха до низа таблицы.

Смещения таблице не заданы, она остаётся на месте.

Ширину ячеек задаёт width: 25%.

Псевдокласс :hover работает и без позиционирования.

Без этого правила текст в полях мельче и другим шрифтом, чем подписи.

Ширину задают width и max-width.

Проверку включают атрибуты HTML: required, type, min, max.

Рамку фокуса задают :focus-visible и outline.

Пропустит поля email, number, date и другие типы.

Наоборот, выберет только флажки и переключатели.

Выберет и флажки с переключателями.

Этот селектор исключает только radio и checkbox. Если появятся file, range, color или кнопки input, он выберет и их; тогда его нужно уточнить.

Фон на флажок почти не действует: браузер рисует его сам.

accent-color меняет цвет элементов, которые браузер рисует сам: флажков, переключателей, ползунков.

Рамка флажка браузера через border не меняется.

Цвет текста не меняет флажок.

Оба нельзя изменить, но недоступное поле исключено из работы с формой.

Наоборот.

Различаются отправка значения и доступ с клавиатуры.

Изменить нельзя ни то, ни другое.

Он действует на поля и формы.

:user-invalid ждёт, пока посетитель поработает с полем или отправит форму.

Работает: неверный адрес делает поле :invalid.

Оба псевдокласса отражают проверку в браузере.

Посетитель, который не различает цвета, не заметит и яркую рамку.

Подсказка объясняет, что не так, и доступна программам экранного доступа.

Одного цвета недостаточно.

Движение тоже не объясняет, в чём ошибка.

legend выбирается селектором legend.

Так подсвечивают группу, с которой сейчас работает посетитель.

Выбирается группа, а не поля.

fieldset не получает фокус; срабатывает фокус на полях внутри.

Имя начинается с двух дефисов; в :root переменная видна всей странице.

Запись со знаком $ — переменные препроцессора Sass, а не CSS.

Нужны два дефиса; с одним дефисом браузер примет запись за неизвестное свойство.

var() подставляет значение, а объявляют переменную по имени.

Конфликта нет: внутри .favorite действует её значение.

Переопределение действует только внутри .favorite.

Переменные наследуются, и значение у ближайшего предка перекрывает значение корня.

:root — только самый дальний предок; ближайшее объявление побеждает.

Запасное значение — часть стандарта и работает везде.

При объявленной переменной берётся её значение.

Если переменная есть, но значение неподходящее, запасное значение не используется.

Это также возможно при initial у незарегистрированного свойства. Если обычному свойству не подходит уже подставленный текст, запасное значение var() не используется.

Объявление с var() стало недействительным после подстановки, и свойство получило значение по умолчанию — для font-size это наследование.

Переменная объявлена, поэтому запасное значение не используется.

Свойство получает значение по умолчанию, а не ноль.

Браузер не возвращается к предыдущему объявлению: оно уже проиграло каскад.

Длина имени не важна.

Переменные подставляются в значения объявлений; селекторы и условия @media их не принимают.

Дело не в месте объявления: условие медиазапроса var() не читает вообще.

Запись диапазонов со знаками сравнения работает в современных браузерах.

Если акцент станет зелёным, имя будет вводить в заблуждение.

Номер ничего не говорит о том, где используется цвет.

Имя повторяет значение и теряет смысл при смене цвета.

Имя по назначению остаётся верным, даже если сам цвет поменяется.

Это уберёт отступ совсем, а не сделает его вдвое меньше.

Все отступы вычисляются от одного шага и меняются пропорционально.

Именно этого переменная и позволяет избежать.

Масштаб уменьшит всю карточку, включая текст.

Поддерживает, но их вес слишком велик для оформления.

Скорость загрузки тут ни при чём.

Кнопка работает при любом оформлении.

Низкая специфичность оставляет место для вариантов без !important.

Чем раньше слой объявлен, тем он слабее.

Конфликт разрешается порядком слоёв.

Между слоями решает порядок слоёв, а не специфичность.

Так было бы, если бы оба правила лежали в одном слое.

Порядок записи важен только внутри одного слоя или вне слоёв.

Поэтому слои вводят для всего файла сразу.

Ошибки нет, сработает каскад.

Наоборот: правила вне слоёв сильнее слоёв.

& стоит вплотную к :hover — это сама карточка в состоянии наведения.

& заменяется внешним селектором на своём месте, а не переносится в конец.

Псевдокласс не превращается в класс.

Так было бы с пробелом: «элемент под указателем внутри карточки».

Вложенный медиазапрос работает.

Состояние через & поддерживается.

Это обычный вложенный селектор потомка, он работает.

В CSS & нельзя склеить с частью имени класса.

Так работает прогрессивное улучшение.

@supports ничего не загружает, а только проверяет поддержку.

Скорость не меняется.

В поддерживающих браузерах :has() работает и без проверки.

Ограничения на глубину нет.

Сама глубина не определяет специфичность: дополнительный уровень с одним селектором & её не увеличивает. Но цепочки селекторов предков делают правила более зависимыми от структуры HTML и могут увеличить их вес.

& работает на любом уровне.

Дело не в загрузке, а в весе и читаемости.

Свойство transform не наследуется и не передаётся соседям.

Место элемента в потоке остаётся за ним.

Так сдвинул бы соседей margin-top.

Элемент рисуется ниже и может наехать на соседа, но сосед не сдвигается.

Так считаются проценты у left и top, но не у translate.

Проценты в translate считаются от размеров самого элемента.

Проценты допустимы.

Уменьшение — это scale(0.5).

Прямой угол — около 1.57rad.

Полный оборот — 1turn, четверть — прямой угол. То же — 90deg и 100grad.

Это полный оборот.

Полный оборот — 400grad, прямой угол — 100grad.

Ноль даёт scale(0), а -1 — отражение того же размера.

Поворот переворачивает и по вертикали, а здесь отражение только по X.

Знак минус меняет направление оси.

Отрицательный масштаб по X зеркалит элемент по горизонтали.

Первое значение — по X, второе — по Y: середина по ширине, низ по высоте.

Это середина правого края.

Это положение фона, а не точки трансформации.

translate сдвигает элемент, а не точку преобразования.

Чтобы сохранить поворот, повторите обе функции или используйте отдельные свойства rotate и scale.

Значения transform не складываются: второе объявление заменяет первое целиком.

Конфликт решает каскад: при наведении побеждает правило с :hover.

scale не меняет угол.

Порядок важен.

Каждая следующая функция работает в системе координат, изменённой предыдущей.

Сдвинется вправо на 100px, а потом повернётся на месте.

Сработают обе функции, но результат другой.

Отдельные свойства не перезаписывают друг друга.

Отдельного свойства для наклона нет — остаётся transform: skew().

Скорость одинаковая.

Как и transform, они не меняют раскладку.

Двухмерный поворот и есть поворот вокруг Z.

Поворот в плоскости экрана — это вращение вокруг оси Z, как у стрелки часов.

Вокруг X элемент кувыркается вперёд или назад.

Вокруг Y элемент поворачивается, как дверь.

rotate() — поворот вокруг Z, ему соответствует rotate3d(0, 0, 1, 45deg).

Это поворот, а не сдвиг.

Первые три числа — направление оси, а угол один — последний параметр.

Первые три числа задают направление оси: здесь — ось X.

Дело не в величине, а в плоскости элемента.

Точка преобразования тут не поможет.

Для заметного эффекта: perspective(500px) scaleZ(2) rotateX(45deg). Если поменять scaleZ и rotateX местами, масштаб снова действует на исходную плоскость.

Поддерживается.

transform: perspective(500px) rotateX(45deg).

Это точка преобразования, а не перспектива.

Для transform порядок функций важен.

Функции перед ней будут без перспективы.

Оно работает со всеми трёхмерными преобразованиями потомков.

Поэтому с общей перспективой карточки ряда повёрнуты к зрителю по-разному.

Наоборот.

Результат разный, если потомков несколько.

Без него сторона, повёрнутая спиной, остаётся видна и закрывает оборот.

Это значение по умолчанию.

В трёхмерной сцене видимость сторон определяет их поворот, а не z-index.

Перспектива добавляет глубину, но не прячет обратную сторону.

Перспективу задаёт perspective.

Без свойства она видна, но стороны плоские.

Свойство не влияет на скорость.

По умолчанию потомки сплющиваются в плоскость родителя.

Браузер сводит любое преобразование к матрице.

none было бы без трансформации.

Угол отдельно не выводится.

Так значение выглядит в Styles, а Computed показывает итог — матрицу.

Состояние зависит от :hover: без наведения действуют обычные правила.

Для этого длительность должна быть у самого элемента.

Правило с :hover перестаёт действовать, и обратное изменение идёт без длительности. Задайте её самому .box.

При наведении правило с длительностью действует, переход будет.