Подскажите 18/18

Курсы §16. Наследование и каскадирование
1
  1. Не могу понять зачем нужны стили внутри html …?
  2. смог сделать только кнопки: покормить, погладить, напугать, не совсем понимаю как делать задание можете сделать один элемент и подробно рассказать что произошло, что позволило сделать работу более ближе к Образцу? Не понимаю может я настолько туп, но я выполнил все задания в этой главе, а в испытании вообще не понимаю.
    https://htmlacademy.ru/courses/66/run/18
    Вот что удалось сделать
    .photo .stroke {
    background: #3498db;
    }

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

.photo .startle {
background: #e74c3c;
}

2
  1. Это условие задания. Код “испорчен” стилями в html.
  2. Давайте попробуем разобраться. Но сначала расскажите, каким образом вы сделали кнопки. Не наугад же (я надеюсь)?
3
  1. Теперь понятно условие задание. Если честно я до вашего комментария вообще не понял задания ) (это раз).
  2. Кнопки я сделал не наугад. Я понял что нужно увеличить приоритет, чтобы кнопки изменились. Но не понимал зачем нужны стили в файле. Спасибо вам я понял, что они “типо” переопрелелили стили в CSS-файле, так как им сделали большую специфичность. Теперь я думаю сделаю это задание но ЕСЛИ НЕ ТРУДНО ПОКАЖИТЕ КАК СДЕЛАТЬ ЕЩЕ ЛЮБОЙ ОДИН ЭЛЕМЕНТ, ЧТОБЫ ПРИБЛИЗИТЬСЯ К ПОЛНОМУ ПЕРЕОПРЕДЕЛЕНИЮ СТИЛЕЙ ИЛИ ХОТЯ-БЫ ПОДСКАЖИТЕ КАК ПРОДОЛЖИТЬ И С ЧЕГО НАЧАТЬ (А ЛУЧШЕ И ТО И ДРУГОЕ ТЕМ НЕ МЕНЕЕ КАК ПРОДОЛЖИТЬ + СДЕЛАТЬ ХОТЬ ЧТО-ТО ЧТОБЫ Я УЛУЧШИЛ СВОЕ ПОНИМАНИЕ И СДЕЛАЛ ЭТО ЗАДАНИЕ). СПАСИБО
4

Хорошо. Давайте разберем один элемент.
Начнем с этого правила, написанного в html-коде:
#info-title, .profile .button {
background: #4dfe15;
}
Вы могли заметить, что здесь два селектора написаны через запятую, а значит заданный внутри фоновый цвет относится к двум разным элементам. Он относится к кнопкам (которые вы исправили сами) и к элементу с #info-title.
Находим в html-коде такой элемент:
<h2 id="info-title">Общая информация</h2>
Это заголовок. Далее находим в css-коде правило, отвечающее за стили заголовка:
.info h2 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
Селектор в этом правиле нам и нужно усилить. Но сначала обратим внимание, что это правило относится не только к одному заголовку. Есть еще один заголовок - “Альбомы”. Его мы тоже должны учесть.
Поэтому будем писать через запятую.
В правиле в html-коде использован селектор по id. Чтобы добиться большего уровня специфичности нам ничего не остается, как тоже использовать #info-title:
#info-title, .info h2 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}
Теперь с первым заголовком всё в порядке. Но что на счет второго?
<h2 style="margin-top:-50px;padding:0;">Альбомы</h2>
Здесь стили написаны в атрибуте style. Из теории мы с вами знаем, что переопределить стили, написанные в атрибуте style можно только одним способом - с помощью !important.
#info-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

Дальше сами.

9 лайков
5

Спасибо, все разобрался!

1 лайк
6

Подскажите пожалуйста, всё вроде сделал , единственное не понял что за селекторы и зачем они нужны
.fact::after {
content: “”;
display: table;
clear: both;
})`

7

Подробно об этом будет рассказано в курсе “Сетки”. А пока он вам не понадобится.

8

спасибо! после объяснения все встало на свои места!

9

Добрый день, с запятой разобрались, спасибо. А что на счёт пробелов? Почему запись
.button.stroke {
background: #3498db;
}

не равна записи

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

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

10

пробел - это вложенность, а отсутствие пробела - это…

в html-коде запись выглядит:

<span class="button stroke">Погладить</span>
<span class="button feed">Накормить</span>
<span class="button startle">Напугать</span>
11

разобралась, это мультиклассы