Наследование и каскадирование / Битва за курочку. Запрещённый приём [13/18]
×

Битва за курочку. Запрещённый приём [13/18]

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

CSS-правила, которые прописаны в style обладают наивысшим приоритетом. Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов. Поэтому мы и назвали этот приём запрещённым.

Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово !important. Оно задаёт CSS-свойству усиленный приоритет. Вот пример:

HTML:

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

CSS:

.blue {
    color: blue !important;
}

Цвет текста в этом примере будет синим.

При вёрстке не рекомендуется часто использовать !important. По возможности старайтесь обходиться без него.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
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 id="keks-vs-rudolf" class="battle"> <div class="cat cat-keksik">Кексик</div> <div class="cat cat-rudolf">Рудольф</div> <!-- Видя, как победа ускользает из лап, Рудольф решается на запрещенный приём --> <div style="margin-left: 120px;" class="chicken to-keksik to-rudolf"></div> </div> </body> </html>
CSS
/* Усилением селектора здесь не обойтись. Придётся ответить грубостью на грубость */ .to-keksik { margin-left: -120px; }
HTML Academy
  1. Восстановите справедливость и верните заслуженную награду Кексику.

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

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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