[1/1] Новый дизайн карты путешествий


#22

у меня так получилось на 100%

body {
width: 550px;
margin: 0;
padding: 0 10px;
}

.image-map {
display: flex;
flex-wrap: wrap;

width: 290px;
height: 290px;
margin: auto;
background-color: navy;
border-radius: 20px;
padding: 5px;
}

.pic-1 {
border-color: blueviolet;
}

.pic-2 {
border-color: coral;
}

.pic-3 {
border-color: crimson;
}

.pic-4 {
border-color: deepskyblue;
}

.pic-1 .pic-2 .pic-3 .pic-4, img {
border: 5px solid black;
border-radius: 50%;
margin: 5px;
}


#23

На дворе вторая половина сентября, а ничего не изменилось. Программа обучения рваная из-за архивных глав, при прохождении курса “Знакомство с HTML и CSS” при решении вызовов нет НИКАКАИХ упоминаний про главу “Знакомство с таблицами” курса “Основы HTML”. Совсем не понятно как проходить курсы ПОСЛЕДОВАТЕЛЬНО. Поправьте , пожалуйста.


#24

В программе обучения указан тот порядок прохождения курсов, который мы рекомендуем. Именно ей нужно следовать, чтобы проходить материал последовательно. Уточните, пожалуйста, как именно архивные главы разрывают программу обучения? Если нет желания их проходить, то можно пропустить, как и любую другую главу. При этом мы оставили их в программе, потому что считаем полезными для повторения и отработки знаний.


#26

Они не разрывают программу, но программа из-за них выглядит непоследовательной. Или визуально нужно оформить две ветки (одна - актуальная, другая - архивная), которые сливаются в одну, или добавить в новый курс с котом Кексби главы про таблицы, формы, html5, а архивные скрыть. Правда, не очень понятно в какой последовательности проходить главы, если открываешь курс с главной страницы и последовательно его решаешь, то выходит что не все главы пройдешь для решения дополнительных задач на курсе.


#27


вот программа, что тут непоследовательно?


#28

Немного не понятен этот момент наследования. Поковырявшись понял, что работают 2 способа:
1й способ

2й способ
img { border-radius: 50%; border: 5px solid; margin: 5px; }
.pic-1 { border-color: blueviolet; }

Почему не работает свойство .pic-1 при написании:
.image-map img { border-radius: 50%; border: 5px solid; margin: 5px; }
.pic-1 { border-color: blueviolet; }
Ведь идет прямое обращение к классу .pic-1, почему в данном случае нужна вложенность через .image-map?


#29

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


#30

Порядок в коде имеет значение, но в данном случае дело в специфичности селекторов. В примере выше селектор .pic-1 менее специфичен, чем .image-map img. Вложенность в .image-map как раз увеличивает специфичность.

Тема подробно разбирается в этой главе.