Испытание: взломанный котопрофайл 18/18. Мое решение на 100% и подробная инструкция.


#1

Прежде чем начинать решать задание и играть в угадайку, дописывая наугад селекторы, давайте подробно изучим HTML-код. Итак, что мы видим: атрибут style в котором прописаны стили “ломающие” наш котопрофайл. Идем по порядку и разбираем основной контейнер :package: div с классом profile. Это общий большой контейнер-родитель :man_in_tuxedo:, от которого все находящиеся в нем маленькие контейнеры будут наследовать свойства.
В контейнере-родителе мы видим еще один контейнер :package: div с классом photo (наш аватар), сверяем его с примером и видим, что с ним все в порядке, пропускаем его и двигаемся дальше. Дальше у нас идут 3 тега span имеющие 1 общий button класс и по одному различающемуся классу (stroke, feed и startle). Глядя на пример мы видим, что это наши кнопки под аватаром. Идем в наш CSS редактор и ищем селекторы с названиями классов совпадающими с кнопками,усиливаем их путем добавления еще одного класса button вот так:

.button.stroke {
background: #3498db;
}

.button.feed {
background: #2ecc71;
}

.button.startle {
background: #e74c3c;
}

Их можно так-же усилить и с помощью класса profile, но я считаю, что мой вариант более корректный.
Наши кнопки получили нужный нам цвет, теперь нужно задать нужную форму. Выше мы видим свойства для наших button, чтобы они заработали усиливаем их путем добавления селектора span (т.к. они лежат внутри тега span), вот так:

span.button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

Идем дальше, следующий большой контейнер :package: div c классом info.
В нем мы видим заголовок 2-го уровня h2 с присвоенным идентификатором и средний контейнер div с классом fact внутри которого еще 2 маленьких контейнера div с классами title и value. Идем дальше и видим еще 3 точно таких-же средних контейнера div с классами fact, каждый из которых вмещает по 2 маленьких контейнера div с классами title и value. Переходим в CSS редактор и ищем селекторы отвечающие нашим title и value. Чтобы придать им нужный цвет текста, усиливаем их с помощью класса info, т.к. он является родителем для них, вот так:

.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.info .fact .value {
margin-left: 140px;
color: #34495e;
}

Таким образом мы изменили цвет для всех маленьких контейнеров div с классами title и value, находящихся в средних контейнерах div с классами fact, что в свою очередь лежат в большом контейнере info, который в свою очередь находится в самом большом контейнере profile и наследует стили от него.
Так-же нам нужно изменить общий цвет строк фона блока с информацией на белый. Усиливаем свойства наших самых “маленьких” контейнеров div с помощью того-же класса info, вот так:

.info div.fact {
padding: 10px;
background: white;
}

Нечетным строкам нужно задать светло-серый цвет фона. Усиливаем точно так-же с помощью класса info:

.info .fact:nth-child(odd) {
background: #ecf0f1;
}

Идем дальше, мы снова видим заголовок 2-го уровня без идентификатора но с установленными стилями style, которые, как мы знаем, имеют самый высокий приоритет. Идем в наш CSS код и ищем селектор отвечающий за внешний вид заголовков 2-го уровня. Не забываем о том, что у нас 2 таких заголовка, один из которых имеет идентификатор, а второй стили наивысшего приоритета. Для того чтобы к заголовку с идентификатором применить нужный цвет фона мы усиливаем путем добавления идентификатора info-title. Далее нужно разобраться со следующим заголовком. Т.к. стили для его указаны с помощью style (а именно margin и padding), значит именно их и нужно усилить с помощью !important. Вот так:

#info-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

Идем дальше, мы видим контейнер div с классом albums. в котором 4 изображения, одно из них имеет идентификатор miska. Если посмотреть в HTML код, то можно увидеть, что стили для этого идентификатора “сломаны”, а в CSS вообще нет селектора соответствующего селектора. Делаем вывод, что нужно его добавить. Идем в CSS-редактор и думаем куда его добавить. Видим, что для всех изображений в контейнере albums применен левый float, а из-за того, что в HTML для идентификатора miska задан margin-right: 50px, он как-бы выпадает из общего потока. Значит идентификатор miska нужно добавить именно к селектору отвечающему за изображения в альбомах, вот так:

#miska, .albums img {
float: left;
margin-right: 5px;
}

Спасибо за внимание, надеюсь моя инструкция кому-то поможет понять как решить задание. На самом деле решений задания есть несколько и все я их перепробовал, но вот этот вариант мне показался наиболее красивым и правильным.
:point_up_2:P.S. не грешите чрезмерным использованием !important, не пытайтесь везде добавить .profile, лучше поймите как все работает, какие свойства наследуются от родителя (profile) и не создавайте непонятный в итоге код.


#2

Конечно поможет) Вот мне очень помог) Спасибо:+1:


#3

Добрый день! Большое спасибо за комментарии, ибо действительно подбором решил почти все. Это не есть хорошо))
Вроде все понятно, но пробелы в синтаксисе бывают, можете на пальцах объяснить чем отличается два записи, когда классы пишутся вместе и когда через пробел, пример
.button.stroke { (тут вместе)
background: #3498db;
}
.info .fact .title { (тут раздельно)
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}
Спасибо!


#4
<div class="button stroke"></div>

vs

<div class="info">
   <div class="fact">
      <div class="title">
      </div>
  </div>
</div>

#5

Спасибо, хорошее наглядное дополнение к описанию от разработчика, которое только что нашел и прочитал,

А дальше есть одна особенность: пробелы в селекторе перед точкой и их отсутствие. Это важно и принципиально. Так вот, если написано div .fact (т.е. с пробелом), это значит, что есть какой-то div, ВНУТРЬ которого вложен другой тег (пусть это будет div - для краткости) c классом .fact! Но первому div-у, в который вложен div c классом .fact, никто не запрещает иметь свой набор классов! Хе-хе… А вот если написано div.fact (т.е. без пробела) - такая надпись говорит о том, что есть ОДИН div, у которого есть класс .fact, т.е.

. Т.е. пробел говорит про ВЛОЖЕННОСТЬ элементов - одно находится в другом.
Используем всё тот же принцип: сильнее то, что ниже, а также специфичнее. Смотрим, что за данное свойство в CSS отвечают селекторы с .fact (не все, нас интересуют первые два). Давайте опять воспользуемся “то, что ниже” и подпишем к .fact те части, которые есть в селекторах от злобных котов: .profile div.fact{}, profile div.fact:nth-child(odd){}; Опять же, селектор может не быть точно такой же, .profile можно было бы заменить на .info: .info div.fact, например… Он всё равно работает так, как нужно!

#6

Там где вместе - мы присваиваем CSS-свойства элементу с классом stroke которому так-же присвоен класс button. Там где раздельно - все элементы размещены в отдельных контейнерах и имеют только один класс, т.е. если бы класс stroke находился в отдельном контейнере div внутри другого контейнера div c классом button, то мы бы писали через пробел тем самым применив CSS-свойства только тому элементу (stroke) который через пробел указан последним.
Когда запятая между именами классов - тогда мы одно и то же CSS-свойство применяем для нескольких классов. В первых двух случаях, только к одному.

Вот еще почитайте.


#7

У меня почему-то вот это решение не работает. #mishka не сдвигается все равно. Только с !important получилось


#8

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

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

Пойду ещё раз пробегусь по курсу каскадирования, потому как я явно что-то пропустил…

Извините, вопрос снимается, сам всё увидел “в атрибуте style” а не теге)).


#9

Спасибо, но все же понимание того, как все работает пока не приходит, к сожалению :frowning:
Может быть ты можешь что-то посоветовать? Я пытался и пытаюсь найти объяснения на сторонних ресурсах, но такое впечатление, что другие объяснения еще больше запутывают.
Книженцией пока не обзавелся. Сложно сделать выбор. Можешь предложить что-нибудь?


#10

а почему фон меняется у четных в мини-браузере?


#11

У вас какая-то ошибка, nth-child(odd) - только для нечетных.


#13

там #miSka, без буквы “h”) я тоже просидел полтора часа с этим


#14

Ребята…
Всё же непонятно что с миской происходит, по идее у нее максимальное значение специфичности - встроенный стиль + id(в теле html):

#miska { margin-right: 50px; }

Так почему в css работает эта конструкция:

#miska {
float: left;
margin-right: 5px;
}

  • кусок уже существующего кода(разделил для наглядности).

.albums img {
float: left;
margin-right: 5px;
}

Почему переопределяется margin-right с 50px на 5, если значение специфичности в css у миски ниже?