Наследование и каскадирование / Битва за курочку [9/18]
×

Битва за курочку [9/18]

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

Разберём пример. Вот HTML-код, в котором есть абзац с двумя классами:

<p class="red blue">Синий или красный?</p>

А вот CSS-код c двумя правилами для этих классов:

.blue {
    color: blue;
}

.red {
    color: red;
}

Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?

Ответ: красного цвета, второе правило приоритетнее.

Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью. В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже. В нашем случае это правило для класса red.

В этой серии заданий вам нельзя менять значения CSS-свойств, но можно изменять селекторы или менять порядок CSS-правил в коде.

Без классных наклеек и значков сейчас никуда. Заходите к нам в магазин.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Битва за курочку</title> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> <link href="/assets/course66/battle.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Кому достанется курочка?</h1> <div class="battle"> <div class="cat cat-keksik">Кексик</div> <div class="cat cat-rudolf">Рудольф</div> <div class="chicken to-keksik to-rudolf"></div> </div> </body> </html>
CSS
.to-keksik { margin-left: -120px; } .to-rudolf { margin-left: 120px; }
HTML Academy
  1. Поменяйте CSS таким образом, чтобы курочка досталась Кексику!

Изменять значения свойств в CSS нельзя: cистема это отслеживает и результат принимать не будет.

Теория Проверить Следующее задание

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.