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

Ava-Jade · 28.Февраль.2020 22:37:19

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

.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”);
background-color: white;
}

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

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

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

Dinozavr · 07.Апрель.2020 09:53:07

У меня вот так получилось на 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;
}

.picture.cat-foodlove,
.picture.cat-slippers,
.picture.cat-fat,
.picture.cat-cage{
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;
}

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

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

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

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

RZX83 · 13.Апрель.2020 20:57:38

Использовал 1 раз !important (инлайн ведь только в одном месте) + не стал повторно дописывать свойство color: black, оно ведь уже указано через body. Поэтому как-то так:

body, div[style] {
  width: 550px;
  font-size: 14px;
  font-family: "Tahoma", "Arial", sans-serif;
  color: black !important;
}

CSS целиком

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

body, div[style] {
  width: 550px;
  font-size: 14px;
  font-family: "Tahoma", "Arial", sans-serif;
  color: black !important;
}

.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.cat-slippers {
  background-image: url("cat-slippers.svg");
}

div .cat-cage {
  background-image: url("cat-cage.svg");
}

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

DmitrySmirnovMSC · 25.Май.2020 23:58:06

100% результат с использованием только одного !important без добавления новых свойств

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

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

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

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

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

kdkind · 02.Июнь.2020 13:21:40

Здравствуйте!
Обьясните, пожалуйста, почему не работает с использованием !important в body?

BambuJenny · 14.Июнь.2020 21:32:01

Поддерживаю вопрос, подскажите, пожалуйста!
Тоже не понимаю, почему так не работает(

Kama · 16.Июнь.2020 13:39:21

я конечно могу ошибаться, но я понял так что в style прописано оно в приоритете, и поэтому тут необходимо указать именно конкретному коту изменить цвет текста добавив !important , я изменил этого кота таким кодом
.picture.cat-cage {
background-image: url(“cat-cage.svg”);
color: black !important;
border: 5px solid burlywood;

kappa77 · 21.Июль.2020 15:40:52

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

/* Оформление картинок */

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

}

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

}

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

.cat-fat.picture {
  background-image: url("cat-fat.svg");
  width:100px;
  height:100px;
}

у меня получилась такая штука, тема немного запутанная и ее лучше где то еще посмотреть, чтобы знающий человек объяснял, на примерах и на ошибках

Annaice · 01.Сентябрь.2020 13:49:45

вроде не мудрено вышло, на момент 01.09.2020 - актуально на 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;
}

/* Оформление картинок */

div .cat-foodlove {
background-image: url(“cat-foodlove.svg”);
}

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

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

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

Nippi · 04.Сентябрь.2020 22:46:35

Немного трудновато заходят таки изменения… но пока получается. 100% решение без изменения стилей, как и требуется в задаче (только один !important, но без него там никак)

Больше пока тревожит, что нет четкого понимания, зачем и что я поменял, где-то интуитивно делаешь, вроде бы получается, но картина целиком не стоит перед глазами. Прям расстраивает

/* Общее оформление */

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

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

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

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

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

Andrieieshyn · 02.Ноябрь.2020 14:38:16

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

body {
width: 550px;
font-size: 14px;
font-family: “Tahoma”, “Arial”, sans-serif;
color: black;
}
div.cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color:white;
}
#scary{
background-image: url(“cat-slippers.svg”);
}
div .cat-cage{
background-image: url(“cat-cage.svg”);
border: 5px solid burlywood;
color:black !important;
}
.gallery .cat-fat{
background-image: url(“cat-fat.svg”);
width: 100px;
height: 100px
}
.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;
}

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

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

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

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

kate.pdg · 04.Декабрь.2020 18:11:53

/* Общее оформление */

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

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

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

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

knkanat · 24.Декабрь.2020 20:00:43

Кажется вы не сами написали код а скопировали . попробуйте сами написать у вас ковычки не те (“ ”) надо (" ")

ferarek · 01.Май.2021 18:06:24

100%
как ни пытался избавиться от important - ничего не получилось(
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;
}

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

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

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

kovalev1craft · 31.Май.2021 10:15:06

Не понятно почему все так мудрят

/* Общее оформление */
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.cat-slippers {
background-image: url(“cat-slippers.svg”);
}

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

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

PeaceDrunks · 25.Июнь.2021 20:43:12

мой ответ)

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

div .cat-foodlove {
background-image: url(“cat-foodlove.svg”);
background-color: white;
}

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

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

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

KEKC · 12.Сентябрь.2021 06:43:56

Вот мой код, тоже 100%… 40 минут его редачил)

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

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

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

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

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

BAKS · 13.Декабрь.2021 12:29:07

100% Может поможет кому

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

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

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

.gallery .cat-fat {
background-image: url(“cat-fat.svg”);
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px solid burlywood;
}

ZiloK45 · 26.Январь.2022 21:30:50

/* Общее оформление */
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 {
  color: inherit !important;
  background-image: url("cat-cage.svg") !important;
}
.cat-fat {
  
  background-image: url("cat-fat.svg") !important;
  
}

KPATOC33 · 16.Сентябрь.2022 16:57: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;
}

.picture {
  width: 100px !important;
  height: 100px !important;
  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 !important;

  border-radius: 10px;
}

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

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

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

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

16.09.2022 100% проходит