Наследование и каскадирование / Битва за курочку. Запрещённый приём [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. По возможности старайтесь обходиться без него.

Всегда было интересно, как работает бэкенд? Попробуйте создать небольшое приложение на базовом интенсиве по PHP.

Выполнить задание
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, уровень 2 #14, который стартует 9 апреля.

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

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

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

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