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

AAS · 05.Сентябрь.2019 13:21:51

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”);
}

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

sehja · 05.Сентябрь.2019 19:55:24

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

AAS · 06.Сентябрь.2019 10:44:25

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

.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;

sehja · 06.Сентябрь.2019 12:57:41

Короче вот мой код который дал 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;
}

crocus71 · 06.Сентябрь.2019 13:43:59

У меня один импотентом всё обошлось /* Общее оформление */
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”);
}

zur1k · 16.Сентябрь.2019 11:47:58

тоже на чистоту кода не претендую ) но вышло 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;
}

AndreyMeshkow · 18.Сентябрь.2019 05:52:19

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

Hierumo · 18.Сентябрь.2019 06:35:45

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

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

vasiliy2 · 18.Сентябрь.2019 13:09:35

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

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;
}

vasiliy2 · 18.Сентябрь.2019 13:10:44

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

Hierumo · 18.Сентябрь.2019 13:48:53

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

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

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

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

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

vasiliy2 · 18.Сентябрь.2019 18:30:54

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

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

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

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

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

Hierumo · 18.Сентябрь.2019 19:52:13

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

vasiliy2 · 18.Сентябрь.2019 20:47:54

благодарю

AndreyMeshkow · 19.Сентябрь.2019 05:28:22

спасибо

Reagle · 14.Ноябрь.2019 10:30:41

Предыдущие главы отлетали на зубок просто . Эта же , то ли сложная то ли не понятно изложена . Я не мог связать HTML и CSS ( из за это не понимал с каким элементом надо работать , в частности (Окорочек который нужно было двигать).

Reagle · 14.Ноябрь.2019 13:46:13

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

#scary {
background-image:url(“cat-slippers.svg”) !important
}
.gallery .cat-fat {
background-image:url(“cat-fat.svg”);
height: 100px;
width: 100px;
}
div.cat-cage{
background-image:url(“cat-cage.svg”);
border-color:burlywood;
color:black !important;
}

Сделал так и все працюе)

tyumalex · 25.Ноябрь.2019 07:40:33

Ну, так, по-моему, будет по минимуму. Изменения в коде хотел выделить жирным, получилось звёздочками)))

/* Общее оформление */
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;
}

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

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

**.gallery**.cat-fat {
  background-image: url("cat-fat.svg");
}

**div** .cat-cage{
  background-image: url("cat-cage.svg");
  **color: black !important;**
 }

bekki · 26.Январь.2020 23:31:08

100%

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

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

.picture.cat-fat {
background-image: url(“cat-fat.svg”);
width:100px;
height:100px;
}
.picture.cat-cage {
background-image: url(“cat-cage.svg”);
border-color:burlywood ;
color: black !important;
}

REMBURO · 01.Февраль.2020 18:42:27

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;
}

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