Викторина из 15 вопросов: хорошо ли вы знаете CSS

Original author: Alexander Dawson
  • Translation

Простые вопросы


Вопрос 1

Какой из приведённых вариантов не является допустимым значением свойства border-style?

  • dotted
  • inset
  • glazed
  • groove
  • solid


Ответ
glazed

image

Описано в разделе "4.2. Line Patterns: the ‘border-style’ properties" спецификации W3C CSS Backgrounds and Borders Module Level 3.



Вопрос 2

Что из перечисленного не является допустимым значением длины?

  • cm
  • dm
  • em
  • mm




Вопрос 3

Какой селектор позволяет вам обратиться к каждому элементу веб-страницы?

Ответ
Универсальный селектор (*)

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

* {
  margin: 0;
  padding: 0;
}


Should You Reset Your CSS?


Вопрос 4

Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?

Ответ
visibility или opacity

В CSS есть несколько способов спрятать HTML-элемент.

Установив свойству visibility значение hidden, мы спрячем элемент. Он всё ещё будет занимать место на странице, равное его размерам. К примеру, если размеры элемента — 100x100px, вы увидите пустое место размером 100x100px на том месте, где он должен быть. Также можно назначить ему opacity: 0.

Спрятать элемент так, чтобы он не занимал место, можно назначить свойству display значение none. Это приводит к такому же эффекту, как если бы элемента вообще не было.


Вопрос 5

В CSS есть 16 основных названий для цвета. Какое из перечисленных названий к ним не принадлежит?

  • olive
  • fuchsia
  • cyan
  • aqua
  • maroon


Ответ
cyan

cyan – допустимое значение цвета, но оно не относится к основным. Оно относится к расширенному списку названий цветов.

Introduction to CSS Colors


Вопрос 6

У свойства font-style есть четыре допустимых значения. Три из них – это inherit, normal, и italic. А какое – четвёртое?

Ответ
oblique

По теме можно почитать документацию на MDN

CSS Typography: The Basics


Вопрос 7

У какого из двух селекторов большая специфичность?

#object h2::first-letter


body .item div h2::first-letter:hover


Ответ
У первого.

#object h2:first-letter


Его значение специфичности — 102. У второго — 24.

How CSS Specificity Works


Вопросы средней сложности


Вопрос 8

Каков идеальный порядок следующих селекторов псевдо-классов?

  • :active
  • :hover
  • :link
  • :visited


Ответ
  • :link
  • :visited
  • :hover
  • :active


Один элемент может одновременно удовлетворять нескольким псевдо-классам. Поэтому порядок псевдо-классов имеет значение. Как мы знаем, если у двух селекторов одинаковая специфичность, то выигрывает тот из них, который находится дальше по списку.

Один из примеров, где видна эта важность – это гиперссылка. Предположим, вы наводите вашу мышь на ссылку, и затем кликаете по ней, не сдвигая мыши. В этот момент ссылка удовлетворяет сразу двум селекторам, :hover и :active.

Значит, если правило :active будет выше, чем :hover, то пользователи вообще не увидят применения правила :active.

Запомнить порядок можно при помощи мнемонического правила LVHA. Link → Visited → Hover → Active.

CSS Link Pseudo-classes


Вопрос 9

Какое из следующих свойств не влияет на модель box?

  • content
  • padding
  • margin
  • outline
  • border


Ответ
outline

Отрывок из спецификаций outline, 18.4 Dynamic outlines: the ‘outline’ property:
Обводка, созданная через свойство outline, рисуется «поверх» бокса, то есть outline всегда сверху, и не влияет на позицию и размер бокса или других боксов. Поэтому, показ или скрытие outline не приводит к пересчёту страницы.



Вопрос 10

Какой из перечисленных медиа типов не является допустимым для использования в media queries?

  • tv
  • all
  • voice
  • print
  • braille
  • tty
  • embossed


Ответ
voice

Допустимые типы перечислены в Media Queries W3C. voice – недопустимый тип. Зато существует тип speech.


Вопрос 11

Свойству font-family можно назначить пять основных значений. Три из них перечислены, назовите два других.

  • serif
  • sans-serif
  • monospace
  • ?
  • ?


Ответ
  • cursive
  • fantasy


«3.1.1 Generic font families» в CSS Fonts Module Level 3.

The Essential Guide to @font-face


Вопрос 12

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

Ответ
currentColor

Пример, в котором цвета background-color и border будут равны значению свойства color:

.box {
  color: green;
  background-color: currentColor;
  border: 1px dashed currentColor;
}


Преимущество в том, что мы можем менять цвет только в одном месте. Работает так же, как и остальные переменные в CSS.

4.4. currentColor color keyword” в CSS Color Module Level 3

Introduction to CSS Variables


Сложные вопросы


Вопрос 13

Что из перечисленных не является допустимой единицей в CSS?

  • ch
  • turn
  • px
  • ems
  • dpcm
  • s
  • hz
  • rem


Ответ
ems

  • ch и rem – длина шрифта
  • turn – единица для угла
  • px – абсолютная единица длины
  • dpcm – единица для разрешения экрана
  • s – единица времени
  • hz – единица частоты



Вопрос 14

Какие из следующих цветов не были предложены в спецификации W3C?

  • blanchedalmond
  • dodgerblue
  • peachpuff
  • orchidblack
  • navajowhite
  • tomato


Ответ
orchidblack

Раздел "5. Named Colors" в CSS Color Module Level 4 Editor’s Draft


Вопрос 15

Какое правило @ в CSS позволяет определять кодировку символов в таблице стилей?

Ответ
charset

Необходимо в качестве кодировки CSS использовать UTF-8. Тогда вам не нужно будет объявлять правило charset.

Declaring character encodings in CSS.

Only registered users can participate in poll. Log in, please.

На сколько вопросов вы ответили правильно?

Support the author
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 17

    0
    Спасибо. Некоторые вопросы были интересны, многие освежить память.
      +13
      Особенно про orchidblack
        +4
        Некоторые к сожалению освежают ошибочно.
        свойства font-style есть четыре допустимых значения. Три из них – это inherit, normal, и italic. А какое – четвёртое?


        Если брать и мешать все значения которые доступны, родные и глобальные как сделано во вопросе, то всего доступных данному правилу 6.
        font-style: normal;
        font-style: italic;
        font-style: oblique;

        /* Global values */
        font-style: inherit;
        font-style: initial;
        font-style: unset;
        +5
        Смешно получилось в 15 вопросе. Получился пользователь хабрахабра charset
          +7
          Я в своё время запомнил правило для 8 вопроса как-то так:
          LoVe / HAte
          • UFO just landed and posted this here
              0
              Я без мнемоник запоминал, когда занимался версткой, какое свойство просто более «сложное» и «выше лежит». я не вижу в этом порядке ничего контр-интуитивного.
              • UFO just landed and posted this here
          • UFO just landed and posted this here
              +26
              В CSS есть 16 основных названий для цвета. Какое из перечисленных названий к ним не принадлежит? [...] Ответ: *** – допустимое значение цвета, но оно не относится к основным. Оно относится к расширенному списку названий цветов.

              Позор на мою седую голову, и как я этого мог не знать. Отличный вопрос, демонстрирующий знание и, главное, понимание CSS!
                +9
                Ужасно! Пойду переверстывать все сайты:(
                • UFO just landed and posted this here
                  +5
                  >>Что из перечисленных не является допустимой единицей в CSS?
                  ответил hz (
                    +6
                    > В CSS есть 16 основных названий для цвета. Какое из перечисленных названий к ним не принадлежит?
                    > Какие из следующих цветов не были предложены в спецификации W3C?
                    Простите, вы серьезно? Вы считаете это важное знание? Никто не использует имена цветов при верстке.
                    Лучше бы спросили про позиционирование
                      +3
                      Главное, чтобы этот пост не прочитал какой нибудь руководитель и не стал мучить на собеседовании этими вопросами)
                      0
                      Помнится, лет 6 назад, ещё во времена IE6, была у меня толстая книжка, взятая в библиотеке — по HTML 4.1 и CSS 2 (с хвостиком, 2.3 что ли, или как там).
                      Как ни странно, большинство ответов (border-style, селектор, visibility, @ charset, oblique...) — просто вспоминал оттуда.
                      До некоторых можно просто догадаться: все единицы кроме ems знакомы.
                      • UFO just landed and posted this here

                        Only users with full accounts can post comments. Log in, please.