Ещё раз о взломанном котопрофайле

Несмотря на обилие ответов на это испытание, всё же раздел продолжает вызывать трудности у новичков. Попробую я рассказать со своей точки зрения, как можно подступиться и выполнить это испытание. Итак, в испытании мы видим окно с HTML, под которым находится окно с CSS. В окне с HTML, прямо внутри head, среди <style></style> вписаны те стили от злобных котов, которые и нужно победить. Такие стили, которые находятся внутри head, называются внутренними (или ещё я встречал название “внутренние таблицы стилей”).

Для того, чтобы перебить какой-то селектор в принципе, необходимо выполнить 2 основных условия:

  1. “Сильнее” - то, что написано в коде НИЖЕ;
  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%-там!

13 лайков

!important решает все)) но это чит

Не подскажете,где посмотреть когда запятую ставить,а когда пробел?

Запятая перечисляет селекторы, а пробел - это часть одного селектора, обозначающая вложенность одного элемента в другой.

2 лайка

странно, весь курс я конспектирую и не припоминаю, чтобы упоминалось о запятых…

Всем привет! Спасибо вам, Alexey_Ivanov, за вашу точку зрения. Пока не прочитала ваш первый абзац, вообще не понимала что делать и с чего начинать. Я зеленый новичок и это испытание погрузило меня в стопор!

Ни разу в других заданиях не вставлялся кусок CSS-кода внутрь HTML !!! Так тоже можно? Ясно что “коты напортачили”, но получается что этот CSS-код работает внутри HTML?! И поэтому картинка нарушена? Все это я начала понимать только когда начала читать Алексея: "Такие стили, которые находятся внутри head, называются внутренними ". (Спасибо! - Они имеют место быть???)

И задание “Верните испорченные стили обратно, увеличив специфичность и приоритетность испорченных CSS-правил.” - для меня не понятно. Напишите для сопливых чайников: “Стили в CSS-коде внутри HTML-кода - ошибка! Но они работают, поэтому картинка нарушена. Увеличьте специфичность и приоритетность этих стилей в главных CSS-правилах, чтобы исправить профиль Феликса.” Вроде так понятнее.
Алексей, еще раз вам спасибо и форуму! И Академии конечно же, учиться интересно!

1 лайк

Использование элемента style объяснялось в одном из курсов, видимо вы невнимательно его проходили. Аж два задания было этому посвящено.


Спасибо! Все поняла, буду внимательнее. Столько правил и особенностей!

1 лайк

Вот именно почему так не написать. Ато котики шмотики, детсад ей богу.

И ВЫ считаете, что для новичка это легко должно быть? Сначала даются плевые задания без теории почти, а потом испытание, с которым можно голову сломать. Спасибо за объяснение, в принципе логика понятна, но самостоятельно уверен сделать не смог бы.

1 лайк

Мой вариант получился таким. Не понял как выровнять списки левый и правый столбец в информации.

html, body{
margin:0;
padding:0;
}
body{
font-family:Tahoma, Arial, sans-serif;
font-size:12px;
width:550px;
height:300px;
}
.profile{
padding:5px 10px;
}
.profile img{
display:block;
padding:10px;
border: 2px solid #34495e;
border-radius:8px;
}
.profile .photo{
float:left;
width:152px;
}
.profile .info{
float:left;
width:368px;
margin-left:10px;
}
#info-title, .info h2 {
margin:0;
padding:10px;
font-size:12px;
font-weight:normal;
background:#34495e;
color:#fff;
border-radius:4px;
}
.profile div.fact{
padding:10px;
background:white;
}
.profile div.fact:nth-child(odd){
background:#ecf0f1;
}
.profile .fact div.fact:after{
content:"";
clear:both;
display:table;
}
.profile .fact div.fact .title{
float:left;
width:120px;
text-align:right;
color:#7f8c8d;
}
.profile .fact div, .fact .value{
margin-left:140px;
color:#34495e;
}
.albums{
margin-top:5px;
}
#miska, .albums img{
float:left;
margin-right:5px;
}
.albums img:last-child{
margin-right:0;
}
.profile .button{
display:block;
height:30px;
margin:5px 0;
text-align:center;
line-height:30px;
color:#fff;
border-radius:4px;
}
.photo .stroke{
background:#3498db;
}
.photo .feed{
background:#2ecc71;
}
.photo.startle{
background:#e74c3c;
}