Dan Levy

Тест: Вы знаете основы CSS? (2025)

Вы достаточно фронтенд?

Викторина: Вы знаете CSS?

1. 

Разминка: Шрифты

Выберите ЕДИНСТВЕННУЮ НЕВЕРНУЮ ❌ font-size:

10cx неверен, потому что cx не является реальной единицей CSS. (По крайней мере на момент написания.)

Популярные единицы включают знакомые px, rem, em.

Новые единицы полезны для динамичных, адаптивных макетов.

  • ch — ширина символа 0
  • vmin — минимум окна просмотра
  • vmax — максимум окна просмотра
  • vh — высота окна просмотра
  • vw — ширина окна просмотра

Существуют также несколько единиц, которые всегда были, но редко используются, например cm для сантиметров, mm, in для дюймов, pt для пунктов

2. 

Разминка: Цвета

Можете найти ЕДИНСТВЕННЫЙ корректный 👍 шестнадцатеричный код?

Шестнадцатеричные коды используются для представления цветов в CSS. Они начинаются с # и должны содержать 3, 4, 6 или 8 шестнадцатеричных цифр.

3‑символьный код — это сокращение для 6‑символьного, где каждый символ повторяется. 4‑символьный код включает альфа‑канал для прозрачности.

Например, #ABC то же самое, что #AABBCC, а #ABCD соответствует #AABBCCDD. Чтобы узнать больше о работе с шестнадцатеричными значениями, загляните в мой викторина по числам JavaScript.

3. 

Разминка: Единицы

Какая из этих единиц НЕ является действительной ❌ CSS‑единицей?

Новые единицы, такие как ch, vmin, vmax, vh, vw, довольно полезны для динамических/адаптивных макетов.

Также существуют несколько единиц, которые всегда были, но редко используются, например cm для сантиметров, mm, in для дюймов, pt для пунктов, pc, cap для размера заглавных букв и ex, равный высоте буквы x.

Популярные единицы включают знакомый px для пикселей, em, относительный к размеру шрифта элемента, и rem — тайное посвящение забытой группы 90‑х годов R.E.M. (ладно, на самом деле это просто относительная единица em, ссылающаяся на корневой элемент).

4. 

Селектор: Основы

Какой селектор лучше всего соответствует следующему HTML?

  <a id="home" name="home" href="/home">Home</a>

Правильный ответ — a#home[name='home']: он совпадает с атрибутами id и name. В HTML в стандартном режиме значения ID чувствительны к регистру, поэтому #Home не подходит. Пробел в a [id='home'] — комбинатор потомка: он ищет элемент внутри <a>, а не саму ссылку.

:contains() не является стандартным селектором CSS, хотя встречается в JS-библиотеках.

5. 

Селектор: Основы

Какой селектор соответствует следующей HTML‑кнопке?

  <button onclick="openModal()">Contact</button>

Правильный ответ — button[onclick], который выбирает элементы, имеющие атрибут onclick.

Обратите внимание, что :link применяется только к непосещённым ссылкам с href, ::click не является валидным псевдо‑элементом, а :focus выбирает только элемент, находящийся в фокусе.

6. 

Селектор: Основы

Какой из этих селекторов недействителен?

Селектор c > > d {} недействителен, потому что комбинирующий оператор дочернего элемента повторён без селектора между двумя символами >.

Другие селекторы корректны. Типовой селектор вроде c {} синтаксически валиден в CSS, даже если c не является стандартным HTML‑элементом.

7. 

Селектор: Основы

Какой селектор соответствует последней ссылке в приведённом ниже HTML?

  <nav>
    <a name="home" href="/home">Home</a>
    <a name="login" href="/login">Login</a>
    <a name="help" href="/help">Help</a>
  </nav>

Правильный селектор — a:last-child, который выбирает последний <a>, когда он также является последним дочерним элементом своего родителя. nav:nth-child(3) выберет элемент <nav>, который является третьим дочерним элементом своего родителя.

8. 

Селектор: Специфичность

Какой селектор получит приоритет?

Селектор a#quote получает приоритет из‑за ID, который имеет более высокую специфичность, чем селекторы по тегу или классу.

9. 

Макеты: Центрирование

Как центрировать текст и другое строчное содержимое по горизонтали внутри блочного контейнера?

text-align: center; центрирует строчное содержимое по горизонтали внутри блочного контейнера. margin: 0 auto; может центрировать сам блочный элемент с ограниченной шириной.

Свойств align и text-content в CSS нет. align-content управляет выравниванием содержимого в применимых режимах раскладки, но не заменяет горизонтальное выравнивание текста.

10. 

Макеты: Центрирование

Как центрировать содержимое по вертикали внутри блочного контейнера в современном потоковом макете?

Использование align-content — современный способ центрировать содержимое блочного контейнера по вертикали в потоковом макете.

align-items и justify-content используются для flexbox и grid‑макетов, но не для потока.

Оба margin: 0 auto; и margin: auto; центрируют блочный элемент по горизонтали, но не по вертикали.

11. 

Макеты: Единицы

Какой пиксельный размер текста ссылки <a> в приведённом ниже HTML?

  <body style="font-size: 40px !important;">
    <nav style="font-size: 50%;">
      <a style="font-size: 25%;">HOME</a>
    </nav>
  </body>

font-size для <a> вычисляется как 5px: 40px (body) * 50% (nav) = 20px, затем 20px * 25% = 5px.

12. 

Единицы: REM

Какой будет размер в пикселях у 1.2rem для ссылки “HOME” в следующем HTML?

  <html style="font-size: 10px;">
    <body style="font-size: 20px;">
      <a style="font-size: 1.2rem;">HOME</a>
    </body>
  </html>

1.2rem переводится в 12px, потому что единицы rem ссылаются на корневой размер шрифта <html>, установленный здесь как 10px.

13. 

Единицы: EM

Как и в предыдущем вопросе, каков будет размер в пикселях у 1.2em для ссылки “HOME” в приведённом HTML?

  <html style="font-size: 10px;">
    <body style="font-size: 20px;">
      <a style="font-size: 1.2em;">HOME</a>
    </body>
  </html>

1.2em переводится в 24px, потому что единицы em ссылаются на унаследованный размер шрифта, установленный здесь как 20px.

14. 

Селектор: Специфичность

Какой селектор имеет наименьшую специфичность?

:where(.card) .title имеет наименьшую специфичность. Псевдокласс :where() и всё, что внутри него, вносит 0-0-0, поэтому учитывается только .title. :is(.card) .title сохраняет специфичность .card, .card .title содержит два класса, а #card .title включает ID.

Loading comments...