Несмотря на обилие ответов на это испытание, всё же раздел продолжает вызывать трудности у новичков. Попробую я рассказать со своей точки зрения, как можно подступиться и выполнить это испытание. Итак, в испытании мы видим окно с HTML, под которым находится окно с CSS. В окне с HTML, прямо внутри head, среди <style></style> вписаны те стили от злобных котов, которые и нужно победить. Такие стили, которые находятся внутри head, называются внутренними (или ещё я встречал название “внутренние таблицы стилей”).
Для того, чтобы перебить какой-то селектор в принципе, необходимо выполнить 2 основных условия:
- “Сильнее” - то, что написано в коде НИЖЕ;
- Сила определяется также тем, как прописан селектор (вспоминаем табличку про специфичность).
Я не зря говорил про расположение окон: думаю, на сайте школы было не специально, но очень удачно окна расположены таким образом: “сильнее” - то, что написано ниже. Т.е. код CSS (внешние таблицы стилей) СИЛЬНЕЕ стилей в head HTML. А значит, чтобы перебить свойства злобных котов, нам нужно в большинстве случаев просто переписать селекторы в СSS.
Начнём по порядку. Первое, что нужно перебить - это #info-title. Видя #, напрягаемся - это селектор на id, с высоким (но ещё не самым) приоритетом. Перебить его можно только аналогичным селектором - с #. Находим блок в HTML, в котором есть id = “info-title”. Это заголовок “Общая информация” (<h2 id="info-title">Общая информация</h2>). Теперь идём во внешние стили (окно CSS) и ищем тот селектор, который в норме задавал параметры этому заголовку: .info h2 Такой селектор слабее любого с #. Поэтому мы просто возьмём тот же #info-title и просто подпишем к селектору .info h2 через запятую. Вот так: #info-title, .info h2 {} (вспоминаем: сильнее то, что НИЖЕ - несмотря на то, что этот один и то же селектор, он написан НИЖЕ - во внешних таблицах, - поэтому работает). Идём дальше.
Вместе с ним прописан в окне HTML .profile .button - это три кнопки под аватаркой (“Погладить”, “Накормить”, “Напугать”). Смотрим, как написан селектор, определяющий нормальные свойства кнопок в CSS-окне. Ага, это просто .button и по одному классу на отличающиеся свойства. Что ж, возьмём и просто подпишем .profile к селектору .button. Итого: получим тот же самый селектор .profile .button {}, который, опять же, будет НИЖЕ и, следовательно, перебьёт селектор от злобных котов! Важен также факт, что 2 класса всегда сильнее одного. Хочу обратить здесь внимание: селектор не обязательно должен слово в слово повторять тот, который нужно перебить. Главное, чтобы он был сильнее и специфичнее. Поэтому вместо .profile .button можно было бы написать .photo .button - он тоже работает, т.к. 2 класса в селекторе специфичнее (“сильнее”) одного! Аналогично сделаем с селекторами, которые отвечают за различные свойства кнопок: .profile .stroke, .profile .feed, .profile .startle (или .photo .stroke, .photo feed, .photo .startle). Кричим “ура” - всё работает, всё меняется.
Далее идём. А дальше есть одна особенность: пробелы в селекторе перед точкой и их отсутствие. Это важно и принципиально. Так вот, если написано div .fact (т.е. с пробелом), это значит, что есть какой-то div, ВНУТРЬ которого вложен другой тег (пусть это будет div - для краткости) c классом .fact! Но первому div-у, в который вложен div c классом .fact, никто не запрещает иметь свой набор классов! Хе-хе… А вот если написано div.fact (т.е. без пробела) - такая надпись говорит о том, что есть ОДИН div, у которого есть класс .fact, т.е. <div class="fact"></div>. Т.е. пробел говорит про ВЛОЖЕННОСТЬ элементов - одно находится в другом.
Используем всё тот же принцип: сильнее то, что ниже, а также специфичнее. Смотрим, что за данное свойство в CSS отвечают селекторы с .fact (не все, нас интересуют первые два). Давайте опять воспользуемся “то, что ниже” и подпишем к .fact те части, которые есть в селекторах от злобных котов: .profile div.fact{}, profile div.fact:nth-child(odd){}; Опять же, селектор может не быть точно такой же, .profile можно было бы заменить на .info: .info div.fact, например… Он всё равно работает так, как нужно!
Сражаемся теперь с .profile .fact div - этот селектор перебивает .fact .title и .fact .value. Возможны такие способы: дописать им третьим классом .profile: .profile .fact .title и .profile .fact .value. А можно воспользоваться верхней хитростью и сделать аналогичный по специфичности селектор: .fact div.title и .fact div.value - лично мне этот вариант нравится больше.
В нашем испорченном коде есть один “гадкий” селектор, который ничем не победить, кроме как через !important - он портит нам заголовок _<h2>Альбомы</h2>_ Здесь уже мы никак не выкрутимся. Ищем в коде, где задаётся это свойство: это класс .info h2, к которому мы в самом начале подписали #info-title. В первые 2 свойства - margin: 0; padding: 10px; - подставляем !important. Да, вот тут никак без него - это высший приоритет (стиль прямо в теге).
Остался совсем маленький штрих - выстроить фотки с котами в один ряд. Видно, что всё портит фотка кота с миской. Находим во внутренних стилях “испорченный” селектор #miska - уже говорил выше, что # перебивает только #. Поэтому ничего не остаётся, как переписать его - #miska -
через запятую НИЖЕ, в окне СSS - к селектору свойств фоток .albums img {}; Итого получаем: #miska, .albums img {};
Теперь нажимаем “Проверить” и… Радуемся 100%-там!