Последнее испытание. Наведение порядка


#1

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black !important;
}

.gallery {
display: flex;
flex-wrap: wrap;

width: 300px;
padding: 10px;
}

.picture {
width: 100px !important;
height: 100px !important;
margin: 10px;
padding: 10px;
border: 5px solid burlywood !important;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

/* Оформление картинок */
.gallery .cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color: #fff;
}

#scary.cat-slippers {
background-image: url(“cat-slippers.svg”);
}

.gallery .cat-cage {
background-image: url(“cat-cage.svg”);
}

.gallery .cat-fat {
background-image: url(“cat-fat.svg”);
}

Объясните пожалуйста как сделать без импортант, и цвет текста на четвертой картинке не меняется, даже при добавлении импортант к цвету текста.
Буду благодарна за правильный код с объяснением:)


#2

.cat-cage сделать без импортантов невозможно, потому что там инлайновые стили - самые специфичные. И убедитесь что color: black !important вы задаёте именно .cat-cage потому что в коде css .cat-cage идет предпоследним правилом, видимо специально что б запутать)


#3

А вот эту часть без импортант можно сделать? Искренне не понимаю как правильно, на форуме больше ничего не нашла

.picture {

width: 100px !important;
height: 100px !important;
margin: 10px;
padding: 10px;
border: 5px solid burlywood !important;

Вот часть с HTML которая не редактируется. Не понимаю как сделать более специфичным cat.fat

.gallery .cat-fat {
    background-image: url("cat-fish.svg");
    width: 90px;
    height: 80px;

#4

Короче вот мой код который дал 100%. На чистоту кода не претендую если что)) возможно где то наговнокодила) но тем не менее… В .picture ничего не меняла, меняла только у дочерних стили и селекторы.

/* Общее оформление */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;
}

.gallery {
display: flex;
flex-wrap: wrap;

width: 300px;
padding: 10px;
}

.picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

/* Оформление картинок */
.gallery .cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color: white;
}

.gallery #scary {
background-image: url(“cat-slippers.svg”);
}

.gallery .cat-fat {
background-image: url(“cat-fat.svg”);
width: 100px;
height: 100px;
color: black;
}

.cat-cage {
background-image: url(“cat-cage.svg”)!important;
border: 5px solid burlywood !important;
background-size: 64px 64px !important;
color: black !important;
}


#5

У меня один импотентом всё обошлось :slight_smile: /* Общее оформление */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;
}

.gallery {
display: flex;
flex-wrap: wrap;

width: 300px;
padding: 10px;
}

.picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

/* Оформление картинок */
.gallery .cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-COLOR: WHITE;
}

.gallery #scary {
background-image: url(“cat-slippers.svg”);
}

.gallery .cat-cage {
background-image: url(“cat-cage.svg”);
border-color: burlywood;
color: black !important;
}

.gallery .cat-fat {
width: 100px;
height: 100px;
background-image: url(“cat-fat.svg”);
}


#6

тоже на чистоту кода не претендую ) но вышло 100%

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;
}

.gallery {
display: flex;
flex-wrap: wrap;

width: 300px;
padding: 10px;
}

.gallery .picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

/* Оформление картинок */
.cat-foodlove {
background-image: url(“cat-foodlove.svg”) !important;
}

.cat-slippers {
background-image: url(“cat-slippers.svg”) !important;
}

.cat-cage {
background-image: url(“cat-cage.svg”) !important; color:black !important;
}

.cat-fat {
background-image: url(“cat-fat.svg”) !important;
}


#7

Что-то у меня коты не отображаются. Из-за этого 87% совпадения. Что я делаю не так?


#8

код целиком приложите.

также !important нужен только для единственного свойства, везде лепить не надо


#9

Помогите, пожалуйста: не отображаются фото.

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;
}

.gallery {
display: flex;
flex-wrap: wrap;

width: 300px;
padding: 10px;
}

.picture {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;

text-align: center;

background-repeat: no-repeat;
background-position: 50% 80%;
background-size: 64px 64px;
background-color: white;

border-radius: 10px;
}

/* Оформление картинок */
.gallery .cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color: white;
}

.gallery #scary {
background-image: url(“cat-slippers.svg”);
}

.gallery .cat-fat {
background-image: url(“cat-fat.svg”);
width: 100px;
height: 100px;
color: black;
}

.cat-cage {
background-image: url(“cat-cage.svg”)!important;
border: 5px solid burlywood !important;
background-size: 64px 64px !important;
color: black !important;
}


#10

Та же самая проблема, что и у выше высказывающихся в этом треде


#11

Внимательнее читаем задание:

Помогите Феликсу исправить галерею. Верните правильные стили обратно, увеличив специфичность и приоритетность испорченных CSS-правил.

Что это значит? Что надо изменить только специфичность селекторов.
Как изменить специфичность? Для этого есть таблица расчета специфичности селектора, приведенная в 15/18 задании курса.

Единственная проблема, которая не решается специфичностью селектора это прописанный в атрибуте стиль. Каскадирование устроено таким образом, что стили, прописанные для блока в атрибуте style, являются неизменяемыми с помощью стилевых таблиц (ни внутренних через тег style, ни внешних stylesheet). В этом случае (и только в этом) можно применить !important. Об этом было написано тут.

Соответственно дописывать свойства нужно только для одного измененного в атрибуте свойства, это которое style="color: red;"


#12

Спасибо за ответ. Я перечитал таблицу расчёта и в соответствии с ней изменил последнее правило в файле, добавив div. перед классом

div.cat-cage { background-image: url(“cat-cage.svg”); border: 5px solid burlywood; background-size: 64px 64px; color: black !important; }

Теперь всё, за исключением color, выполняется без !important.

Тем не менее, единственная проблема в том, что картинки не отображаются - ячейки содержат только надписи.

Пожалуйста, подскажите, в чём проблема. (в предыдущих сообщениях пользователи писали об использовании идентичного с моим кода, и у них результат был стопроцентным. Я даже копировал приведённый ими код выше, но ничего не получается). Имеет ли место баг?


#13

это потому что вы код не самостоятельно писали, а скопировали с форума. а форум (если не применять форматирование) ломает кавычки. соответственно в аргумент функции url() вы передаете не строку, а что-то непонятное интерпретатору CSS, поправьте кавычки на обычные двойные или одинарные


#14

благодарю