Тест: Вы знаете основы CSS? (2025)
Вы достаточно фронтенд?
Викторина: Вы знаете CSS?
- Современный CSS? 🤔
- Нужен ли CSS в вашем резюме??? 🚀
- Выбор из нескольких вариантов. 🤖 … _Насколько это может быть сложным, а?»
Выберите ЕДИНСТВЕННУЮ НЕВЕРНУЮ ❌ font-size:
10cx неверен, потому что cx не является реальной единицей CSS. (По крайней мере на момент написания.)
Популярные единицы включают знакомые px, rem, em.
Новые единицы полезны для динамичных, адаптивных макетов.
ch— ширина символа0vmin— минимум окна просмотраvmax— максимум окна просмотраvh— высота окна просмотраvw— ширина окна просмотра
Существуют также несколько единиц, которые всегда были, но редко используются, например cm для сантиметров, mm, in для дюймов, pt для пунктов
Можете найти ЕДИНСТВЕННЫЙ корректный 👍 шестнадцатеричный код?
Шестнадцатеричные коды используются для представления цветов в CSS. Они начинаются с # и должны содержать 3, 4, 6 или 8 шестнадцатеричных цифр.
3‑символьный код — это сокращение для 6‑символьного, где каждый символ повторяется. 4‑символьный код включает альфа‑канал для прозрачности.
Например, #ABC то же самое, что #AABBCC, а #ABCD соответствует #AABBCCDD. Чтобы узнать больше о работе с шестнадцатеричными значениями, загляните в мой викторина по числам JavaScript.
Какая из этих единиц НЕ является действительной ❌ CSS‑единицей?
Новые единицы, такие как ch, vmin, vmax, vh, vw, довольно полезны для динамических/адаптивных макетов.
Также существуют несколько единиц, которые всегда были, но редко используются, например cm для сантиметров, mm, in для дюймов, pt для пунктов, pc, cap для размера заглавных букв и ex, равный высоте буквы x.
Популярные единицы включают знакомый px для пикселей, em, относительный к размеру шрифта элемента, и rem — тайное посвящение забытой группы 90‑х годов R.E.M. (ладно, на самом деле это просто относительная единица em, ссылающаяся на корневой элемент).
Какой селектор лучше всего соответствует следующему HTML?
<a id="home" name="home" href="/home">Home</a>Правильный ответ — a#home[name='home'], который соответствует как атрибуту id, так и атрибуту name. Селекторы CSS чувствительны к регистру, поэтому #Home не сработает, а пробелы означают дочерние элементы, что здесь не применимо.
Селектор :contains() не является стандартным селектором CSS, но доступен в некоторых JS‑библиотеках.
Какой селектор соответствует следующей HTML‑кнопке?
<button onclick="openModal()">Contact</button>Правильный ответ — button[onclick], который выбирает элементы, имеющие атрибут onclick.
Обратите внимание, что :link применяется только к непосещённым ссылкам с href, ::click не является валидным псевдо‑элементом, а :focus выбирает только элемент, находящийся в фокусе.
Какой из этих селекторов недействителен?
Селектор c > > d {} недействителен, потому что комбинирующий оператор дочернего элемента повторён без селектора между двумя символами >.
Другие селекторы корректны. Типовой селектор вроде c {} синтаксически валиден в CSS, даже если c не является стандартным HTML‑элементом.
Какой селектор соответствует последней ссылке в приведённом ниже 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>, который является третьим дочерним элементом своего родителя.
Какой селектор получит приоритет?
Селектор a#quote получает приоритет из‑за ID, который имеет более высокую специфичность, чем селекторы по тегу или классу.
Как центрировать «shit» в коробке?
Использование text-align: center; — правильный способ центрировать текст в блочном элементе. Свойства align применяются в flexbox‑верстке, а margin: 0 auto; используется для горизонтального центрирования блочных элементов.
Свойство align-content применяется в grid‑верстке, а text-content не является допустимым CSS‑свойством.
Как центрировать содержимое по вертикали внутри блочного контейнера в современном потоковом макете?
Использование align-content — современный способ центрировать содержимое блочного контейнера по вертикали в потоковом макете.
align-items и justify-content используются для flexbox и grid‑макетов, но не для потока.
Оба margin: 0 auto; и margin: auto; центрируют блочный элемент по горизонтали, но не по вертикали.
Какой пиксельный размер текста ссылки <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.
Какой будет размер в пикселях у 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.
Как и в предыдущем вопросе, каков будет размер в пикселях у 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.
Какой селектор имеет наименьшую специфичность?
:where(.card) .title имеет наименьшую специфичность. Псевдокласс :where() и всё, что внутри него, вносит 0-0-0, поэтому учитывается только .title. :is(.card) .title сохраняет специфичность .card, .card .title содержит два класса, а #card .title включает ID.